用js实现贪吃蛇网页游戏

在整一个游戏画面我们可以看到有地图、食物、小蛇。所以整个思想就是以这三个东西来研究。

01.地图：
样式：宽、高、背景颜色。
细节：
a.因为小蛇、食物都是相对于地图显示的，所以小蛇、食物都是地图的子元素，并且小蛇和食物是脱离地图的，随机位置显示的。同时地图也需要脱离文档流（脱标）。

02.食物（对象）：
属性：宽、高、背景颜色、横坐标、纵坐标。
方法：显示在地图上。
细节：
a.要先创建食物的构造函数，才能创建食物这一个对象。
b.食物的显示方法是通过对象调用方法，显示食物，设置相应的样式。
c.食物被吃后，该食物就应该删掉，再次随机位置出现新的食物（用到一个私有函数删除地图上的食物和数组存数据）。

03.小蛇（对象）：
属性：宽、高、背景颜色、方向、横坐标、纵坐标。
方法：显示在地图上。(小蛇移动，实际上并不是真的移动)
细节：
a.小蛇移动，把小蛇的头的坐标给小蛇第一部分的身体,第一部分的身体的坐标给下一个部分身体。
b.小蛇的头,需要单独的设置:方向。

04.还有操作上的：键盘、游戏结束弹框等等，具体看下面的详解吧！

01.创建地图：

     .map{width: 800px;height: 600px;background-color: #000;position: relative;/*蛇、食物跟地图都是分离的*/}<div class="map"></div><!-- 画地图，设置样式！ -->

#用div创建一个地图

02.小蛇：
a.创建食物：

 <!-- 先有食物，然后不断随机创建食物，吃掉之后不断删掉 -->
<script>//先定义一个函数，然后创建一个对象，自调用函数：1.(function(){})()、2.(function(){}())----> 把函数放在小括号里面，更能显示出整体性，以下还会用到(function(){var elements=[];//用来保存每个小方块事食物的//这里的食物就是一个对象，属性：长、宽、背景颜色、横纵坐标function Food(x, y, width, height,color){//横纵坐标this.x=x||0;//默认为0this.y=y||0;//长、宽this.width=width||20;//默认为20this.height=height||20;//背景颜色this.color=color||"green"}//为原型函数添加初始化的方法（把食物显示在页面上）//食物在地图上，所以要map这个函数（class=map的div里面）,init(初始化)Food.prototype.init=function(map){//创建divvar div =document.createElement("div");//把div加到map中map.appendChild(div);//设置div样式div.style.width=this.width+"px";div.style.height=this.height+"px";div.style.backgroudColor=this.color;//把div加到数组elements中elements.push(div);};//把Food暴露给window,全局变量访问局部变量window.Food=Food;}());

#自调用函数
#var elements=[]、elements.push()
#window.Food=Food

b.食物的随机产生和删除：

     //先删除这个小食物，外部无法访问的函数Food.prototype.init=function(map){remove();//先脱离文档流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";};//私有的函数---删除食物的function remove() {//elements数组中有这个食物for (var i = 0; i < elements.length; i++) {var ele = elements[i];//找到这个子元素的父级元素,然后删除这个子元素ele.parentNode.removeChild(ele);//再次把elements中的这个子元素也要删除elements.splice(i, 1);}}

#remove()
#利用父子关系获取元素
#原型

03.小蛇：
a.小蛇的构造函数，创建小蛇：

//小蛇的构造函数
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";
}

#小蛇构造函数

