解轩瑜

解轩瑜 · 发表于 2024-7-29 10:13:17

完整点，把上次成功的合起来

kaia · 发表于 2024-7-29 10:13:52

解轩瑜发表于 2024-07-29 10:13
完整点，把上次成功的合起来

好的，我会将之前成功的多玩家贪吃蛇游戏和新增的暂停功能进行整合。以下是完整的代码，包括HTML、CSS和JavaScript文件。

### HTML文件（index.html）

<!DOCTYPE html>
<html lang="zh-CN">
<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>
<h1>多人贪吃蛇</h1>
<div id="score">得分: </div>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<button id="restartButton">重新开始游戏</button>
<button id="pauseButton">暂停游戏</button>
<script src="script.js"></script>
</body>
</html>

复制代码

### CSS文件（styles.css）

body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
canvas {
border: 1px solid #333;
}

复制代码

### JavaScript文件（script.js）

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const restartButton = document.getElementById("restartButton");
const pauseButton = document.getElementById("pauseButton");
const box = 20;
const rows = canvas.height / box;
const columns = canvas.width / box;
let snakes = []; // 蛇的数组
let foods = []; // 食物的数组
let directions = []; // 每个蛇的方向
let scores = []; // 每个玩家的得分
let gameInterval;
let isPaused = false;
function createSnake(x, y) {
return [{ x: x * box, y: y * box }];
}
function addFood() {
while (foods.length < 10) {
let foodX = Math.floor(Math.random() * columns) * box;
let foodY = Math.floor(Math.random() * rows) * box;
if (!isFoodOnSnake(foodX, foodY)) {
foods.push({ x: foodX, y: foodY });
}
}
}
function isFoodOnSnake(foodX, foodY) {
return snakes.some(snake => snake.some(segment => segment.x === foodX && segment.y === foodY));
}
function initGame() {
clearInterval(gameInterval);
directions = [{ x: 1, y: 0 }, { x: -1, y: 0 }]; // 初始方向
snakes = [
createSnake(2, 1), // 玩家1的初始位置在画布左边
createSnake(columns - 3, rows - 2) // 玩家2的初始位置在画布右边
];
scores = [0, 0]; // 初始得分
foods = []; // 清空食物数组
addFood(); // 增加食物
gameInterval = setInterval(updateGame, 100);
}
function updateGame() {
if (!isPaused) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制食物
for (let f = 0; f < foods.length; f++) {
ctx.fillStyle = "red";
ctx.fillRect(foods[f].x, foods[f].y, box, box);
}
for (let n = 0; n < snakes.length; n++) {
let snake = snakes[n];
let newHead = { x: snake[0].x + directions[n].x * box, y: snake[0].y + directions[n].y * box };
// 检测边界和碰撞
if (newHead.x < 0 || newHead.y < 0 || newHead.x >= canvas.width || newHead.y >= canvas.height || isCollide(snake, newHead)) {
clearInterval(gameInterval);
alert(`游戏结束，玩家${n + 1}输了`);
return;
}
snake.unshift(newHead); // 添加新头
let ateFood = false;
for (let f = 0; f < foods.length; f++) {
if (foods[f].x === newHead.x && foods[f].y === newHead.y) {
foods.splice(f, 1);
ateFood = true;
scores[n] += 10;
break;
}
}
if (!ateFood) {
snake.pop(); // 移除尾部
}
// 绘制蛇
for (let s = 0; s < snake.length; s++) {
ctx.fillStyle = n === 0 ? 'green' : 'blue'; // 玩家1为绿色，玩家2为蓝色
ctx.fillRect(snake[s].x, snake[s].y, box, box);
}
}
addFood(); // 如果食物被吃掉，增加新食物
// 更新得分显示
document.getElementById('score').textContent = `得分: 玩家1 - ${scores[0]}, 玩家2 - ${scores[1]}`;
}
}
function isCollide(snake, head) {
return snake.some(segment => segment.x === head.x && segment.y === head.y);
}
document.addEventListener('keydown', function(e) {
// 控制玩家1
if (e.key === 'w' && directions[0].y === 0) {
directions[0] = { x: 0, y: -1 };
} else if (e.key === 's' && directions[0].y === 0) {
directions[0] = { x: 0, y: 1 };
} else if (e.key === 'a' && directions[0].x === 0) {
directions[0] = { x: -1, y: 0 };
} else if (e.key === 'd' && directions[0].x === 0) {
directions[0] = { x: 1, y: 0 };
}
// 控制玩家2
if (e.key === 'ArrowUp' && directions[1].y === 0) {
directions[1] = { x: 0, y: -1 };
} else if (e.key === 'ArrowDown' && directions[1].y === 0) {
directions[1] = { x: 0, y: 1 };
} else if (e.key === 'ArrowLeft' && directions[1].x === 0) {
directions[1] = { x: -1, y: 0 };
} else if (e.key === 'ArrowRight' && directions[1].x === 0) {
directions[1] = { x: 1, y: 0 };
}
});
pauseButton.addEventListener("click", function() {
isPaused = !isPaused;
pauseButton.textContent = isPaused ? "继续游戏" : "暂停游戏";
});
restartButton.addEventListener("click", initGame);
initGame(); // 初始化游戏

复制代码

### 功能说明：

1. **玩家控制**：
- 玩家1使用WASD键来控制。
- 玩家2使用箭头键来控制。

2. **食物**：
- 食物会随机生成，玩家每吃一个食物得10分。

3. **边界和碰撞检测**：
- 如果蛇碰到边界或自身，游戏结束。

4. **得分显示**：
- 游戏页面的上方会显示每个玩家的得分。

5. **暂停功能**：
- 添加了一个 `pauseButton`，点击该按钮可以暂停或继续游戏。

将这些代码分别保存到 `index.html`、 `styles.css` 和 `script.js` 文件中，并确保它们在同一目录下。然后打开 `index.html` 文件，即可在浏览器里运行带有暂停功能的多人贪吃蛇游戏。

如果你遇到任何问题或需要进一步的帮助，请随时告诉我！

解轩瑜 · 发表于 2024-7-29 10:29:51

植物大战僵尸，不能开始，干脆把真的植物大战僵尸1的三件套代码给我

解轩瑜 · 发表于 2024-7-29 10:38:47

好了没有？

解轩瑜 · 发表于 2024-7-29 12:06:17

植物大战僵尸1的三件套代码给我

解轩瑜 · 发表于 2024-7-29 12:14:56

植物大战僵尸用三件套合成代码

解轩瑜 · 发表于 2024-7-29 12:18:49

AI,植物大战僵尸用三件套合成代码,快点！

解轩瑜 · 发表于 2024-7-29 12:29:59

用三件套合成火柴人对战的代码

解轩瑜 · 发表于 2024-7-31 10:43:58

用三件套合成火柴人对战的代码

解轩瑜 · 发表于 2024-7-31 10:51:23

用三件套合成飞机大战的代码