js实现网页版贪吃蛇游戏


Posted in Javascript onFebruary 22, 2020

使用原生 js 实现贪吃蛇小游戏,首先这个 小游戏的目录结构如下: 有 贪吃蛇 , 食物 ,地图 ,还有 游戏

js实现网页版贪吃蛇游戏

当我们在浏览器打开 index.html 的时候,会出现 移动的小蛇 ,随机生成的食物(这里只有一个,当前食物被吃掉,才会初始化下一个),用户通过键盘上的方向键控制小蛇移动的方向

js实现网页版贪吃蛇游戏

当小蛇触碰到了墙,即画布边缘的时候,游戏结束!

js实现网页版贪吃蛇游戏

接下来就是代码实现啦 ~

食物模块

//食物的自调用函数
 (function(){

 //创建一个数组 来存放元素
 var elements=[];

 //食物就是一个对象 有宽 有高 有颜色 有横纵坐标 先有构造函数 然后创建对象
 function Food(width,height,color,x,y){
 //元素的宽和高 默认20
 this.width=width||20;
 this.height=height||20;
 //元素的颜色 默认绿色
 this.color=color||"green";
 //元素的横纵坐标 默认为0 
 this.x=x||0;
 this.y=y||0;
 }
 
 //为元素添加初始化的方法 最好放原型里 公用 在页面上显示 所以需要map
 Food.prototype.init=function(map) {
 //先删除食物
 //外部无法访问的函数
 remove();
 // 创建元素
 var div=document.createElement("div");
 // 把元素追加到map中
 map.appendChild(div);
 // 设置元素的样式 宽 高 颜色 
 div.style.width=this.width+"px";
 div.style.height=this.height+"px";
 div.style.backgroundColor=this.color;
 //先脱离文档流
 div.style.position="absolute";
 //横纵坐标随机产生的
 this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
 this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
 //元素的横纵坐标
 div.style.left=this.x+"px";
 div.style.top=this.y+"px";

 //把div元素追加到elements数组中
 elements.push(div);
 }; 

 //私有的函数 删除食物的
 function remove(){
 //elements数组中有这个食物
 for(var i=0;i<elements.length;i++){
 var ele=elements[i];
 //找到这个食物的父级元素 从地图上删除食物
 ele.parentNode.removeChild(ele);
 //删除数组的div元素 在i处删除一项
 elements.splice(i,1);
 }
 }

 //把Food暴露给window
 window.Food=Food;
 }());

小蛇模块

//小蛇的自调用函数
 (function(){

 //定义一个数组 存放小蛇
 var elements=[];

 // 小蛇的构造函数
 function Snake(width,height,direction){
 //每个部分的宽和高
 this.width=width||20;
 this.height=height||20;
 //小蛇的身体部分
 this.body=[
 {x:3,y:2,color:"red"},//小蛇的头部
 {x:2,y:2,color:"orange"},//小蛇的身体
 {x:1,y:2,color:"orange"}//小蛇的身体
 ];
 //方向
 this.direction=direction||"right";
 }

 //通过原型添加方法,给小蛇添加初始化方法
 Snake.prototype.init=function(map){
 remove();
 //循环遍历
 for(var i=0;i<this.body.length;i++){
 //每一个数组元素都是一个对象
 var obj=this.body[i];
 //创建div 
 var div=document.createElement("div");
 //追加到map中
 map.appendChild(div);
 //设置div的样式
 div.style.position="absolute";
 div.style.width=this.width+"px";
 div.style.height=this.height+"px";
 //横纵坐标
 div.style.left=obj.x*this.width+"px";
 div.style.top=obj.y*this.height+"px";
 //背景颜色
 div.style.backgroundColor=obj.color;
 //方向暂定
 //把div追加到elements数组中 目的是为了删除
 elements.push(div);
 }
 };

 //通过原型添加move方法 
 Snake.prototype.move=function(food,map) {
 //小蛇的身体部分 把前一个的横纵坐标给下一个
 var i=this.body.length-1;
 //逆序循环
 for(;i>0;i--){
 this.body[i].x=this.body[i-1].x;
 this.body[i].y=this.body[i-1].y;
 }

 // 判断方向 改变小蛇的头部的坐标
 switch(this.direction){
 case "right":
 this.body[0].x+=1;
 break;
 case "left":
 this.body[0].x-=1;
 break;
 case "top":
 this.body[0].y-=1;
 break;
 case "bottom":
 this.body[0].y+=1;
 break;
 }

 //判断有没有吃到食物
 //小蛇的头的坐标和食物的坐标一致
 var headX=this.body[0].x*this.width;
 var headY=this.body[0].y*this.height;
 //判断小蛇的头部坐标和食物的坐标是否相同
 if(headX==food.x&&headY==food.y){
 //获取小蛇的最后的尾巴
 var last=this.body[this.body.length-1];
 //加入到数组中 以对象的方式加入
 this.body.push({
 x:last.x,
 y:last.y,
 color:last.color
 });
 //把食物删除 初始化食物
 food.init(map);
 }
 };

 //添加私有的删除函数
 function remove(){
 var i=elements.length-1;
 //逆序 找到这个元素的父元素 删除
 for(;i>=0;i--){
 var ele=elements[i];
 //从地图上删除元素
 ele.parentNode.removeChild(ele);
 //从数组中删除
 elements.splice(i,1);
 }
 }

 //把Snake暴露给window
 window.Snake=Snake;
 }());

