javascript：用原生js模拟贪吃蛇游戏练习

Posted xhysns

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript：用原生js模拟贪吃蛇游戏练习相关的知识，希望对你有一定的参考价值。

本次练习所有的代码：可以直接复制全部然后运行看效果~

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <title>title</title>
  6   <style>
  7     .map {
  8       width: 800px;
  9       height: 600px;
 10       background-color: #CCC;
 11       position: relative;
 12     }
 13   </style>
 14 </head>
 15 <body>
 16 <!--画出地图,设置样式-->
 17 <div class="map"></div>
 18 <script>
 19 
 20 
 21   //自调用函数----食物的
 22   (function () {
 23     var elements = [];//用来保存每个小方块食物的
 24     //食物就是一个对象,有宽,有高,有颜色,有横纵坐标,先定义构造函数,然后创建对象
 25     function Food(x, y, width, height, color) {
 26       //横纵坐标
 27       this.x = x || 0;
 28       this.y = y || 0;
 29       //宽和高
 30       this.width = width || 20;
 31       this.height = height || 20;
 32       //背景颜色
 33       this.color = color || "green";
 34     }
 35 
 36     //为原型添加初始化的方法(作用：在页面上显示这个食物)
 37     //因为食物要在地图上显示,所以,需要地图的这个参数(map---就是页面上的.class=map的这个div)
 38     Food.prototype.init = function (map) {
 39       //先删除这个小食物
 40       //外部无法访问的函数
 41       remove();
 42 
 43       //创建div
 44       var div = document.createElement("div");
 45       //把div加到map中
 46       map.appendChild(div);
 47       //设置div的样式
 48       div.style.width = this.width + "px";
 49       div.style.height = this.height + "px";
 50       div.style.backgroundColor = this.color;
 51       //先脱离文档流
 52       div.style.position = "absolute";
 53       //随机横纵坐标
 54       this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;
 55       this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;
 56       div.style.left = this.x + "px";
 57       div.style.top = this.y + "px";
 58 
 59       //把div加入到数组elements中
 60       elements.push(div);
 61     };
 62 
 63     //私有的函数---删除食物的
 64     function remove() {
 65       //elements数组中有这个食物
 66       for (var i = 0; i < elements.length; i++) {
 67         var ele = elements[i];
 68         //找到这个子元素的父级元素,然后删除这个子元素
 69         ele.parentNode.removeChild(ele);
 70         //再次把elements中的这个子元素也要删除
 71         elements.splice(i, 1);
 72       }
 73     }
 74 
 75     //把Food暴露给Window,外部可以使用
 76     window.Food = Food;
 77   }());
 78 
 79   //自调用函数---小蛇
 80   (function () {
 81     var elements = [];//存放小蛇的每个身体部分
 82     //小蛇的构造函数
 83     function Snake(width, height, direction) {
 84       //小蛇的每个部分的宽
 85       this.width = width || 20;
 86       this.height = height || 20;
 87       //小蛇的身体
 88       this.body = [
 89         {x: 3, y: 2, color: "red"},//头
 90         {x: 2, y: 2, color: "orange"},//身体
 91         {x: 1, y: 2, color: "orange"}//身体
 92       ];
 93       //方向
 94       this.direction = direction || "right";
 95     }
 96 
 97     //为原型添加方法--小蛇初始化的方法
 98     Snake.prototype.init = function (map) {
 99       //先删除之前的小蛇
100       remove();//===========================================
101 
102       //循环遍历创建div
103       for (var i = 0; i < this.body.length; i++) {
104         //数组中的每个数组元素都是一个对象
105         var obj = this.body[i];
106         //创建div
107         var div = document.createElement("div");
108         //把div加入到map地图中
109         map.appendChild(div);
110         //设置div的样式
111         div.style.position = "absolute";
112         div.style.width = this.width + "px";
113         div.style.height = this.height + "px";
114         //横纵坐标
115         div.style.left = obj.x * this.width + "px";
116         div.style.top = obj.y * this.height + "px";
117         //背景颜色
118         div.style.backgroundColor = obj.color;
119         //方向暂时不定
120         //把div加入到elements数组中----目的是为了删除
121         elements.push(div);
122       }
123     };
124 
125     //为原型添加方法---小蛇动起来
126     Snake.prototype.move = function (food, map) {
127       //改变小蛇的身体的坐标位置
128       var i = this.body.length - 1;//2
129       for (; i > 0; i--) {
130         this.body[i].x = this.body[i - 1].x;
131         this.body[i].y = this.body[i - 1].y;
132       }
133       //判断方向---改变小蛇的头的坐标位置
134       switch (this.direction) {
135         case "right":
136           this.body[0].x += 1;
137           break;
138         case "left":
139           this.body[0].x -= 1;
140           break;
141         case "top":
142           this.body[0].y -= 1;
143           break;
144         case "bottom":
145           this.body[0].y += 1;
146           break;
147       }
148 
149       //判断有没有吃到食物
150       //小蛇的头的坐标和食物的坐标一致
151       var headX=this.body[0].x*this.width;
152       var headY=this.body[0].y*this.height;
153       //判断小蛇的头的坐标和食物的坐标是否相同
154       if(headX==food.x&&headY==food.y){
155         //获取小蛇的最后-的尾巴
156         var last=this.body[this.body.length-1];
157         //以上是关于javascript：用原生js模拟贪吃蛇游戏练习的主要内容，如果未能解决你的问题，请参考以下文章
 

 用原生JavaScript写一个贪吃蛇


 使用前端原生 js，贪吃蛇小游戏


 用JS实现的贪吃蛇游戏


 HTML5+CSS+JS 贪吃蛇demo


 HTML5+CSS+JS 贪吃蛇demo


 Python制作当年第一款手机游戏-贪吃蛇游戏（练习）