htmledit_views">
html"><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贪吃蛇html" title=游戏>游戏</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;margin: 0;}#score {font-size: 24px;color: #319403;}#gameCanvas {border: 1px solid black;}</style>
</head>
<body><div id="score">得分: 0</div><canvas id="gameCanvas" width="600" height="600"></canvas><script>const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const box = 20;let snake = [];snake[0] = { x: 10 * box, y: 10 * box };let food = {x: Math.floor(Math.random() * 20) * box,y: Math.floor(Math.random() * 20) * box};let d;let score = 0; // 初始化得分const scoreElement = document.getElementById('score'); // 获取得分显示元素document.addEventListener('keydown', direction);function direction(event) {if (event.keyCode == 37 && d != 'RIGHT') {d = 'LEFT';} else if (event.keyCode == 38 && d != 'DOWN') {d = 'UP';} else if (event.keyCode == 39 && d != 'LEFT') {d = 'RIGHT';} else if (event.keyCode == 40 && d != 'UP') {d = 'DOWN';}}function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < snake.length; i++) {ctx.fillStyle = i == 0 ? 'green' : 'white';ctx.fillRect(snake[i].x, snake[i].y, box, box);ctx.strokeStyle = 'black';ctx.strokeRect(snake[i].x, snake[i].y, box, box);}ctx.fillStyle = 'red';ctx.fillRect(food.x, food.y, box, box);let snakeX = snake[0].x;let snakeY = snake[0].y;if (d == 'LEFT') snakeX -= box;if (d == 'UP') snakeY -= box;if (d == 'RIGHT') snakeX += box;if (d == 'DOWN') snakeY += box;if (snakeX == food.x && snakeY == food.y) {food = {x: Math.floor(Math.random() * 20) * box,y: Math.floor(Math.random() * 20) * box};score += 1; // 每次吃到食物得分增加scoreElement.textContent = '得分: ' + score; // 更新得分显示} else {snake.pop();}if (snakeX < 0) {snakeX = canvas.width - box;} else if (snakeX >= canvas.width) {snakeX = 0;}if (snakeY < 0) {snakeY = canvas.height - box;} else if (snakeY >= canvas.height) {snakeY = 0;}let newHead = {x: snakeX,y: snakeY};snake.unshift(newHead);}function collision(head, array) {for (let i = 0; i < array.length; i++) {if (head.x == array[i].x && head.y == array[i].y) {return true;}}return false;}let game = setInterval(draw, 200);</script>
</body>
</html>