游戏模块

//游戏的自调用函数
 (function(){

 var that=null;
 //游戏的构造函数
 function Game(map){
 this.food=new Food();//食物对象
 this.snake=new Snake();//小蛇对象
 this.map=map;//地图
 that=this;//保留当前的实例对象到that变量中 此时that 就是this
 }

 //游戏初始化
 Game.prototype.init=function(){
 //食物初始化
 this.food.init(this.map);
 //小蛇初始化
 this.snake.init(this.map);//先让小蛇显示
 //调用设置小蛇移动的方法
 this.runSnake(this.food,this.map);
 //调用按键的方法
 this.bindKey();
 };

 //添加原型函数 设置小蛇可以自由移动
 Game.prototype.runSnake=function(food,map){
 //此时的this是实例对象
 //setInterval 方法是通过window调用的 this指向改变了
 var timeId=setInterval(function(){
 this.snake.move(food,map);
 this.snake.init(map);
 //横坐标的最大值 map的属性在style标签中
 var maxX=map.offsetWidth/this.snake.width;
 //纵坐标的最大值
 var maxY=map.offsetHeight/this.snake.height;
 var headX=this.snake.body[0].x;
 var headY=this.snake.body[0].y;
 // 横坐标方向的检测
 if(headX<0||headX>=maxX){
 //撞墙了 停止定时器
 clearInterval(timeId);
 alert("游戏结束");
 }
 //纵坐标方向的检测
 if(headY<0||headY>=maxY){
 //撞墙了 停止定时器
 clearInterval(timeId);
 alert("游戏结束");
 }
 }.bind(that),200);//绑定到that中 即实例对象
 };

 //获取用户的按键 改变小蛇的方向
 Game.prototype.bindKey=function(){
 //这里的this 应该是触发keydown事件的对象 --document
 //所以这里的this就是document
 //获取用户的按键
 document.addEventListener("keydown",function(e){
 switch(e.keyCode){
 case 37: 
 this.snake.direction="left";
 break;
 case 38: 
 this.snake.direction="top";
 break;
 case 39: 
 this.snake.direction="right";
 break;
 case 40: 
 this.snake.direction="bottom";
 break;
 }
 }.bind(that),false);//绑定实例对象
 };

 //暴露给window
 window.Game=Game;
 }());

主页面

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>贪吃蛇</title>
 <style>
 .map {
 width: 1800px;
 height: 800px;
 background-color: gray;
 position: relative;
 margin: 0 auto;
 }
 </style>
</head>
<body>
 <!-- 画出地图 设置样式 -->
 <div class="map"></div>
 <script src="../js/food.js"></script>
 <script src="../js/snake.js"></script>
 <script src="../js/game.js"></script>
 <script>

 //初始化游戏对象
 var game=new Game(document.querySelector(".map"));
 //初始化游戏
 game.init();
 </script>
</body>
</html>

小编还为大家准备了精彩的专题:javascript经典小游戏汇总

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
深入了解js原型模式
May 30 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
原生js实现3D轮播图
Mar 21 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 #Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 #Javascript
JavaScript中this函数使用实例解析
Feb 21 #Javascript
如何通过JS实现转码与解码
Feb 21 #Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 #Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 #Javascript
JS实现判断移动端PC端功能
Feb 21 #Javascript
You might like
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
Php Cookie的一个使用注意点
2008/11/08 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
python提取log文件内容并画出图表
2019/07/08 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
基于python实现学生信息管理系统
2019/11/22 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
个人求职简历中英文自我评价
2013/12/16 职场文书
敬老模范事迹
2014/05/21 职场文书
法学院毕业生求职信
2014/06/25 职场文书
教师学期末个人总结
2015/02/13 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
儿子满月酒致辞
2015/07/29 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
Redis基本数据类型String常用操作命令
2022/06/01 Redis