二胎太325 - 科学教育 - Powered by Discuz!

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
body {
margin: 0;
overflow: hidden;
background: black;
color: white;
font-family: "微软雅黑", sans-serif;
}
#gameCanvas {
background: #111;
display: block;
margin: auto;
border: 2px solid white;
}
#scoreboard {
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="scoreboard">
血量：<span id="hp">3</span>    分数：<span id="score">0</span>
</div>
<p style="text-align:center; color:#ccc;">
操作提示：按A键向左移动，D键向右移动，空格键发射子弹。
</p>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const planeWidth = 40;
const planeHeight = 40;
let planeX = (canvas.width - planeWidth) / 2;
const planeY = canvas.height - planeHeight - 10;
let hp = 3;
let score = 0;
// 敌机数组，开始为空
let enemies = [];
// 子弹数组，开始为空
let bullets = [];
// 控制左右移动
let moveLeft = false;
let moveRight = false;
// 监听键盘按下
window.addEventListener("keydown", function(e) {
if (e.key === "a" || e.key === "A") moveLeft = true;
if (e.key === "d" || e.key === "D") moveRight = true;
});
// 监听键盘松开
window.addEventListener("keyup", function(e) {
if (e.key === "a" || e.key === "A") moveLeft = false;
if (e.key === "d" || e.key === "D") moveRight = false;
if (e.key === " ") shoot();
});
// 画飞机（用三角形表示）
function drawPlane() {
ctx.fillStyle = "lightblue";
ctx.beginPath();
ctx.moveTo(planeX + planeWidth / 2, planeY);
ctx.lineTo(planeX, planeY + planeHeight);
ctx.lineTo(planeX + planeWidth, planeY + planeHeight);
ctx.closePath();
ctx.fill();
}
// 生成敌机，随机x位置
function createEnemy() {
let x = Math.random() * (canvas.width - 30);
enemies.push({ x: x, y: -30, width: 30, height: 30 });
}
// 画敌机（红色矩形）
function drawEnemies() {
ctx.fillStyle = "red";
enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
}
// 移动敌机，向下移2像素
function moveEnemies() {
enemies.forEach(enemy => {
enemy.y += 2;
});
// 删除超出画面底部的敌机
enemies = enemies.filter(enemy => enemy.y < canvas.height);
}
// 发射子弹，子弹初始位置在飞机头部中间
function shoot() {
bullets.push({ x: planeX + planeWidth / 2 - 2.5, y: planeY, width: 5, height: 10 });
}
// 画子弹（黄色矩形）
function drawBullets() {
ctx.fillStyle = "yellow";
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
}
// 移动子弹，向上移5像素
function moveBullets() {
bullets.forEach(bullet => {
bullet.y -= 5;
});
// 删除飞出画面的子弹
bullets = bullets.filter(bullet => bullet.y + bullet.height > 0);
}
// 碰撞检测两个矩形是否相交
function isColliding(rect1, rect2) {
return !(
rect1.x > rect2.x + rect2.width ||
rect1.x + rect1.width < rect2.x ||
rect1.y > rect2.y + rect2.height ||
rect1.y + rect1.height < rect2.y
);
}
// 检查子弹和敌机碰撞
function checkBulletEnemyCollision() {
for (let i = bullets.length - 1; i >= 0; i--) {
let b = bullets[i];
for (let j = enemies.length - 1; j >= 0; j--) {
let e = enemies[j];
if (isColliding(b, e)) {
// 子弹和敌机都消失
bullets.splice(i, 1);
enemies.splice(j, 1);
score++;
updateScore();
break; // 跳出内层循环，继续检查下一个子弹
}
}
}
}
// 检查敌机和飞机碰撞
function checkEnemyPlaneCollision() {
let planeRect = { x: planeX, y: planeY, width: planeWidth, height: planeHeight };
for (let i = enemies.length - 1; i >= 0; i--) {
let e = enemies[i];
if (isColliding(e, planeRect)) {
enemies.splice(i, 1); // 敌机消失
hp--;
updateHP();
if (hp <= 0) {
alert("游戏结束！你的得分是：" + score);
document.location.reload(); // 重新加载页面，重玩游戏
}
}
}
}
// 更新血量显示
function updateHP() {
document.getElementById("hp").textContent = hp;
}
// 更新分数显示
function updateScore() {
document.getElementById("score").textContent = score;
}
// 游戏主循环
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 根据按键移动飞机
if (moveLeft && planeX > 0) planeX -= 5;
if (moveRight && planeX < canvas.width - planeWidth) planeX += 5;
drawPlane();
// 控制敌机出现概率（大约每30帧一个）
if (Math.random() < 0.03) createEnemy();
moveEnemies();
drawEnemies();
moveBullets();
drawBullets();
checkBulletEnemyCollision();
checkEnemyPlaneCollision();
requestAnimationFrame(gameLoop);
}
// 初始化血量和分数
updateHP();
updateScore();
gameLoop();
</script>
</body>
</html>

复制代码