以下是一个简单的火柴人大战
游戏的代码示例，使用Vue2编写：
```html
<template>
<div class="game-container">
<canvas ref="canvas" width="800" height="400"></canvas>
</div>
</template>
<script>
export default {
data() {
return {
canvas: null,
ctx: null,
player1: null,
player2: null,
projectiles: [],
running: false,
intervalId: null
};
},
mounted() {
this.canvas = this.$refs.canvas;
this.ctx = this.canvas.getContext("2d");
this.player1 = new Player(50, 200, 30, 70, "red", "left", this.canvas);
this.player2 = new Player(720, 200, 30, 70, "blue", "right", this.canvas);
this.draw();
},
methods: {
draw() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.player1.draw();
this.player2.draw();
this.projectiles.forEach((projectile, index) => {
projectile.draw();
if (projectile.x < 0 || projectile.x > this.canvas.width) {
this.projectiles.splice(index, 1);
} else {
projectile.update();
if (projectile.checkCollision(this.player1)) {
this.player1.health -= 10;
this.projectiles.splice(index, 1);
} else if (projectile.checkCollision(this.player2)) {
this.player2.health -= 10;
this.projectiles.splice(index, 1);
}
}
});
if (this.player1.health <= 0 || this.player2.health <= 0) {
this.running = false;
clearInterval(this.intervalId);
this.ctx.font = "bold 40px Arial";
this.ctx.fillStyle = "white";
this.ctx.fillText("Game Over!", 300, 200);
}
if (this.running) {
requestAnimationFrame(this.draw);
}
},
startGame() {
this.running = true;
this.intervalId = setInterval(() => {
this.projectiles.push(new Projectile(this.player1, this.player2, this.canvas));
this.projectiles.push(new Projectile(this.player2, this.player1, this.canvas));
}, 1000);
this.draw();
}
}
};
class Player {
constructor(x, y, width, height, color, direction, canvas) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.color = color;
this.direction = direction;
this.canvas = canvas;
this.health = 100;
}
draw() {
this.canvas.getContext("2d").fillStyle = this.color;
this.canvas.getContext("2d").fillRect(this.x, this.y, this.width, this.height);
this.canvas.getContext("2d").fillStyle = "white";
this.canvas.getContext("2d").font = "bold 20px Arial";
this.canvas.getContext("2d").fillText(`Health: ${this.health}`, this.x, this.y - 10);
}
}
class Projectile {
constructor(shooter, target, canvas) {
this.x = shooter.x + shooter.width / 2;
this.y = shooter.y + shooter.height / 2;
this.radius = 5;
this.color = shooter.color;
this.velocity = {
x: target.x + target.width / 2 - this.x,
y: target.y + target.height / 2 - this.y
};
const magnitude = Math.sqrt(this.velocity.x ** 2 + this.velocity.y ** 2);
this.velocity.x /= magnitude;
this.velocity.y /= magnitude;
this.velocity.x *= 5;
this.velocity.y *= 5;
this.canvas = canvas;
}
draw() {
this.canvas.getContext("2d").beginPath();
this.canvas.getContext("2d").fillStyle = this.color;
this.canvas.getContext("2d").arc(this.x, this.y, this.radius, 0, Math.PI * 2);
this.canvas.getContext("2d").fill();
}
update() {
this.x += this.velocity.x;
this.y += this.velocity.y;
}
checkCollision(player) {
const distance = Math.sqrt((player.x - this.x) ** 2 + (player.y - this.y) ** 2);
return distance < player.width / 2 + this.radius;
}
}
</script>
<style>
.game-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
}
</style>
```
这个
游戏有两个玩家，一个红色一个蓝色，分别在左侧和右侧。玩家可以发射
火球，相互攻击。最后剩余生命值为0的玩家输掉
游戏。玩家的生命值显示在他们的头顶上。您可以尝试在此基础上添加更多功能和改进。
1054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
