Javascript事件对象+贪吃蛇

最新推荐文章于 2024-07-30 22:36:34 发布

iteye_19838

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量75

点赞数

分类专栏： Javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_19838/article/details/82568407

版权

Javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

事件对象：
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>

iteye_19838

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript事件对象+贪吃蛇

事件对象：http://www.w3school.com.cn/htmldom/dom_obj_event.asp时钟循环：http://www.w3school.com.cn/htmldom/met_win_setinterval.asp[code="html"]#tu{ position: absolute; left:0px; top:0...
复制链接

扫一扫

专栏目录