前端工程师必备：贪吃蛇游戏代码实现教程
当然！作为一名前端工程师，我可以为你提供一个简单的贪吃蛇游戏的前端代码示例。下面是一个使用 HTML、CSS 和 JavaScript 的基本实现：
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid #000;
}
.snake {
width: 20px;
height: 20px;
background-color: #000;
position: absolute;
}
#food {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id='game-board'></div>
<script src='script.js'></script>
</body>
</html>
JavaScript 代码（script.js 文件）：
document.addEventListener('DOMContentLoaded', () => {
const gameBoard = document.getElementById('game-board');
let snake = [{ x: 10, y: 10 }];
let food = { x: 5, y: 5 };
let dx = 0;
let dy = 0;
function createSnake() {
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.style.gridRowStart = segment.y;
snakeElement.style.gridColumnStart = segment.x;
snakeElement.classList.add('snake');
gameBoard.appendChild(snakeElement);
});
}
function createFood() {
const foodElement = document.createElement('div');
foodElement.style.gridRowStart = food.y;
foodElement.style.gridColumnStart = food.x;
foodElement.classList.add('food');
gameBoard.appendChild(foodElement);
}
function moveSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
food = { x: Math.floor(Math.random() * 20) + 1, y: Math.floor(Math.random() * 20) + 1 };
} else {
snake.pop();
}
}
function updateGameBoard() {
gameBoard.innerHTML = '';
createSnake();
createFood();
}
function changeDirection(event) {
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
const keyPressed = event.keyCode;
const goingUp = dy === -1;
const goingDown = dy === 1;
const goingLeft = dx === -1;
const goingRight = dx === 1;
if (keyPressed === LEFT_KEY && !goingRight) {
dx = -1;
dy = 0;
}
if (keyPressed === RIGHT_KEY && !goingLeft) {
dx = 1;
dy = 0;
}
if (keyPressed === UP_KEY && !goingDown) {
dx = 0;
dy = -1;
}
if (keyPressed === DOWN_KEY && !goingUp) {
dx = 0;
dy = 1;
}
}
function gameLoop() {
moveSnake();
updateGameBoard();
}
setInterval(gameLoop, 100);
document.addEventListener('keydown', changeDirection);
});
这是一个简单的贪吃蛇游戏的前端实现。它使用了 HTML 创建游戏板和蛇的元素，使用 CSS 设置样式，使用 JavaScript 控制蛇的移动和食物的生成。你可以将上述代码复制到文件中（HTML 和 JavaScript 分别保存为 .html 和 .js 文件），在浏览器中打开 HTML 文件，就可以开始玩贪吃蛇游戏了。希望这个示例对你有所帮助！
原文地址: https://www.cveoy.top/t/topic/OZy 著作权归作者所有。请勿转载和采集!