刚开始学js，还是一知半解，做个小游戏感受一下js的作用

最新推荐文章于 2023-10-18 21:42:34 发布

玄生

最新推荐文章于 2023-10-18 21:42:34 发布

阅读量281

点赞数

分类专栏：学习js

本文链接：https://blog.csdn.net/qq_43506752/article/details/96154756

版权

学习js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>越来越快</title>
<style type="text/css">
    body{
        background-color: orange;
    }
    body div{
        width:800px;
        height:800px;
        margin-left:30%;
        margin-top:5%;
        background-color: red;
    }
    span{
        width:100px;
        height:10px;
    }
    table{
        width:100%;
        height:100%;
    }
</style>
</head>
<body>
       分数:<span id="score">0</span>
       速度:<span id="speed">500</span>
    <div>
        
        <table border="1" >
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </table></div>
    <script type="text/javascript">
        var body=new Object();
        body.x=0;
        body.y=0;
        body.num=1;
        food();
        color();
        var speed=500;
        var i=0,flag=1;
        var val;
        
    function dyn(){//i=1，向左，2向上，3向下，4向右\
    	clearTimeout(val);
    	var x=body.x+body.y*10;
    	if(body.num%10==0&&flag==1){speed=speed-50;flag=0;}
    	var tds=document.getElementsByTagName('td');
    	tds[x].style.background="red";
    	//判断下一步是否与食物相碰撞，是则num+1，且食物刷新
    	if(i==1){
    		body.x=body.x-1;
    		var f=body.x+body.y*10;
    		//判断方块是否与食物碰撞且是否撞墙
    		if(body.x>=0&&f==y){//与食物碰撞
    			body.num++;
    			flag=1;
    		    food();
    		}
    		else if(body.x<0){
    			alert("游戏失败！");
    		}
    	}else if(i==2){
    		body.y=body.y-1;
    		var f=body.x+body.y*10;
    		//判断头部是否与食物碰撞且是否撞墙
    		if(body.y>=0&&f==y){//与食物碰撞
    			body.num++;
    			flag=1;
    		    food();
    		}
    		else if(body.y<0){
    			alert("游戏失败！");
    			
    		}
    	}
    	else if(i==3){
    		body.y=body.y+1;
    		var f=body.x+body.y*10;
    		//判断头部是否与食物碰撞且是否撞墙
    		if(body.y<=9&&f==y){//与食物碰撞
    			body.num++;
    			flag=1;
    		    food();
    		}
    		else if(body.y>9){
    			alert("游戏失败");
    		}
    	}else if(i==4){
    		body.x=body.x+1;
    		var f=body.x+body.y*10;
    		//判断头部是否与食物碰撞且是否撞墙
    		if(body.x<=9&&f==y){//与食物碰撞
    			body.num++;
    			flag=1;
    		    food();
    		}
    		else if(body.x>9){
    			alert("游戏失败！");
    		}
    	}
    	color();
    	document.getElementById("score").innerHTML=""+body.num;
    	document.getElementById("speed").innerHTML=""+speed;
    	val=setTimeout("dyn()",speed);
    	
    }
    function color(){//身体颜色
    	var tds=document.getElementsByTagName('td')
    	t=tds[body.x+body.y*10];
    	t.style.background="blue";
       
    }
    function food(){//食物生生成
    	var x=parseInt(Math.random()*100);
	    if((body.x+body.y*10)==x) food();else{
		var tds = document.getElementsByTagName('td');
		tds[x].style.background="orange";
		y=x;}
    }

document.onkeydown=function(event){//键盘监听函数
    var e = event || window.event || arguments.callee.caller.arguments[0];
     if(e && (e.keyCode==37||e.keyCode==65)){//向左
       i=1;
    }
    if(e && (e.keyCode==38||e.keyCode==87)){//向上
    	i=2;
    }
    if(e && (e.keyCode==40||e.keyCode==83)){//向下
    	i=3;
    }
    if (e&& (e.keyCode==39||e.keyCode==68)) {//向右
    	i=4;
    }
    val=setTimeout("dyn()",speed);
    }
</script>

</body>
</html>

玄生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
刚开始学js，还是一知半解，做个小游戏感受一下js的作用

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>越来越快</title><style type="text/css"> body{ background-color: orange; } body di...
复制链接

扫一扫