返回
Canvas射击小游戏：移动怪兽 vs 玩家飞机
前端
2024-01-10 17:00:17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<h1>Canvas射击小游戏：移动怪兽 vs 玩家飞机</h1>
<p>准备好了吗？拿起你的武器，加入战斗吧！</p>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
// 创建画布和上下文
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 创建玩家飞机
const player = {
x: canvas.width / 2,
y: canvas.height - 50,
width: 50,
height: 50,
speed: 5,
bullets: [],
};
// 创建怪兽
const monsters = [];
for (let i = 0; i < 10; i++) {
monsters.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height / 2,
width: 50,
height: 50,
speedX: Math.random() * 2 - 1,
speedY: Math.random() * 2 - 1,
});
}
// 游戏循环
function gameLoop() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制玩家飞机
ctx.fillStyle = "blue";
ctx.fillRect(player.x, player.y, player.width, player.height);
// 绘制怪兽
ctx.fillStyle = "red";
for (let i = 0; i < monsters.length; i++) {
const monster = monsters[i];
ctx.fillRect(monster.x, monster.y, monster.width, monster.height);
// 移动怪兽
monster.x += monster.speedX;
monster.y += monster.speedY;
// 检测怪兽是否到达底部
if (monster.y + monster.height > canvas.height) {
alert("游戏失败！");
window.location.reload();
}
}
// 检测玩家是否按下按键
window.addEventListener("keydown", (e) => {
switch (e.key) {
case "ArrowLeft":
player.x -= player.speed;
break;
case "ArrowRight":
player.x += player.speed;
break;
case "ArrowUp":
player.y -= player.speed;
break;
case "ArrowDown":
player.y += player.speed;
break;
case " ":
// 发射子弹
player.bullets.push({
x: player.x + player.width / 2,
y: player.y + player.height / 2,
speedX: 5,
speedY: -5,
width: 5,
height: 5,
});
break;
}
});
// 绘制子弹
ctx.fillStyle = "black";
for (let i = 0; i < player.bullets.length; i++) {
const bullet = player.bullets[i];
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
// 移动子弹
bullet.x += bullet.speedX;
bullet.y += bullet.speedY;
// 检测子弹是否超出画布
if (
bullet.x < 0 ||
bullet.x > canvas.width ||
bullet.y < 0 ||
bullet.y > canvas.height
) {
player.bullets.splice(i, 1);
continue;
}
// 检测子弹是否击中怪兽
for (let j = 0; j < monsters.length; j++) {
const monster = monsters[j];
if (
bullet.x >= monster.x &&
bullet.x <= monster.x + monster.width &&
bullet.y >= monster.y &&
bullet.y <= monster.y + monster.height
) {
// 子弹击中怪兽
monsters.splice(j, 1);
player.bullets.splice(i, 1);
// 检查是否消灭所有怪兽
if (monsters.length === 0) {
alert("游戏胜利！");
window.location.reload();
}
}
}
}
// 再次调用游戏循环
requestAnimationFrame(gameLoop);
}
// 启动游戏循环
gameLoop();
</script>
</body>
</html>
