欢迎!我白天是个邮递员,晚上就是个有抱负的演员。这是我的网站。我住在天朝的帝都,有条叫做Jack的狗。
<!DOCTYPE html><html><head> <title>贪吃蛇游戏</title> <style> #game-board { width: 600px; height: 600px; border: 1px solid #000; position: relative; margin: 0 auto; } .snake-node { width: 20px; height: 20px; background-color: #000; position: absolute; } #food { width: 20px; height: 20px; background-color: red; position: absolute; } #score { text-align: center; margin-top: 20px; } #pause-btn { display: block; margin: 10px auto; } #restart-btn { display: block; margin: 10px auto; } </style></head><body> <h1 style="text-align: center;">贪吃蛇游戏</h1> <div id="game-board"></div> <div id="score">得分:<span id="score-value">0</span></div> <button id="pause-btn">暂停</button> <button id="restart-btn">重新开始</button> <script> var gameBoard = document.getElementById('game-board'); var scoreDisplay = document.getElementById('score-value'); var pauseBtn = document.getElementById('pause-btn'); var restartBtn = document.getElementById('restart-btn'); var gridSize = 30; // 网格大小 var snakeSize = 20; // 蛇身大小 var snakeSpeed = 200; // 蛇移动速度(毫秒) var snakeDirection = 'right'; // 蛇移动方向 var snake = [{ x: 0, y: 0 }]; // 蛇的初始位置 var food = null; // 食物的位置 var score = 0; // 得分 var gameInterval = null; // 游戏循环定时器 // 初始化游戏 function initializeGame() { createSnake(); generateFood(); gameInterval = setInterval(moveSnake, snakeSpeed); pauseBtn.addEventListener('click', togglePause); restartBtn.addEventListener('click', restartGame); document.addEventListener('keydown', changeDirection); } // 创建蛇 function createSnake() { for (var i = 0; i < snake.length; i++) { var node = document.createElement('div'); node.className = 'snake-node'; node.style.left = snake[i].x + 'px'; node.style.top = snake[i].y + 'px'; gameBoard.appendChild(node); } } // 生成食物 function generateFood() { var x = getRandomPosition(); var y = getRandomPosition(); while (isOverlapping(x, y)) { x = getRandomPosition(); y = getRandomPosition(); } food = { x: x, y: y }; var foodNode = document.createElement('div'); foodNode.id = 'food'; foodNode.style.left = food.x + 'px'; foodNode.style.top = food.y + 'px'; gameBoard.appendChild(foodNode); } // 获取一个随机位置 function getRandomPosition() { return Math.floor(Math.random() * gridSize) * snakeSize; } // 判断位置是否与蛇或食物重叠 function isOverlapping(x, y) { for (var i = 0; i < snake.length; i++) { if (snake[i].x === x && snake[i].y === y) { return true; } } if (food && food.x === x && food.y === y) { return true; } return false; } // 移动蛇 function moveSnake() { var newHead = { x: snake[0].x, y: snake[0].y }; switch (snakeDirection) { case 'right': newHead.x += snakeSize; break; case 'left': newHead.x -= snakeSize; break; case 'up': newHead.y -= snakeSize; break; case 'down': newHead.y += snakeSize; break; } // 判断是否吃到食物 if (food && food.x === newHead.x && food.y === newHead.y) { score++; scoreDisplay.textContent = score; gameBoard.removeChild(document.getElementById('food')); generateFood(); } else { snake.pop(); } // 判断是否游戏结束 if (newHead.x < 0 || newHead.x >= gridSize * snakeSize || newHead.y < 0 || newHead.y >= gridSize * snakeSize || isOverlapping(newHead.x, newHead.y)) { clearInterval(gameInterval); alert('游戏结束!得分:' + score + '\n点击"重新开始"按钮重新开始游戏。'); return; } snake.unshift(newHead); updateSnakePosition(); } // 更新蛇的位置 function updateSnakePosition() { var snakeNodes = document.getElementsByClassName('snake-node'); while (snakeNodes.length > 0) { gameBoard.removeChild(snakeNodes[0]); } for (var i = 0; i < snake.length; i++) { var node = document.createElement('div'); node.className = 'snake-node'; node.style.left = snake[i].x + 'px'; node.style.top = snake[i].y + 'px'; gameBoard.appendChild(node); } } // 切换暂停/继续游戏 function togglePause() { if (gameInterval) { clearInterval(gameInterval); gameInterval = null; pauseBtn.textContent = '继续'; } else { gameInterval = setInterval(moveSnake, snakeSpeed); pauseBtn.textContent = '暂停'; } } // 重新开始游戏 function restartGame() { clearInterval(gameInterval); gameBoard.innerHTML = ''; snake = [{ x: 0, y: 0 }]; score = 0; scoreDisplay.textContent = score; snakeDirection = 'right'; initializeGame(); } // 改变蛇的移动方向 function changeDirection(event) { switch (event.keyCode) { case 37: if (snakeDirection !== 'right') { snakeDirection = 'left'; } break; case 38: if (snakeDirection !== 'down') { snakeDirection = 'up'; } break; case 39: if (snakeDirection !== 'left') { snakeDirection = 'right'; } break; case 40: if (snakeDirection !== 'up') { snakeDirection = 'down'; } break; } } // 启动游戏 initializeGame(); </script></body></html>
