JavaScript實(shí)現(xiàn)貪吃蛇游戲
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)貪吃蛇游戲的具體代碼，供大家參考，具體內(nèi)容如下
通過(guò)JavaScript，我們可以實(shí)現(xiàn)貪吃蛇游戲，具體功能如下：
（1）通過(guò)按上下左右鍵來(lái)改變蛇的移動(dòng)方向
（2）若蛇撞到自己，則游戲結(jié)束
（3）蛇移動(dòng)出地圖邊緣時(shí)，會(huì)從地圖的另一邊進(jìn)來(lái)
（4）長(zhǎng)按方向鍵，蛇加速移動(dòng)
（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>//地圖對(duì)象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); }};//蛇對(duì)象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 () {//蛇身移動(dòng)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];}//蛇頭移動(dòng)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;}//防止蛇移動(dòng)至地圖外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;}//若蛇撞到自己，則游戲結(jié)束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('游戲結(jié)束！');return; }}//蛇吃到食物時(shí)，重新生成食物位置，蛇身變長(zhǎng)一節(jié)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) }};//食物對(duì)象var Food;Food = { foodWidth: 30, foodHeight: 30, backgroundColor: 'orange', left: null, top: null, maP: null, snakE: null, food: null, //創(chuàng)建食物 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'; }, //隨機(jī)生成食物位置 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(); //按上下左右鍵，蛇改變移動(dòng)方向 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;} }) //長(zhǎng)按方向鍵加速移動(dòng) 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>
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Python 實(shí)現(xiàn)勞拉游戲的實(shí)例代碼（四連環(huán)、重力四子棋）2. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法3. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)4. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）5. PHP利用COM對(duì)象訪問(wèn)SQLServer、Access6. 利用CSS制作3D動(dòng)畫(huà)7. 一款功能強(qiáng)大的markdown編輯器tui.editor使用示例詳解8. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼9. JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表10. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程
網(wǎng)公網(wǎng)安備