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 键盘事件的几个基本方法
Oct 30 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
javaScript语法总结
Nov 25 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
Json实现传值到后台代码实例
Jun 30 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动态生成JavaScript代码
2009/03/09 PHP
php下获取客户端ip地址的函数
2010/03/15 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
担保书怎么写
2014/04/01 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
公司费用报销管理制度
2015/08/04 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers