用JavaScript实现一个贪吃蛇游戏

原理如下，贪吃蛇的蛇身就是一个数组，数组中的每个元素都是一个坐标，蛇身每次移动时都会在数组前插入一个新坐标，并在数组尾部删掉一条记录，吃到食物后数组的尾部记录就不删。如果移到屏幕边缘会从屏幕的另一边出现。好！接下来直接上代码！

<!DOCTYPE html>
<html lang="CN">
<head><meta charset="UTF-8"><title>贪吃蛇</title><style>canvas {border: 1px solid black;}</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<h3 id="score">分数：0</h3>
<script>const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const gridSize = 20;const snake = [{x: 160, y: 160}, {x: 140, y: 160}, {x: 120, y: 160}];let direction = 'right';let food = {x: 80, y: 80};let score = 0;let gameOver = false;function drawSnakePart(snakePart) {ctx.fillStyle = 'lightgreen';ctx.strokeStyle = 'darkgreen';ctx.fillRect(snakePart.x, snakePart.y, gridSize, gridSize);ctx.strokeRect(snakePart.x, snakePart.y, gridSize, gridSize);}function drawSnake() {snake.forEach(drawSnakePart);}function moveSnake() {const head = {x: snake[0].x, y: snake[0].y};//根据方向生成新的蛇头位置const width = canvas.width - gridSizeconst height = canvas.height - gridSizeif (direction === 'right') head.x = head.x === width ? 0 : head.x + gridSize;if (direction === 'left') head.x = head.x <= 0 ? width : head.x - gridSize;if (direction === 'up') head.y = head.y <= 0 ? height : head.y - gridSize;if (direction === 'down') head.y = head.y === height ? 0 : head.y + gridSize;//根据蛇头位置判断是否和蛇身碰撞const collision = snake.find(s => s.x === head.x && s.y === head.y)if (collision) {gameOver = trueshowGameOver()}//将蛇头位置插入数组的首位snake.unshift(head);//判断蛇是否吃到食物，如果没吃到则从数组末尾删除一个以保持数组的总长不变if (head.x === food.x && head.y === food.y) {score += 10;document.getElementById("score").innerHTML = "分数：" + scorecreateFood();} else {snake.pop();}}function changeDirection(event) {const keyPressed = event.keyCode;const goingUp = direction === 'up';const goingDown = direction === 'down';const goingRight = direction === 'right';const goingLeft = direction === 'left';if (keyPressed === 37 && !goingRight) {direction = 'left';}if (keyPressed === 38 && !goingDown) {direction = 'up';}if (keyPressed === 39 && !goingLeft) {direction = 'right';}if (keyPressed === 40 && !goingUp) {direction = 'down';}}function randomTen(min, max) {return Math.round((Math.random() * (max - min) + min) / gridSize) * gridSize;}function createFood() {food = {x: randomTen(0, canvas.width - gridSize),y: randomTen(0, canvas.height - gridSize)};}function drawFood() {ctx.fillStyle = 'red';ctx.fillRect(food.x, food.y, gridSize, gridSize);}function clearCanvas() {ctx.fillStyle = 'white';ctx.fillRect(0, 0, canvas.width, canvas.height);}function showGameOver() {const h1 = document.createElement("h1")const text = document.createTextNode("Game Over，按F5重新开始")h1.appendChild(text)document.body.appendChild(h1)}function gameLoop() {if (gameOver) returnclearCanvas();drawFood();moveSnake();drawSnake();setTimeout(gameLoop, 100);}document.addEventListener('keydown', changeDirection);gameLoop();
</script>
</body>
</html>

功能简单，所以截图也简单。