JavaScript實現貪吃蛇游戲
本文實例為大家分享了JavaScript實現貪吃蛇游戲的具體代碼，供大家參考，具體內容如下
通過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>
效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備