`

Javascript事件对象+贪吃蛇

 
阅读更多
事件对象：
http://www.w3school.com.cn/htmldom/dom_obj_event.asp

时钟循环：
http://www.w3school.com.cn/htmldom/met_win_setinterval.asp 

<html>
<head>
<style>
#tu{
	position: absolute; 
	left:0px;
	top:0px;
	width:20px;
	height:20px;
	background:#555;
}
</style>
</head>

<body onkeydown="opt()">
<div id="tu">
<script>
var x=0;
var y=0;
var vx=5;  //x轴速度
var vy=5;  //y轴速度
var paused=false; //暂停

var tu = document.getElementById('tu');

//for(var key in window)
//	document.write(window[key]);

function run(){
	x+=vx;
	y+=vy;
	tu.style.left=x;
	tu.style.top=y;
}

var sz = setInterval(function(){
	run();
}, 100);

function pause(){
	if(paused==false){
		clearInterval(sz);  //停止时钟循环
		paused=true;
	}	
	else{
		sz = setInterval(function(){ //开始时钟循环
			run();
		}, 100);
		paused=false;
	}	
}

function opt(){
	var code = event.keyCode; //获取事件对象event的属性
	switch(code){
		case 37:
			vx=-5;
			vy=0;
			break;
		case 38:
			vx=0;
			vy=-5;
			break;
		case 39:
			vx=5;
			vy=0;
			break;
		case 40:
			vx=0;
			vy=5;
			break;
		case 32:
			pause();
			break;	
	}
}


</script>
</body>
</html>
分享到：
| Javascript事件操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    小练手+JavaScript+贪吃蛇

    【标题】"小练手+JavaScript+贪吃蛇"是一个基于JavaScript编程语言开发的小型游戏项目，它模仿了经典游戏“贪吃蛇”。这个项目旨在帮助开发者熟悉JavaScript的基础语法和事件处理，同时锻炼其实现简单游戏逻辑的能力...

    小游戏JavaScript面向对象编程贪吃蛇

    在这个名为"小游戏JavaScript面向对象编程贪吃蛇"的项目中，我们将深入探讨如何利用JavaScript的面向对象特性来实现经典的贪吃蛇游戏。 贪吃蛇游戏的核心概念包括蛇、食物、边界和游戏状态。在JavaScript中，我们...

    JavaScript原生面向对象贪吃蛇.rar

    JavaScript原生面向对象贪吃蛇是一款使用纯JavaScript编程实现的经典小游戏。它利用了JavaScript的面向对象编程特性，展示了如何在浏览器环境中创建一个交互式的、动态的游戏。在这个项目中，我们将探讨以下几个关键...

    html+javascript 贪吃蛇（说明详细）

    通过这个游戏，你可以学习到如何结合HTML、CSS和JavaScript来创建动态的、交互式的网页应用，同时也能掌握到事件处理、对象和类的使用等编程概念。对于初学者来说，这是一个非常有价值的练习项目。

    javascript开发贪吃蛇游戏

    在JavaScript中，获取`canvas`元素并创建一个`CanvasRenderingContext2D`对象，用于绘制和更新游戏画面。同时，定义游戏的一些基本变量，如蛇的位置、长度、速度、食物位置等。 ```javascript const canvas = ...

    html+javascript贪吃蛇

    【HTML+JavaScript 贪吃蛇详解】 贪吃蛇是一款经典的电子游戏，它以其简单而有趣的游戏机制吸引了无数玩家。在现代网页开发中，我们可以通过HTML和JavaScript来实现这一游戏，让玩家在浏览器中直接游玩。本文将详细...

    javascript贪吃蛇(面向对象)

    JavaScript贪吃蛇是一款基于面向对象编程的经典小游戏，它利用了HTML、CSS和JavaScript技术来实现。在这个项目中，我们将深入探讨JavaScript的面向对象特性以及如何应用于游戏开发。 首先，JavaScript是一种支持...

    html5小程序（电子日历+手绘时钟+响应式放大菜单+贪吃蛇游戏）关键代码及其文档

    - **JavaScript日期对象**：掌握如何利用JavaScript获取当前日期、计算日期等。 - **DOM操作**：学习如何通过JavaScript创建、修改DOM元素。 - **事件处理**：了解如何绑定点击事件以实现月份切换等功能。 - **...

    javascript贪吃蛇(源码)

    总的来说，JavaScript贪吃蛇游戏是一个很好的实践项目，它涵盖了JavaScript的基础语法、对象操作、事件处理以及基本的游戏逻辑。通过学习和理解这个游戏，你不仅能提高JavaScript编程技能，还能培养逻辑思维能力和...

    JavaScript贪吃蛇小游戏.zip

    通过学习和实践这个JavaScript贪吃蛇小游戏，开发者不仅可以深入理解JavaScript的基本语法和面向对象编程，还能掌握到游戏开发中的动态更新、事件处理、动画制作等技巧，对于提升前端开发能力大有裨益。

    javascript期末项目-贪吃蛇.zip

    【标题】"javascript期末项目-贪吃蛇.zip"是一个基于JavaScript技术实现的期末项目，它构建了一个经典的小游戏——贪吃蛇。这个项目展示了开发者在JavaScript编程上的技能和对游戏逻辑的理解。 【描述】提到的“蛇...

    用javascript编写的贪吃蛇小游戏

    在网页上利用JavaScript实现贪吃蛇游戏，既可以让开发者熟悉JavaScript的基础语法，也能提升对DOM操作、事件监听等技能的掌握。本文将详细介绍如何用JavaScript编写一个基本的贪吃蛇游戏。 首先，我们要理解游戏的...

    Javascript贪吃蛇游戏源码

    JavaScript对象可以用来表示游戏状态，并根据状态执行相应的操作。 10. **用户界面** 游戏界面的美观和易用性也很重要，可能需要使用CSS来设计布局和样式，使得游戏更加吸引人。 总结来说，制作JavaScript贪吃蛇...

    javaScript贪吃蛇源代码

    总结来说，这个JavaScript贪吃蛇源代码是一个很好的学习案例，涵盖了JavaScript的基础知识，如事件处理、定时器、DOM操作、数组处理以及简单的图形渲染。通过阅读和理解这段代码，开发者可以深入理解JavaScript在...

    JavaScript简易贪吃蛇

    JavaScript简易贪吃蛇是一款利用面向对象编程思想开发的基于网页的简单游戏。在这个游戏中，玩家通过控制一个由多个方块组成的小蛇，目标是吃到屏幕上出现的食物，每次吃掉食物后，小蛇会变长，游戏难度也随之增加。...

    原生 JavaScript 实现像素贪吃蛇

    JavaScript提供了事件监听机制，如`addEventListener`，用于在用户按下特定键时触发相应动作，如改变蛇的方向。 2. **变量和数据结构**：游戏状态需要存储在变量中，如蛇的位置、食物的位置、分数等。数组可以用来...

Magicbox
Global site tag (gtag.js) - Google Analytics