JavaScript做贪吃蛇_IC-ic.ic

网络 02-07 3953

文章目录前言一、效果动画展示二、html主页面二、三个js包1.Game.js2.Snake.js （蛇的设置）3.Food.js (食物的设置)

前言

这个关卡是用JavaScript做的一个贪吃蛇游戏

一、效果动画展示

二、html主页面

代码展示：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background: #333; color: #fff; } .content { position: relative; margin: 100px 500px; } table { border-collapse: collapse; border: 1px solid #aaa; background: transparent; } td { width: 24px; height: 24px; color: red; text-align: center; border: 1px solid #fff; border-radius: 50%; background: transparent; } .btn { position: absolute; left: 0; top: 0; border: none; outline: none; z-index: 2; /* background-color: rgba(0, 0, 0, 0.3); */ } .starBtn { left: 180px; } .endBtn { left: 170px; display: none; top: 290px; width: 200px; height: 50px; background-color: rgb(0, 0, 0, .3); text-align: center; line-height: 50px; font-size: 20px; } </style> </head> <body> <div class="content"> <div class="btn starBtn"><button>开始游戏</button></div> <div class="btn endBtn"> <div>继续</div> </div>  <h3 id="score">分数：0</h3> <div id="app"></div> </div> <script src="js/Game.js"></script> <script src="js/Snake.js"></script> <script src="js/Food.js"></script> <script> game = new game() </script> </body> </html>

效果页面展示

