本文實例為大家分享了js實現貪吃蛇游戲的具體代碼，供大家參考，具體內容如下
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"><title>貪吃蛇游戲</title><style type="text/css">* { margin: 0; padding: 0;}.wrap { width: 600px; margin: 0 auto; position: relative;}p { position: absolute; left: 65%; top: 10%;}h1 { text-align: center; margin-bottom: 20px;}#score { text-align: center; font-size: 20px;}#snake_map { margin: 0 auto; border: 1px solid skyblue;}/*行樣式*/.row { height: 20px;}/*列樣式*/.col { height: 20px; width: 20px; box-sizing: border-box; border: 1px solid lightgray; background: rgb(250, 250, 250); float: left;}.activeSnake { background: black;}.egg { background: red;}#Pause { margin-left: 18%; border: 1px solid skyblue; color: white; background: skyblue; width: 50px; height: 30px; margin-bottom: 10px; border-radius: 5px;}#Start,#Refresh,#Speed { border: 1px solid skyblue; background: skyblue; color: white; width: 50px; height: 30px; border-radius: 5px; margin-left: 15px;}</style></head> <body> <div class="wrap"> <h1>貪吃蛇游戲</h1> <!-- 記錄吃了多少個蛋 --> <p style="font-size:20px;color:red"> score:<span id="score" style="color:black">0</span> </p> <!-- 暫停按鈕 --> <input id="Pause" type="button" name="name" value="Pause"> <!-- 開始按鈕 --> <input id="Start" type="button" name="name" value="Start"> <!-- 刷新(重新開始游戲) --> <input id="Refresh" type="button" name="name" value="Refresh"> <!-- 加速按鈕 --> <input id="Speed" type="button" name="name" value="Speed"> <!-- 貪吃蛇的行走路徑地圖 --> <div id="snake_map"> </div> </div> </body><script type="text/javascript">//獲取分數標簽var score = document.getElementById('score');// 獲取路徑地圖標簽var map = document.getElementById('snake_map');// 為了靈活的設置地圖的大小,以下設置兩個變量// 用于存儲行數和列數(即方格的個數)var rowNumber = 25;// 行數var columnNumber = 20;// 列數;var mapWidth = columnNumber * 20 + 'px';// 地圖的寬var mapHeight = rowNumber * 20 + 'px';// 地圖的高map.style.width = mapWidth;map.style.height = mapHeight;// 設置地圖寬高// 創建一個二維數組,用來記錄地圖上的所有div的位置var snakeDIVPosition = [];// 通過雙層for循環來創建地圖元素for ( var i = 0; i < rowNumber; i++) { // 創建行div var rowDIV = document.createElement('div'); // 設置div樣式 rowDIV.className = 'row'; // 將行div添加到路徑地圖map中 map.appendChild(rowDIV); // 創建一個行級數組,用來存儲當前行中的每個方塊div var rowArray = []; for ( var j = 0; j < columnNumber; j++) { // 創建每一行中的方塊div var columnDIV = document.createElement('div'); // 設置css樣式 columnDIV.className = 'col'; // 將方塊DIV添加到當前行中 rowDIV.appendChild(columnDIV); // 同時將方塊添加到行數組中 rowArray.push(columnDIV); } // 當前內層循環結束,將行數組添加到二維數組中 snakeDIVPosition.push(rowArray);}// 創建蛇模型// 創建一個一維數組,用來存儲蛇身所占的divvar snake = [];// 固定蛇身起始長度為3個divfor ( var i = 0; i < 3; i++) { // 為蛇身設置不同顏色的div snakeDIVPosition[0][i].className = 'col activeSnake'; // 存儲在蛇身數組中 snake[i] = snakeDIVPosition[0][i];}// 定義變量來控制蛇var x = 2;var y = 0;// 蛇頭的起始位置偏移量var scoreCount = 0;// 分數計數器,即吃了多少個蛋var eggX = 0;// 記錄蛋所在的行位置var eggY = 0;// 記錄蛋所在的列位置;var direction = 'right';// 記錄蛇移動的方向,初始為向右var changeDir = true;// 判斷是否需要改變蛇的移動方向var delayTimer = null;// 延遲定時器// 添加鍵盤事件監聽方向鍵來改變蛇的移動方向document.onkeydown = function(event) { // 先判斷是否需要改變方向,true表示需要,false表示不需要 if (!changeDir) { return;// return空表示直接結束函數,后續代碼不執行 } event = event || window.event; // 為了合理處理蛇的移動,需要判斷蛇頭和蛇身 // 假設蛇向右移動,點方向鍵左,右鍵都不需要做出響應 if (direction == 'right' && event.keyCode == 37) { return;// 終止事件執行 } if (direction == 'left' && event.keyCode == 39) { return; } if (direction == 'up' && event.keyCode == 40) { return; } if (direction == 'down' && event.keyCode == 38) { return; } // 我們通過keyCode確定蛇要移動的方向 switch (event.keyCode) { case 37: direction = 'left';// 向左 break; case 38: direction = 'up';// 向上; break; case 39: direction = 'right';// 向右 break; case 40: direction = 'down';// 向下 break; } changeDir = false; delayTimer = setTimeout(function() { // 設置是否需要改變方向 changeDir = true; }, 300);};// 開始設置蛇移動邏輯// 蛇移動函數function snakeMove() { // 根據上面設置的方向來設置蛇頭的位置 switch (direction) { case 'left': x--; break; case 'right': x++; break; case 'up': y--; break; case 'down': y++; break; }; // 判斷是否游戲結束 if (x < 0 || y < 0 || x >= columnNumber || y >= rowNumber) { alert('Game Over!!!'); // 結束蛇移動的定時器 clearInterval(moveTimer); return;// 終止鍵盤事件; } // 如果蛇吃到自己,也要結束游戲 for ( var i = 0; i < snake.length; i++) { // 將此時蛇頭移動后的位置與之前左右的組成蛇的div的位置進行比較,如果相同則說明吃到自己,游戲結束 if (snake[i] == snakeDIVPosition[y][x]) { alert('Game over!!!'); clearInterval(moveTimer); return; }; } // 判斷蛇頭移動的位置是否有蛋 if (eggX == x && eggY == y) { snakeDIVPosition[eggY][eggX].className = 'col activeSnake'; snake.push(snakeDIVPosition[eggY][eggX]);// 加入蛇身 scoreCount++;// 記錄分數 // 更新當前的分數 score.innerHTML = scoreCount; // 隨機產生一個新的蛋 createNewEgg(); } else { // 設置蛇碰不到蛋的邏輯 // 讓蛇移動 // 蛇尾去掉蛇自身的顏色,變成格子的顏色 snake[0].className = 'col'; // 將蛇尾div從數組中移除 snake.shift(); // 定位到的新的蛇頭加入到蛇數組中 snakeDIVPosition[y][x].className = 'col activeSnake'; snake.push(snakeDIVPosition[y][x]); };};var moveTimer = setInterval('snakeMove()', 300);// 定義一個生成min,max之間的隨機數函數function random(min, max) { return Math.floor(Math.random() * (max - min + 1) + min);};function createNewEgg() { // 隨機出新的egg的下標的x和y值 eggX = random(0, columnNumber - 1); eggY = random(0, rowNumber - 1); // 判斷如果隨機產生的蛋與蛇身重合,就重新隨機產生一個蛋 if (snakeDIVPosition[eggY][eggX].className == 'col activeSnake') { createNewEgg();// 重新隨機新的egg } else { snakeDIVPosition[eggY][eggX].className = 'col egg'; }};createNewEgg();// 在游戲開始的時候生成新的eggvar pause = document.getElementById('Pause');var start = document.getElementById('Start');var refresh = document.getElementById('Refresh');var speed = document.getElementById('Speed');// 添加暫停按鈕pause.onclick = function() { clearInterval(moveTimer);};// 添加開始按鈕start.onclick = function() { clearInterval(moveTimer); moveTimer = setInterval('snakeMove()', speed1);};// 添加刷新按鈕refresh.onclick = function() { window.location.reload();};// 添加加速按鈕var speed1 = 300;speed.onclick = function() { speed1 -= 20; clearInterval(moveTimer); moveTimer = setInterval('snakeMove()', speed1);};</script></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
