你现在是一个程序员你写的代码非常严谨请确保提供给我能够稳定运行的HTML代码要求如下:帮我做一个简单的游戏可以通过方向键操作、通过空格键加速的贪吃蛇游戏游戏范围为全屏可以通过吃游戏范围内的食物来增加长度如果蛇头碰到游戏范围界限或者自身游戏结束游戏结束后可以记录最大长度并且可以选择重新开始。支持手机屏幕滑动操作上下左右。
以下是一个简单的贪吃蛇游戏的HTML代码,它可以通过方向键操作,并且支持空格键加速。游戏范围为全屏,可以通过吃游戏范围内的食物来增加长度。如果蛇头碰到游戏范围界限或者自身,游戏将结束。游戏结束后可以记录最大长度,并且可以选择重新开始。此外,代码还支持手机屏幕滑动操作上下左右。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
background-color: #000;
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
window.onload = function() {
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const tileSize = 20;
const gameSize = Math.floor(window.innerHeight / tileSize) * tileSize;
const maxScoreKey = "snakeGameMaxScore";
let direction;
let speed = 1;
let running = false;
let score = 0;
let maxScore = localStorage.getItem(maxScoreKey) || 0;
let snake;
let food;
function startGame() {
snake = {
body: [{ x: gameSize / 2, y: gameSize / 2 }],
size: 1
};
food = generateFood();
direction = "right";
score = 0;
running = true;
speed = 1;
document.addEventListener("keydown", changeDirection);
canvas.addEventListener("touchstart", handleTouch);
canvas.addEventListener("touchend", handleTouch);
canvas.width = gameSize;
canvas.height = gameSize;
setInterval(gameLoop, 1000 / (10 * speed));
}
function generateFood() {
const x = Math.floor(Math.random() * (gameSize / tileSize)) * tileSize;
const y = Math.floor(Math.random() * (gameSize / tileSize)) * tileSize;
return { x, y };
}
function changeDirection(event) {
if (event.key === "ArrowUp" && direction !== "down") {
direction = "up";
} else if (event.key === "ArrowDown" && direction !== "up") {
direction = "down";
} else if (event.key === "ArrowLeft" && direction !== "right") {
direction = "left";
} else if (event.key === "ArrowRight" && direction !== "left") {
direction = "right";
} else if (event.key === " ") {
speed += 0.5;
}
}
function handleTouch(event) {
const touchX = event.changedTouches[0].clientX;
const touchY = event.changedTouches[0].clientY;
const deltaX = touchX - canvas.width / 2;
const deltaY = touchY - canvas.height / 2;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
if (deltaX > 0 && direction !== "left") {
direction = "right";
} else if (deltaX < 0 && direction !== "right") {
direction = "left";
}
} else {
if (deltaY > 0 && direction !== "up") {
direction = "down";
} else if (deltaY < 0 && direction !== "down") {
direction = "up";
}
}
if (event.type === "touchstart") {
speed += 0.5;
}
}
function gameLoop() {
if (!running) {
return;
}
ctx.clearRect(0, 0, gameSize, gameSize);
const headX = snake.body[0].x;
const headY = snake.body[0].y;
if (direction === "up") {
snake.body.unshift({ x: headX, y: headY - tileSize });
} else if (direction === "down") {
snake.body.unshift({ x: headX, y: headY + tileSize });
} else if (direction === "left") {
snake.body.unshift({ x: headX - tileSize, y: headY });
} else if (direction === "right") {
snake.body.unshift({ x: headX + tileSize, y: headY });
}
if (snake.body[0].x === food.x && snake.body[0].y === food.y) {
score++;
speed += 0.1;
food = generateFood();
} else {
snake.body.pop();
}
if (snake.body[0].x < 0 || snake.body[0].x >= gameSize || snake.body[0].y < 0 || snake.body[0].y >= gameSize || checkCollision()) {
running = false;
if (score > maxScore) {
maxScore = score;
localStorage.setItem(maxScoreKey, maxScore);
}
alert("Game Over! Your score: " + score + ", Max score: " + maxScore);
document.removeEventListener("keydown", changeDirection);
canvas.removeEventListener("touchstart", handleTouch);
canvas.removeEventListener("touchend", handleTouch);
}
drawSnake();
drawFood();
}
function drawSnake() {
ctx.fillStyle = "#00FF00";
snake.body.forEach((segment) => {
ctx.fillRect(segment.x, segment.y, tileSize, tileSize);
});
}
function drawFood() {
ctx.fillStyle = "#FF0000";
ctx.fillRect(food.x, food.y, tileSize, tileSize);
}
function checkCollision() {
const headX = snake.body[0].x;
const headY = snake.body[0].y;
return snake.body.slice(1).some((segment) => {
return segment.x === headX && segment.y === headY;
});
}
startGame();
};
</script>
</body>
</html>
请将以上代码复制到一个HTML文件中,并在浏览器中打开该文件以运行贪吃蛇游戏。
原文地址: https://www.cveoy.top/t/topic/i7Ec 著作权归作者所有。请勿转载和采集!