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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
小程序关于请求同步的总结
May 05 Javascript
Axios取消重复请求的方法实例详解
Jun 15 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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
js命名空间写法示例
2015/12/18 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python实现自动发送报警监控邮件
2018/06/21 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python ftplib模块使用代码实例
2019/12/31 Python
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
个人生活学习自我评价范文
2013/11/26 职场文书
促销活动总结
2014/04/28 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
集结号观后感
2015/06/08 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