当前位置：首页 > news >正文

chatGPT写的网页版贪吃蛇小游戏

news 2025/7/8 16:42:43

chatGPT写的网页版贪吃蛇小游戏

前言
网页版贪吃蛇小游戏

前言

之前无聊，让ChatGPT写了一段基于html语言的贪吃蛇小游戏代码

网页版贪吃蛇小游戏

将以下内容复制到记事本，重命名为xxx.html即可打开浏览器游玩

这里是一个使用HTML、CSS和JavaScript编写的可以在浏览器中直接运行的贪吃蛇游戏代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Snake Game by OpenAI</title><style>canvas {display: block;margin: 0 auto;border: 1px solid black;}</style>
</head>
<body><canvas id="gameCanvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const snakeSize = 10;let snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}, {x: 120, y: 150}];let food = {x: 0, y: 0};let dx = 10;let dy = 0;let changingDirection = false;function drawSnakePart(snakePart) {ctx.fillStyle = 'green';ctx.strokeStyle = 'black';ctx.fillRect(snakePart.x, snakePart.y, snakeSize, snakeSize);ctx.strokeRect(snakePart.x, snakePart.y, snakeSize, snakeSize);}function drawSnake() {snake.forEach(drawSnakePart);}function moveSnake() {const head = {x: snake[0].x + dx, y: snake[0].y + dy};snake.unshift(head);const didEatFood = snake[0].x === food.x && snake[0].y === food.y;if (didEatFood) {createFood();} else {snake.pop();}}function changeDirection(event) {const LEFT_KEY = 37;const RIGHT_KEY = 39;const UP_KEY = 38;const DOWN_KEY = 40;if (changingDirection) return;changingDirection = true;const keyPressed = event.keyCode;const goingUp = dy === -10;const goingDown = dy === 10;const goingRight = dx === 10;const goingLeft = dx === -10;if (keyPressed === LEFT_KEY && !goingRight) {dx = -10;dy = 0;}if (keyPressed === UP_KEY && !goingDown) {dx = 0;dy = -10;}if (keyPressed === RIGHT_KEY && !goingLeft) {dx = 10;dy = 0;}if (keyPressed === DOWN_KEY && !goingUp) {dx = 0;dy = 10;}}function createFood() {food.x = Math.floor(Math.random() * canvas.width / 10) * 10;food.y = Math.floor(Math.random() * canvas.height / 10) * 10;snake.forEach(part => {if (part.x === food.x && part.y === food.y) {createFood();}});}function drawFood() {ctx.fillStyle = 'red';ctx.strokeStyle = 'black';ctx.fillRect(food.x, food.y, snakeSize, snakeSize);ctx.strokeRect(food.x, food.y, snakeSize, snakeSize);}function checkCollision() {for (let i = 4; i < snake.length; i++) {if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {return true;}}const hitLeftWall = snake[0].x < 0;const hitRightWall = snake[0].x > canvas.width - snakeSize;const hitTopWall = snake[0].y < 0;const hitBottomWall = snake[0].y > canvas.height - snakeSize;return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;}function gameLoop() {if (checkCollision()) {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = 'black';ctx.font = '30px Arial';ctx.fillText('Game Over!', 150, 200);return;}changingDirection = false;setTimeout(() => {ctx.clearRect(0, 0, canvas.width, canvas.height);drawFood();moveSnake();drawSnake();gameLoop();}, 100);}createFood();document.addEventListener('keydown', changeDirection);gameLoop();</script>
</body>
</html>