b.小蛇初始化：

  Snake.prototype.init = function (map) {//先删除之前的小蛇remove();//循环遍历创建divfor (var i = 0; i < this.body.length; i++) {//数组中的每个数组元素都是一个对象var obj = this.body[i];//创建divvar div = document.createElement("div");//把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);}};

c.小蛇运动：

    //为原型添加方法---小蛇动起来Snake.prototype.move = function (food, map) {//改变小蛇的身体的坐标位置var i = this.body.length - 1;//2for (; 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;}

#switch…case

d.小蛇是否吃到食物：

        //小蛇的头的坐标和食物的坐标一致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];//把最后的蛇尾复制一个,重新的加入到小蛇的body中this.body.push({x:last.x,y:last.y,color:last.color});

e.外部访问小蛇：

    //删除小蛇的私有的函数function remove() {//删除map中的小蛇的每个div,同时删除elements数组中的每个元素,从蛇尾向蛇头方向删除divvar i = elements.length - 1;for (; i >= 0; i--) {//先从当前的子元素中找到该子元素的父级元素,然后再干掉这个子元素var ele = elements[i];//从map地图上删除这个子元素divele.parentNode.removeChild(ele);elements.splice(i, 1);}}

04游戏规则：
a.设置用户按键：

    Game.prototype.bindKey=function () {//获取用户的按键,改变小蛇的方向document.addEventListener("keydown",function (e) {//这里的this应该是触发keydown的事件的对象---document,//所以,这里的this就是document//获取按键的值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);};

#keyCode

b.判断游戏是否结束：

    Game.prototype.runSnake = function (food, map) {//自动的去移动var timeId = setInterval(function () {//此时的this是window//移动小蛇this.snake.move(food, map);//初始化小蛇this.snake.init(map);//横坐标的最大值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), 300);};

#定时器：setInterval(function () {},时间)

附上完整代码：
food.js:

//自调用函数----食物的
(function () {var elements = [];//用来保存每个小方块食物的//食物就是一个对象,有宽,有高,有颜色,有横纵坐标,先定义构造函数,然后创建对象function Food(x, y, width, height, color) {//横纵坐标this.x = x || 0;this.y = y || 0;//宽和高this.width = width || 20;this.height = height || 20;//背景颜色this.color = color || "green";}//为原型添加初始化的方法(作用：在页面上显示这个食物)//因为食物要在地图上显示,所以,需要地图的这个参数(map---就是页面上的.class=map的这个div)Food.prototype.init = function (map) {//先删除这个小食物//外部无法访问的函数remove();//创建divvar div = document.createElement("div");//把div加到map中map.appendChild(div);//设置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);//再次把elements中的这个子元素也要删除elements.splice(i, 1);}}//把Food暴露给Window,外部可以使用window.Food = Food;
}());

Snake.js:

//自调用函数---小蛇
(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();//循环遍历创建divfor (var i = 0; i < this.body.length; i++) {//数组中的每个数组元素都是一个对象var obj = this.body[i];//创建divvar div = document.createElement("div");//把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);}};//为原型添加方法---小蛇动起来Snake.prototype.move = function (food, map) {//改变小蛇的身体的坐标位置var i = this.body.length - 1;//2for (; 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];//把最后的蛇尾复制一个,重新的加入到小蛇的body中this.body.push({x:last.x,y:last.y,color:last.color});//把食物删除,重新初始化食food.init(map);}};//删除小蛇的私有的函数function remove() {//删除map中的小蛇的每个div,同时删除elements数组中的每个元素,从蛇尾向蛇头方向删除divvar i = elements.length - 1;for (; i >= 0; i--) {//先从当前的子元素中找到该子元素的父级元素,然后再弄死这个子元素var ele = elements[i];//从map地图上删除这个子元素divele.parentNode.removeChild(ele);elements.splice(i, 1);}}//把Snake暴露给window,外部可以访问window.Snake = Snake;
}());

Game.js:

//自调用函数---游戏对象
(function () {var that = null;//该变量的目的就是为了保存游戏Game的实例对象//游戏的构造函数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) {//自动的去移动var timeId = setInterval(function () {//此时的this是window//移动小蛇this.snake.move(food, map);//初始化小蛇this.snake.init(map);//横坐标的最大值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), 300);};//添加原型方法---设置用户按键,改变小蛇移动的方向Game.prototype.bindKey=function () {//获取用户的按键,改变小蛇的方向document.addEventListener("keydown",function (e) {//这里的this应该是触发keydown的事件的对象---document,//所以,这里的this就是document//获取按键的值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);};//把Game暴露给window,外部就可以访问Game对象了window.Game = Game;
}());

贪吃蛇小游戏.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><style>.map {width: 800px;height: 600px;background-color: #000;position: relative;}</style>
</head>
<body>
<!--画出地图,设置样式-->
<div class="map"></div>
<script src="food.js"></script>
<script src="Snake.js"></script>
<script src="Game.js"></script>
<script>//初始化游戏对象var gm = new Game(document.querySelector(".map"));//初始化游戏---开始游戏gm.init();
</script>
</body>
</html>

问题：在写代码的时候要细心细心细心！！！我在写的过程就因为一个小小的花括号捣鼓好久。

若文章有什么问题，欢迎指正，谢谢~

用js实现贪吃蛇网页游戏相关推荐

用JS实现贪吃蛇小游戏
疫情期间呆在家里无聊,于是深入学习了一下JS.自己也模仿写一个贪吃蛇的小游戏,本人刚接触JS不久如有错误,望评论区指出. 因为一般贪吃蛇游戏中的CSS样式较为简单,所以这里主要讲一下JS的写法. 食物 ...
HTML+js实现贪吃蛇小游戏（内含完整代码）
案例分析看图拆解游戏首先我们根据图片上的内容把这个游戏拆解成几个部分去单独看: 最外面的大盒子包裹着内容加边框限制蛇的活动范围,整个范围可以看成由许多小方格排列构成的,例如这样子的:: 两个按钮, ...
使用前端原生 js，贪吃蛇小游戏
好久好久,真的是好久好久没来写过了,因为最近有点小忙.不过即使是忙,也也还是写了两个小游戏,其中一个就是这个,贪吃蛇啦. 算是一个小练手了,这个是在有点太简单了,只是第一次写这种小游戏,还是零零星星花 ...
js实现贪吃蛇小游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
eclipse javascript_原生js实现贪吃蛇游戏_javascript技巧
更新时间:2020年10月26日 11:46:36 作者:leisure-ZL 这篇文章主要为大家详细介绍了原生js实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴 ...
好玩的小游戏系列（一）基于html+js 原生贪吃蛇
一朵花如果只被用来观赏那只呈现出它的外在意义只是它生命的一部分若是不能够将其内在更实质的美发挥出来充其量也不过就是一朵死的花而已. 目录一.前言二.代码介绍三.效果显示四.编码实现 index ...
原生JS实现贪吃蛇游戏
原生JS实现贪吃蛇游戏贪吃蛇游戏(原生JavaScript) 贪吃蛇游戏思路分析游戏思想: 面向对象的思想三个js文件分别代表三个对象三个对象相互独立,在HTML中控制全局使用面向对象思想的 ...
JS贪吃蛇小游戏(DOM (html+css+js))
游戏截图: html部分: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
贪食蛇php,贪吃蛇网页小游戏的代码
贪吃蛇网页小游戏的代码 ::selection { color:#FFFFFF; background:transparent; } ::-moz-selection { color:#FFFFFF; ...
Snake贪吃蛇小游戏纯js代码
Snake贪吃蛇小游戏纯js代码先给个效果图,一样的简单而又纯朴,回归贪吃蛇最原始的状态还是先分析一下,使用面向对象编程真的降低了编程的难度(只要前期把思路想好,各个类,属性,方法抽象出来),就真 ...

用js实现贪吃蛇网页游戏

用js实现贪吃蛇网页游戏相关推荐

最新文章

热门文章