陈丁赫

陈丁赫 · 发表于 2024-7-14 10:05:39

你好，你是一名专业的代码设计师，请你用html、css、js生成一个贪吃蛇游戏。

kaia · 发表于 2024-7-14 10:21:51

陈丁赫发表于 2024-07-14 10:21
那你可以把html、css、js分三部分，再生成一个贪吃蛇 ...

当然可以！以下是将HTML、CSS和JavaScript代码分离后的贪吃蛇游戏。

### HTML (`index.html`)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>

复制代码

### CSS (`styles.css`)

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid black;
}

复制代码

### JavaScript (`script.js`)

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const gridSize = 20;
const tileCount = canvas.width / gridSize;
let snake = [{ x: 10, y: 10 }];
let direction = { x: 1, y: 0 };
let food = { x: 5, y: 5 };
let gameOver = false;
function drawTile(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
}
function update() {
if (gameOver) return;
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
// 检查是否撞墙或撞自己
if (
head.x < 0 ||
head.x >= tileCount ||
head.y < 0 ||
head.y >= tileCount ||
snake.some(segment => segment.x === head.x && segment.y === head.y)
) {
gameOver = true;
alert("游戏结束！");
return;
}
snake.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
placeFood();
} else {
snake.pop();
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snake.forEach(segment => drawTile(segment.x, segment.y, "green"));
drawTile(food.x, food.y, "red");
}
function placeFood() {
let newFoodPosition;
while (true) {
newFoodPosition = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
if (!snake.some(segment => segment.x === newFoodPosition.x && segment.y === newFoodPosition.y)) {
break;
}
}
food = newFoodPosition;
}
function changeDirection(event) {
switch (event.key) {
case "ArrowUp":
if (direction.y === 0) direction = { x: 0, y: -1 };
break;
case "ArrowDown":
if (direction.y === 0) direction = { x: 0, y: 1 };
break;
case "ArrowLeft":
if (direction.x === 0) direction = { x: -1, y: 0 };
break;
case "ArrowRight":
if (direction.x === 0) direction = { x: 1, y: 0 };
break;
}
}
document.addEventListener("keydown", changeDirection);
function gameLoop() {
update();
draw();
setTimeout(gameLoop, 100);
}
placeFood();
gameLoop();

复制代码

将这些代码分别保存到不同的文件中（`index.html`, `styles.css`, `script.js`），然后在浏览器中打开`index.html`即可运行贪吃蛇游戏。如果有需要进一步改进或增加功能，请告诉我！

陈丁赫 · 发表于 2024-7-14 10:21:37

那你可以把html、css、js分三部分，再生成一个贪吃蛇游戏吗？

kaia · 发表于 2024-7-14 10:05:56

当然可以！以下是一个简单的贪吃蛇游戏的实现，使用了HTML、CSS和JavaScript。这个示例包含一个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>贪吃蛇游戏</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
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 gridSize = 20;
const tileCount = canvas.width / gridSize;
let snake = [{ x: 10, y: 10 }];
let direction = { x: 1, y: 0 };
let food = { x: 5, y: 5 };
let gameOver = false;
function drawTile(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
}
function update() {
if (gameOver) return;
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
// 检查是否撞墙或撞自己
if (
head.x < 0 ||
head.x >= tileCount ||
head.y < 0 ||
head.y >= tileCount ||
snake.some(segment => segment.x === head.x && segment.y === head.y)
) {
gameOver = true;
alert("游戏结束！");
return;
}
snake.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
placeFood();
} else {
snake.pop();
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snake.forEach(segment => drawTile(segment.x, segment.y, "green"));
drawTile(food.x, food.y, "red");
}
function placeFood() {
let newFoodPosition;
while (true) {
newFoodPosition = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
if (!snake.some(segment => segment.x === newFoodPosition.x && segment.y === newFoodPosition.y)) {
break;
}
}
food = newFoodPosition;
}
function changeDirection(event) {
switch (event.key) {
case "ArrowUp":
if (direction.y === 0) direction = { x: 0, y: -1 };
break;
case "ArrowDown":
if (direction.y === 0) direction = { x: 0, y: 1 };
break;
case "ArrowLeft":
if (direction.x === 0) direction = { x: -1, y: 0 };
break;
case "ArrowRight":
if (direction.x === 0) direction = { x: 1, y: 0 };
break;
}
}
document.addEventListener("keydown", changeDirection);
function gameLoop() {
update();
draw();
setTimeout(gameLoop, 100);
}
placeFood();
gameLoop();
</script>
</body>
</html>

复制代码

这个简化版的贪吃蛇游戏包含了基本的移动、吃食物以及碰撞检测功能。你可以在浏览器中直接运行这个HTML文件来玩贪吃蛇游戏。如果你有任何其他要求或需要进一步改进，可以告诉我！