吴弘毅贪吃蛇 - 科学教育

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.snake {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}
.food {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script>
const gridSize = 20;
const boardSize = 400;
let snake = [{x: 200, y: 200}];
let food = {x: 0, y: 0};
let direction = 'right';
function createGameBoard() {
const gameBoard = document.getElementById('game-board');
gameBoard.style.width = `${boardSize}px`;
gameBoard.style.height = `${boardSize}px`;
}
function drawSnake() {
const gameBoard = document.getElementById('game-board');
gameBoard.innerHTML = '';
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.className = 'snake';
snakeElement.style.left = `${segment.x}px`;
snakeElement.style.top = `${segment.y}px`;
gameBoard.appendChild(snakeElement);
});
}
function drawFood() {
const gameBoard = document.getElementById('game-board');
const foodElement = document.createElement('div');
foodElement.className = 'food';
foodElement.style.left = `${food.x}px`;
foodElement.style.top = `${food.y}px`;
gameBoard.appendChild(foodElement);
}
function updateSnake() {
let newX = snake[0].x;
let newY = snake[0].y;
if (direction === 'left') {
newX -= gridSize;
} else if (direction === 'right') {
newX += gridSize;
} else if (direction === 'up') {
newY -= gridSize;
} else if (direction === 'down') {
newY += gridSize;
}
if (newX < 0 || newX >= boardSize || newY < 0 || newY >= boardSize) {
alert('Game Over!');
window.location.reload();
}
snake.unshift({x: newX, y: newY});
if (newX === food.x && newY === food.y) {
generateFood();
} else {
snake.pop();
}
}
function generateFood() {
const randomX = Math.floor(Math.random() * boardSize / gridSize) * gridSize;
const randomY = Math.floor(Math.random() * boardSize / gridSize) * gridSize;
food = {x: randomX, y: randomY};
if (snake.some(segment => segment.x === food.x && segment.y === food.y)) {
generateFood();
}
}
function changeDirection(event) {
const key = event.key;
if ((key === 'ArrowUp' || key === 'w') && direction !== 'down') {
direction = 'up';
} else if ((key === 'ArrowDown' || key === 's') && direction !== 'up') {
direction = 'down';
} else if ((key === 'ArrowLeft' || key === 'a') && direction !== 'right') {
direction = 'left';
} else if ((key === 'ArrowRight' || key === 'd') && direction !== 'left') {
direction = 'right';
}
}
function gameLoop() {
updateSnake();
drawSnake();
drawFood();
}
createGameBoard();
generateFood();
setInterval(gameLoop, 100);
document.addEventListener('keydown', changeDirection);
</script>
</body>
</html>

复制代码