刘景菡贪吃蛇

刘景菡 · 发表于 2025-10-11 14:57:31

帮我生产一个贪吃蛇的网页代码

kaia · 发表于 2025-10-11 14:57:39

当我们玩贪吃蛇游戏时，其实是在操作一条蛇去吃食物，并且随着吃到食物，蛇的身体会变长。下面是一个简单的贪吃蛇网页代码：

<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.snake {
width: 10px;
height: 10px;
background-color: green;
position: absolute;
}
.food {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script>
const gameBoard = document.getElementById('game-board');
let snakeX = 10;
let snakeY = 10;
let foodX = 200;
let foodY = 200;
let interval;
function renderSnake() {
const snakeElement = document.createElement('div');
snakeElement.style.left = snakeX + 'px';
snakeElement.style.top = snakeY + 'px';
snakeElement.classList.add('snake');
gameBoard.appendChild(snakeElement);
}
function renderFood() {
const foodElement = document.createElement('div');
foodElement.style.left = foodX + 'px';
foodElement.style.top = foodY + 'px';
foodElement.classList.add('food');
gameBoard.appendChild(foodElement);
}
function updateSnake() {
snakeX += 10;
const snakeElement = document.querySelector('.snake');
snakeElement.style.left = snakeX + 'px';
}
function checkCollision() {
if (snakeX === foodX && snakeY === foodY) {
foodX = Math.floor(Math.random() * 39) * 10;
foodY = Math.floor(Math.random() * 39) * 10;
const foodElement = document.querySelector('.food');
foodElement.style.left = foodX + 'px';
foodElement.style.top = foodY + 'px';
}
}
function gameLoop() {
interval = setInterval(() => {
updateSnake();
checkCollision();
}, 100);
}
renderSnake();
renderFood();
gameLoop();
</script>
</body>
</html>

复制代码

这段代码创建了一个简单的贪吃蛇游戏界面，蛇用绿色方块表示，食物用红色方块表示。蛇每次移动10个像素，当蛇和食物重合时，食物会随机出现在新的位置。你可以复制这段代码到一个 HTML 文件中，然后在浏览器中打开来运行这个贪吃蛇游戏。希望能帮助到你！如果有什么问题，欢迎随时问我哦！

刘景菡 · 发表于 2025-11-5 14:55:57

<html>
<head>
<title>贪吃蛇游戏</title>
<style>
      #game-board {
         width: 400px;
         height: 400px;
         border: 1px solid black;
         position: relative;
      }

      .snake {
         width: 10px;
         height: 10px;
         background-color: green;
         position: absolute;
      }

      .food {
         width: 10px;
         height: 10px;
         background-color: red;
         position: absolute;
      }
</style>
</head>
<body>
<div id="game-board"></div>

<script>
const gameBoard = document.getElementById('game-board');
let snakeX = 10;
let snakeY = 10;
let foodX = 200;
let foodY = 200;
let interval;

function renderSnake() {
      const snakeElement = document.createElement('div');
      snakeElement.style.left = snakeX + 'px';
      snakeElement.style.top = snakeY + 'px';
      snakeElement.classList.add('snake');
      gameBoard.appendChild(snakeElement);
}

function renderFood() {
      const foodElement = document.createElement('div');
      foodElement.style.left = foodX + 'px';
      foodElement.style.top = foodY + 'px';
      foodElement.classList.add('food');
      gameBoard.appendChild(foodElement);
}

function updateSnake() {
      snakeX += 10;
      const snakeElement = document.querySelector('.snake');
      snakeElement.style.left = snakeX + 'px';
}

function checkCollision() {
      if (snakeX === foodX && snakeY === foodY) {
         foodX = Math.floor(Math.random() * 39) * 10;
         foodY = Math.floor(Math.random() * 39) * 10;
         const foodElement = document.querySelector('.food');
         foodElement.style.left = foodX + 'px';
         foodElement.style.top = foodY + 'px';
      }
}

function gameLoop() {
      interval = setInterval(() => {
         updateSnake();
         checkCollision();
      }, 100);
}

renderSnake();
renderFood();
gameLoop();
</script>
</body>
</html>
帮我把有颜色的代码改成蓝色

kaia · 发表于 2025-11-5 14:56:02

刘景菡发表于 2025-11-05 14:55
贪吃蛇游戏

#game-board {
...

当我们想要改变代码中的颜色时，一般是通过修改CSS样式中的`background-color`属性来实现。在这个贪吃蛇游戏代码中，我们可以将绿色改为蓝色。下面是修改后的代码：

贪吃蛇游戏

      #game-board {
         width: 400px;
         height: 400px;
         border: 1px solid black;
         position: relative;
      }

      .snake {
         width: 10px;
         height: 10px;
         background-color: blue; /* 将原来的绿色改为蓝色 */
         position: absolute;
      }

      .food {
         width: 10px;
         height: 10px;
         background-color: red;
         position: absolute;
      }

我已经将蛇的颜色改成了蓝色，请复制以上代码到你的HTML文件中，然后在浏览器中运行，你将看到蓝色的贪吃蛇游戏界面。希望对你有帮助！如需进一步帮助，请随时告诉我！