js如何实现网页版贪吃蛇游戏

　　介绍

这篇文章将为大家详细讲解有关js如何实现网页版贪吃蛇游戏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

js如何实现网页版贪吃蛇游戏

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

js如何实现网页版贪吃蛇游戏

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

js如何实现网页版贪吃蛇游戏

接下来就是代码实现啦~

<>强食物模块

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

<强>小蛇模块

//小蛇的自调用函数 　　,(函数(){ 　　 　　,//定义一个数组,存放小蛇 　　,var 元素=[]; 　　 　　,//小蛇的构造函数 　　,function 蛇(宽度、高度、方向){ 　　,//每个部分的宽和高 　　,上宽| | 20; 　　高度,this.height=| | 20; 　　,//小蛇的身体部分 　　,this.body=[ 　　,{x: 3 y: 2,颜色:“red"},//小蛇的头部 　　,{x: 2, y: 2,颜色:“orange"},//小蛇的身体 　　,{x: 1, y: 2,颜色:“orange"}//小蛇的身体 　　,); 　　,//方向 　　方向,this.direction=| |“right"; 　　,} 　　 　　,//通过原型添加方法,给小蛇添加初始化方法 　　,Snake.prototype.init=function(地图){ 　　,remove (); 　　,//循环遍历 　　,(var 我=0;i 0;我——){ 　　,this.body[我]。x=this.body(张)方式; 　　[我],this.body .y=this.body .y(张); 　　,} 　　 　　,//判断方向,改变小蛇的头部的坐标 　　,开关(this.direction) { 　　,case “right": 　　,this.body [0]。x +=1; 　　,打破; 　　,case “left": 　　,this.body [0]。x -=1; 　　,打破; 　　,case “top": 　　,this.body [0] .y -=1; 　　,打破; 　　,case “bottom": 　　,this.body [0] .y +=1; 　　,打破; 　　,} 　　 　　,//判断有没有吃到食物 　　,//小蛇的头的坐标和食物的坐标一致 　　,var  headX=this.body [0]。x *上; 　　,var 兴奋的=this.body [0] .y * this.height; 　　,//判断小蛇的头部坐标和食物的坐标是否相同 　　,如果(headX==food.x&,兴奋的==food.y) { 　　,//获取小蛇的最后的尾巴 　　,var 去年=this.body [this.body.length-1]; 　　,//加入到数组中,以对象的方式加入 　　,this.body.push ({ 　　,x: last.x, 　　,y: last.y, 　　颜色:last.color 　　,}); 　　,//把食物删除,初始化食物 　　,food.init(地图); 　　,} 　　,}; 　　 　　,//添加私有的删除函数 　　,function  remove () { 　　,var 我=elements.length-1; 　　,//逆序,找到这个元素的父元素,删除 　　,(;i>=0;我——){ 　　避署,var =[我]元素; 　　,//从地图上删除元素 　　,ele.parentNode.removeChild(避署); 　　,//从数组中删除 　　,elements.splice(我,1); 　　,} 　　,} 　　 　　,//把蛇暴露给窗口 　　,window.Snake=蛇; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

js如何实现网页版贪吃蛇游戏