二、三个js包 1.Game.js function Game() { // 行数 this.row = 20; //列数 this.col = 20; // 初始化分数 this.score = 0; // 初始化节点 this.init(); // 实例化蛇类 this.snake = new Snake(); // 初始化食物 this.food = new Food(this); // 执行定时器任务 this.start(); // 键盘的事件监听 this.bindEvent(); } Game.prototype.init = function() { this.dom = document.createElement("table"); var tr, td; // 遍历行和列上树 for (var i = 0; i < this.row; i++) { // 遍历行，创建节点上树 tr = document.createElement("tr"); for (var j = 0; j < this.col; j++) { // 遍历列，创建节点上树 td = document.createElement("td"); // console.log(tr); tr.appendChild(td) } this.dom.appendChild(tr); } // 表格上树 document.getElementById("app").appendChild(this.dom) }; Game.prototype.clear = function() { // 遍历表格，擦除画布 for (var i = 0; i < this.row; i++) { for (var j = 0; j < this.col; j++) { this.dom.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].style.background = 'transparent' this.dom.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = '' } } }; // 设置颜色的方法 Game.prototype.setColor = function(row, col, color) { // 让表格的第几行第几列设置什么颜色 this.dom.getElementsByTagName("tr")[row].getElementsByTagName("td")[col].style.background = color; }; // 渲染食物 Game.prototype.setHTML = function(row, col, html) { this.dom.getElementsByTagName("tr")[row].getElementsByTagName("td")[col].innerHTML = html }; // 设置键盘的事件监听 Game.prototype.bindEvent = function() { var self = this; // 键盘事件 document.onkeydown = function(event) { switch (event.keyCode) { case 37: // 按下左键 // 先进行判断，如果当前的方向是往有移动，此时不能按左键 if (self.snake.direction == 'R') return; self.snake.changeDirection("L") break; case 38: // 上 // 先进行判断如果当前的方向是向下移动此时我们不能按上键 if (self.snake.direction == 'D') return; self.snake.changeDirection("U"); break; case 39: // 右 if (self.snake.direction == 'L') return; self.snake.changeDirection("R"); break; case 40: // 下 if (self.snake.direction == 'U') return; self.snake.changeDirection("D"); break; } } }; var endBtn = document.querySelector('.endBtn'); var btnstart = document.querySelector('.starBtn'); Game.prototype.start = function() { // 帧编号 this.f = 0; this.timer = setInterval(function() { // 定时器里面的核心就是游戏的渲染本质，清屏 - 更新 - 渲染 game.f++; // document.getElementById("f").innerHTML = "帧编号：" + game.f; // 渲染分数 document.getElementById("score").innerHTML = "分数：" + game.score; // 清除屏幕 game.clear(); // 蛇的更新速度当蛇变长的时候，速度加快 var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1; // 蛇的更新 game.f % during == 0 && game.snake.update(); // 渲染蛇 game.snake.render(); // 渲染食物 game.food.render(); }, 20) } 2.Snake.js （蛇的设置） function Snake() { // 蛇的初始化身体 this.body = [ { "row": 3, "col": 5 }, { "row": 3, "col": 4 }, { "row": 3, "col": 3 }, { "row": 3, "col": 2 }, ]; // this.render() // 信号量，设置的运动方向 this.direction = "R"; // 即将改变的方向，目的就是为了防止出现原地掉头的情况 this.willDirection = "R"; } // 蛇的运动 Snake.prototype.update = function() { // 让当前的方向direction接收一下willDirection this.direction = this.willDirection; switch (this.direction) { case "R": // 像右移动 this.body.unshift({ "row": this.body[0].row, "col": this.body[0].col + 1 }); break; case "D": //向下移动 this.body.unshift({ "row": this.body[0].row + 1, "col": this.body[0].col }); break; case "L": // 向左移动 this.body.unshift({ "row": this.body[0].row, "col": this.body[0].col - 1 }); break; case "U": // 向上移动 this.body.unshift({ "row": this.body[0].row - 1, "col": this.body[0].col }); break; }; // 死亡的判断,超出了表格边缘的部分 if (this.body[0].col > game.col - 1 || this.body[0].row > game.row - 1 || this.body[0].col < 0 || this.body[0].row < 0) { this.body.shift() // 删除是因为当前的头增是不合法的 alert("游戏结束你当前的得分为" + game.score + "分"); clearInterval(game.timer) window.location.reload(); } // 自己撞到了自己的时候也会判定死亡 for (var i = 1; i < this.body.length; i++) { // 如果能够判断死亡，也就是当前的蛇的头部和身体的某一个部分row和col完全重合的时候 if (this.body[0].col == this.body[i].col && this.body[0].row == this.body[i].row) { alert("游戏结束你当前的得分为" + game.score + "分"); this.body.shift() clearInterval(game.timer); window.location.reload(); } } // 蛇吃食物 // 如果当前的蛇的头部没有和食物进行重合就代表，此时没有吃到食物，此时就进行尾部删除，如果重合了就代表吃到了，就不进行尾部删除 if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) { // 此时只是头部增加了，没有尾部删除 // 创建新的食物 game.food = new Food(game); // 加分数 game.score++; // 让当前的帧编号归0 game.f = 0; } else { this.body.pop() } }; // 蛇的方向改变，防止的是在一次渲染之前会出现掉头的情况 Snake.prototype.changeDirection = function(d) { this.willDirection = d; } Snake.prototype.render = function() { // 蛇头的渲染 game.setColor(this.body[0].row, this.body[0].col, '-webkit-radial-gradient(center center, pink, red)') // 蛇的身体渲染 for (var i = 1; i < this.body.length; i++) { game.setColor(this.body[i].row, this.body[i].col, '-webkit-radial-gradient(center center, orange, red)') } } 3.Food.js (食物的设置) function Food(gameSnake) { var self = this; // 食物的坐标 // 下面的do while循环语句作用是先创建一个row和col然后判断这个row和col是否在蛇的身上 do { this.row = parseInt(Math.random() * gameSnake.row); this.col = parseInt(Math.random() * gameSnake.col); } while ((function() { // 遍历蛇的row和col然后和Food新随机出来的row和col来进行判断，是否重合 for (var i = 0; i < gameSnake.snake.body.length; i++) { if (gameSnake.snake.body[i].row == self.row && gameSnake.snake.body[i].col == self.col) { return true; } } return false })()); } Food.prototype.render = function() { game.setHTML(this.row, this.col, "🍓"); }