先不多说先上图
下面是代码部分（这里你可以根据需要改变蛇头和身体还有食物的图片，然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈，请不要在意哈），还有操作键是使用 ↑ ↓ ← → ）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>贪食蛇</title> <style> .map { width: 800px; height: 600px; background-color: #ccc; position: relative; left: 50%; transform: translate(-50%); } #dv { color: whitesmoke; font-weight: 700; text-align: center; line-height: 50px; width: 150px; height: 50px; position: absolute; background-color: orange; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%); cursor: pointer; } </style> </head> <body> <div> <div>开始游戏</div> </div> <script> //食物:是一个对象,有宽,有高,有颜色,有横纵坐标 //自调用函数 (function () { var element = []; //用来保存每个小方块食物的 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(); //创建div var 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加入element数组中 element.push(div); //改变食物的样式---改成自己喜欢的东西 div.style.backgroundImage = "url(" + "../images/shi.png" + ")"; div.style.backgroundRepeat = "no-repaet"; div.style.backgroundSize = "cover"; }; //私有函数 function remove() { for (var i = 0; i < element.length; i++) { var ele = element[i]; //找到这个子元素的父级元素,然后删除这个子元素 ele.parentNode.removeChild(ele); //再次把element中的这个子元素删除 element.splice(i, 1); } } //把Food暴露给window,外部可以使用 window.Food = Food; }()); //自调用函数---小蛇 (function () { //存放小蛇的每个身体部分 var element = []; //小蛇的构造函数 function Snake(width, height, driection) { 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.driection = driection || "right"; } //为原型添加方法---小蛇初始化的方法 Snake.prototype.init = function (map) { //先删除之前的小蛇 remove(); //循环遍历创建div for (var i = 0; i < this.body.length; i++) { //数组中的每个数组元素都是一个对象 var obj = this.body[i]; //创建div var 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加入到element数组中---目的是为了删除 //把div加入数组中 element.push(div); //更改头部的----变成图片 if (i == 0) { div.style.backgroundImage = "url(" + "../images/tou_03.png" + ")"; div.style.backgroundRepeat = "no-repaet"; div.style.backgroundSize = "cover"; } //更改尾巴的样式照片 if (i != 0) { div.style.backgroundImage = "url(" + "../images/shi.png" + ")"; div.style.backgroundRepeat = "no-repaet"; div.style.backgroundSize = "cover"; } } }; //为原型添加方法---小蛇动起来 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.driection) { case "left": this.body[0].x -= 1; break; case "right": 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() { //获取数组 var i = element.length - 1; for (; i >= 0; i--) { var ele = element[i]; //从map地图上删除这个子元素div ele.parentNode.removeChild(ele); element.splice(i, 1); } } window.Snake = Snake; }()); //自调用函数---游戏对象 (function () { var that = null; //游戏的构造函数 function game(map) { this.food = new Food(); //食物对象 this.snake = new Snake(); //小蛇对象 this.map = map; //地图 that = this; } game.prototype.init = function () { //初始化游戏 //食物初始化 this.food.init(this.map); //小蛇初始化 this.snake.init(this.map); that = this; document.getElementById("dv").onclick = function () { document.getElementById("dv").style.display = "none"; //调用小蛇移动的方法 that.runSnake(that.food, that.map); //调用按键的方法 that.bindKey(); }.bind(that); }; //添加原型方法---设置小蛇可以自动跑起来 game.prototype.runSnake = function (food, map) { //自动的去移动 var time = 90; var fn = 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("游戏结束"); location.reload(); } //判断 纵坐标 有没撞墙 if (headY < 0 || headY >= maxY) { clearInterval(timeId); alert("游戏结束"); location.reload(); } //判断 小蛇的头部 有没有 撞到自己 for (let i = 1; i < this.snake.body.length; i++) { let x = this.snake.body[i].x; let y = this.snake.body[i].y; if (headX === x && headY === y) { clearInterval(timeId); alert("游戏结束"); location.reload(); } } //增加游戏难度,判断 到达一定数量的时候 加速 switch (true) { case 5 <= this.snake.body.length && this.snake.body.length <= 10: clearInterval(timeId); time = 60; timeId = setInterval(fn, time); break; case 10 <= this.snake.body.length && this.snake.body.length <= 15: clearInterval(timeId); time = 40; timeId = setInterval(fn, time); break; case 15 <= this.snake.body.length: clearInterval(timeId); time = 30; timeId = setInterval(fn, time); break; } console.log(this.snake.body.length + "--" + "time:" + time); }.bind(that); //定时器小蛇自运动 var timeId = setInterval(fn, time); }; //添加原型方法---设置用户按键,改变小蛇移动的方向 game.prototype.bindKey = function () { //获取用户的按键,改变小蛇的移动方向 document.addEventListener("keydown", function (e) { //获取按键的值并进行判断是,改变小蛇移动的方向 switch (e.keyCode) { //没有bind方法时此时的this指向的是documen case 37: if (this.snake.driection != "right") { this.snake.driection = "left"; } break; case 38: if (this.snake.driection != "bottom") { this.snake.driection = "top"; } break; case 39: if (this.snake.driection != "left") { this.snake.driection = "right"; } break; case 40: if (this.snake.driection != "top") { this.snake.driection = "bottom"; } break; } }.bind(that), false); }; //把game暴露给window,外部就可以访问game对象 window.game = game; }()); //初始化游戏对象 var gm = new game(document.querySelector(".map")); //初始化游戏---开始游戏 gm.init(); </script> </body> </html>
我已经尽量给以上代码注上注释。希望能帮到更多朋友更好的理解贪食蛇游戏的实现思路！
小编还为大家准备了精彩的专题：javascript经典小游戏汇总