js实现贪吃蛇小游戏(容易理解)
话不多说,请看代码:
十年的滑县网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整滑县建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“滑县网站设计”,“滑县网站推广”以来,每个客户项目都认真落实执行。
贪吃蛇
第一步:初始化地图,创建蛇圈。
第二步:创建蛇,随机生产食物。
第三步:让蛇移动起来。
第四步:通过js绑定键盘事件,控制蛇移动方向。
var box={width:50,height:50};//每一个方块的高度 var snake=[];//保存蛇每一节身体对应的span var DIR={ DIR_RIGHT:1, DIR_LEFT:2, DIR_TOP:3, DIR_BOTTOM:4 }; var dir=DIR.DIR_BOTTOM; var food=null; //始终记录当前的食物 window.onload=function(){ //1.初始化地图 initMap(); //2.创建蛇 //2.5随机显示食物 showFood(); createSnake(); //3.让蛇动起来 setInterval(snakeMove,100); //4.控制蛇移动 document.onkeyup=function(e){ switch(e.keyCode){ case 37:dir=DIR.DIR_LEFT;break; case 38:dir=DIR.DIR_TOP;break; case 39:dir=DIR.DIR_RIGHT;break; case 40:dir=DIR.DIR_BOTTOM;break; } } }; function isInSnakeBody(left,top){ for(var i=0;icon.offsetWidth-2-1){newLeft=0;} if(newLeft<0){newLeft=con.offsetWidth-2-box.width;} if(newTop<0){newTop=con.offsetHeight-2-box.height;} if(newTop>con.offsetHeight-2-1){newTop=0;} //判断新蛇头的位置是不是在蛇身体里面 //for(var i=0;i
*{ padding:0; margin:0; } html,body{ width:100%; height:100%; } body{ position:relative; } div#container{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:800px; height:500px; border:1px solid black; font-size:0px; } span{ display:inline-block; border:1px solid black; box-sizing:border-box; } span.snake{ position:absolute; background-color:red; } span.food{ position:absolute; background-color:blue; }
最后的效果图如下:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持创新互联!
本文名称:js实现贪吃蛇小游戏(容易理解)
网页链接:http://scyanting.com/article/iepgse.html