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 相关文章推荐
JavaScript Cookie 直接浏览网站分网址
Dec 08 Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 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 Socket配置以及实例的详细介绍
2013/06/13 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
php实现微信扫码支付
2017/03/26 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
深入理解Vue router的部分高级用法
2018/08/15 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
21行Python代码实现拼写检查器
2016/01/25 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
python 实现登录网页的操作方法
2018/05/11 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
简历自我评价模版
2014/01/31 职场文书
工作态度检讨书
2014/02/11 职场文书
高考标语大全
2014/06/05 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
一个都不能少观后感
2015/06/04 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
股权投资协议书
2016/03/23 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python