js实现贪吃蛇小游戏(容易理解)


Posted in Javascript onJanuary 22, 2017

话不多说,请看代码:

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>贪吃蛇</title>
 <link rel="stylesheet" href="style.css">
 <script src="style.js" ></script>
 </head>
 <body>
 <div id="container"></div>
 </body>
</html>

第一步:初始化地图,创建蛇圈。
第二步:创建蛇,随机生产食物。
第三步:让蛇移动起来。
第四步:通过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;i<snake.length;i++){
 if(snake[i].offsetTop==top&&snake[i].offsetLeft==left){
 return true;
 }
 }
}
//这种随机生成食物的方法效率低---随着蛇身体的增长,随机生成食物的时间会变慢。
function showFood(){
 var con=document.getElementById("container");
 food=document.createElement("span");
 food.className="food";
 food.style.width=box.width+"px";
 food.style.height=box.height+"px";
 var left,top;
 do{
 left=Math.floor((con.offsetWidth-2)/box.width*Math.random())*box.width;
 top=Math.floor((con.offsetHeight-2)/box.height*Math.random())*box.height;
 }while(isInSnakeBody(left,top));
 food.style.left=left+"px";
 food.style.top=top+"px";
 con.appendChild(food);
}
function initMap(){
 var con=document.getElementById("container");
 var row=Math.floor(con.offsetWidth/box.width);
 var rol=Math.floor(con.offsetHeight/box.height);
 var num=row*rol;
 var newSpan=null;
 for(var i=1;i<=num;i++){
 newSpan=document.createElement("span");
 newSpan.style.width=box.width+"px";
 newSpan.style.height=box.height+"px";
 con.appendChild(newSpan);
 } 
}
function createSnake(){
 var newBody=null;
 var con=document.getElementById("container");
 for(var i=1;i<=5;i++){
 newBody=document.createElement("span");
 newBody.style.width=box.width+"px";
 newBody.style.height=box.height+"px";
 newBody.style.left=(i-1)*box.width+"px";
 newBody.style.top="0px";
 newBody.className="snake";
 con.appendChild(newBody);
 snake.push(newBody);
 }
}
function snakeMove(){
 var con=document.getElementById("container");
 //蛇头移动
 var head=snake[snake.length-1];
 var newTop=head.offsetTop,newLeft=head.offsetLeft;
 switch(dir){
 case DIR.DIR_LEFT:newLeft-=box.width; break;
 case DIR.DIR_RIGHT:newLeft+=box.width; break;
 case DIR.DIR_TOP:newTop-=box.height; break;
 case DIR.DIR_BOTTOM:newTop+=box.height; break;
 default:break;
 }
 //如果超出边界,计算蛇头下一个位置的坐标
 if(newLeft>con.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<snake.length-1;i++){
 // if(snake[i].offsetLeft==newLeft&&snake[i].offsetTop==newTop){
 // alert("Game over!!");
 // window.location.href=window.location.href;
 // } 
 //}
 //1.如果吃到食物
 if(newLeft==food.offsetLeft&&newTop==food.offsetTop){
 food.className="snake";
 snake.push(food);
 showFood();
 return;
 }
 //2.如果没吃到
 //除蛇头外身体移动
 for(var i=0;i<snake.length-1;i++){
 snake[i].style.top=snake[i+1].offsetTop+"px";
 snake[i].style.left=snake[i+1].offsetLeft+"px";
 }
 head.style.left=newLeft+"px";
 head.style.top=newTop=newTop+"px";
}
*{
 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实现贪吃蛇小游戏(容易理解)

js实现贪吃蛇小游戏(容易理解)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
ajax与302响应代码测试
Oct 23 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
vue src动态加载请求获取图片的方法
Oct 17 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 #Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 #Javascript
js实现图片360度旋转
Jan 22 #Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 #Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 #Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 #Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 #Javascript
You might like
PHP中对数据库操作的封装
2006/10/09 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
JS模拟多线程
2007/02/07 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
详解Django中Request对象的相关用法
2015/07/17 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python3 合并二叉树的实现
2019/09/30 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
英国精品买手店:Browns Fashion
2016/09/29 全球购物
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
语文教学感言
2014/02/06 职场文书
文艺演出策划方案
2014/06/07 职场文书
员工教育培训协议书
2014/09/27 职场文书
Python之基础函数案例详解
2021/08/30 Python
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android