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>
效果圖:
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。