积分 - 科学教育 - Powered by Discuz!

<!DOCTYPE html>
<html lang="zh">
<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>
<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();
}
// 生成敌机
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);
});
}
// 移动敌机
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);
});
}
// 移动子弹
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() {
for (let i = enemies.length -1; i>=0; i--) {
let e = enemies[i];
let planeRect = {x: planeX, y: planeY, width: planeWidth, height: planeHeight};
if (isColliding(e, planeRect)) {
enemies.splice(i,1);
hp--;
updateHP();
if (hp <= 0) {
alert("游戏结束！你的得分是：" + score);
resetGame();
}
}
}
}
// 更新血量显示
function updateHP() {
document.getElementById("hp").textContent = hp;
}
// 更新分数显示
function updateScore() {
document.getElementById("score").textContent = score;
}
// 重置游戏
function resetGame() {
hp = 3;
score = 0;
enemies = [];
bullets = [];
planeX = (canvas.width - planeWidth) / 2;
updateHP();
updateScore();
}
// 游戏主循环
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>
<p style="text-align:center; color:#ccc; margin-top:10px;">
操作提示：<br />
按A键向左移动，D键向右移动，空格键发射子弹。
</p>
</body>
</html>

复制代码