js贪吃蛇游戏 JavaScript实现贪吃蛇游戏
乱舞春秋__ 人气:0想了解JavaScript实现贪吃蛇游戏的相关内容吗,乱舞春秋__在本文为您仔细讲解js贪吃蛇游戏的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js,贪吃蛇,下面大家一起来学习吧。
通过JavaScript,我们可以实现贪吃蛇游戏,具体功能如下:
(1)通过按上下左右键来改变蛇的移动方向
(2)若蛇撞到自己,则游戏结束
(3)蛇移动出地图边缘时,会从地图的另一边进来
(4)长按方向键,蛇加速移动
(5)蛇吃到食物后,重新生成食物
完整代码如下:
<!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> </head> <body> <script> //地图对象 var Map; Map = { width: 990, height: 600, backgroundColor: 'rgba(36, 30, 225, 0.25)', map: null, createMap: function () { if (this.map == null) { this.map = document.createElement("div"); } }, adornMap: function () { this.map.style.position = "relative"; this.map.style.width = this.width + "px"; this.map.style.height = this.height + "px"; this.map.style.backgroundColor = this.backgroundColor; }, initialize: function () { this.createMap(); this.adornMap(); document.body.appendChild(this.map); } }; //蛇对象 var Snake; Snake = { snakeWidth: 30, snakeHeight: 30, snake: [[3, 1, null, 'red'], [2, 1, null, 'black'], [1, 1, null, 'black']], maP: null, direct: "right", timer: null, createSnake: function () { for (var i = 0; i < this.snake.length; i++) { if (this.snake[i][2] == null) { this.snake[i][2] = document.createElement("div"); } this.snake[i][2].style.width = this.snakeWidth + "px"; this.snake[i][2].style.height = this.snakeHeight + "px"; this.snake[i][2].style.backgroundColor = this.snake[i][3]; this.snake[i][2].style.position = "absolute"; this.snake[i][2].style.left = this.snake[i][0] * this.snakeWidth + "px"; this.snake[i][2].style.top = this.snake[i][1] * this.snakeHeight + "px"; this.maP.appendChild(this.snake[i][2]); } }, move: function () { //蛇身移动 for (var i = this.snake.length - 1; i > 0; i--) { this.snake[i][0] = this.snake[i - 1][0]; this.snake[i][1] = this.snake[i - 1][1]; } //蛇头移动 switch (this.direct) { case "left": this.snake[0][0] -= 1; break; case "right": this.snake[0][0] += 1; break; case "up": this.snake[0][1] -= 1; break; case "down": this.snake[0][1] += 1; break; } //防止蛇移动至地图外 if (this.snake[0][0] > 32) { this.snake[0][0] = 0; } if (this.snake[0][0] < 0) { this.snake[0][0] = 32; } if (this.snake[0][1] < 0) { this.snake[0][1] = 19; } if (this.snake[0][1] > 19) { this.snake[0][1] = 0; } //若蛇撞到自己,则游戏结束 for (var i = 1; i < this.snake.length; i++) { if (this.snake[0][0] == this.snake[i][0] && this.snake[0][1] == this.snake[i][1]) { clearInterval(this.timer); alert("游戏结束!"); return; } } //蛇吃到食物时,重新生成食物位置,蛇身变长一节 if (this.snake[0][0] == Food.left && this.snake[0][1] == Food.top) { Food.createFood(); this.snake.push( [ this.snake[this.snake.length - 1][0], this.snake[this.snake.length - 1][1], null, "black" ] ) } this.createSnake(); }, initialize: function () { var that = this; that.createSnake(); that.timer = setInterval(function () { that.move(); }, 500) } }; //食物对象 var Food; Food = { foodWidth: 30, foodHeight: 30, backgroundColor: "orange", left: null, top: null, maP: null, snakE: null, food: null, //创建食物 createFood: function () { this.randomPosition(); if (this.food == null) { this.food = document.createElement('div'); this.food.style.width = this.foodWidth + "px"; this.food.style.height = this.foodHeight + "px"; this.food.style.backgroundColor = this.backgroundColor; this.food.style.position = "absolute"; this.maP.appendChild(this.food); } this.food.style.left = this.left * this.foodWidth + "px"; this.food.style.top = this.top * this.foodHeight + "px"; }, //随机生成食物位置 randomPosition: function () { var repeat; do { repeat = false; this.left = Math.floor(Math.random() * 33); this.top = Math.floor(Math.random() * 20); for (var i = 0; i < this.snakE.length; i++) { if (this.left == this.snakE[i][0] && this.top == this.snakE[i][1]) { repeat = true; } } } while (repeat) } }; window.addEventListener('load', function () { Map.initialize(); Snake.maP = Map.map; Snake.initialize(); Food.maP = Map.map; Food.snakE = Snake.snake; Food.createFood(); //按上下左右键,蛇改变移动方向 window.addEventListener('keyup', function (e) { var direct = e.keyCode; switch (direct) { case 37: if (Snake.direct == "right") { return; } Snake.direct = "left"; break; case 38: if (Snake.direct == "down") { return; } Snake.direct = "up"; break; case 39: if (Snake.direct == "left") { return; } Snake.direct = "right"; break; case 40: if (Snake.direct == "up") { return; } Snake.direct = "down"; break; } }) //长按方向键加速移动 var lastKey = -1; window.addEventListener('keydown', function (e) { if (e.keyCode == lastKey) { switch (e.keyCode) { case 37: if (Snake.direct == "right") { return; } Snake.direct = "left"; break; case 38: if (Snake.direct == "down") { return; } Snake.direct = "up"; break; case 39: if (Snake.direct == "left") { return; } Snake.direct = "right"; break; case 40: if (Snake.direct == "up") { return; } Snake.direct = "down"; break; } Snake.move(); } lastKey = e.keyCode; }) }) </script> </body> </html>
效果图:
加载全部内容