124 - 科学教育 - Powered by Discuz!

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单飞机大战</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000; /* 黑色背景 */
}
#gameCanvas {
display: block;
margin: 0 auto;
background: #111;
border: 2px solid #555;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 飞机的属性
const planeWidth = 40;
const planeHeight = 60;
let planeX = (canvas.width - planeWidth) / 2;
const planeY = canvas.height - planeHeight - 10;
const planeSpeed = 5;
// 敌人属性
const enemyWidth = 40;
const enemyHeight = 40;
let enemies = [];
const enemySpeed = 2;
let enemySpawnInterval = 1500; // 毫秒
let lastEnemySpawn = 0;
// 游戏状态
let leftPressed = false;
let rightPressed = false;
let isGameOver = false;
let score = 0;
// 监听键盘事件，控制飞机移动
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft' || event.key === 'a') {
leftPressed = true;
} else if (event.key === 'ArrowRight' || event.key === 'd') {
rightPressed = true;
}
});
document.addEventListener('keyup', (event) => {
if (event.key === 'ArrowLeft' || event.key === 'a') {
leftPressed = false;
} else if (event.key === 'ArrowRight' || event.key === 'd') {
rightPressed = false;
}
});
// 画飞机
function drawPlane() {
ctx.fillStyle = 'deepskyblue';
ctx.beginPath();
// 用三角形表示飞机头
ctx.moveTo(planeX + planeWidth / 2, planeY);
ctx.lineTo(planeX, planeY + planeHeight);
ctx.lineTo(planeX + planeWidth, planeY + planeHeight);
ctx.closePath();
ctx.fill();
}
// 画敌人
function drawEnemy(enemy) {
ctx.fillStyle = 'red';
ctx.fillRect(enemy.x, enemy.y, enemyWidth, enemyHeight);
}
// 产生敌人
function spawnEnemy() {
let x = Math.random() * (canvas.width - enemyWidth);
enemies.push({x: x, y: -enemyHeight});
}
// 检测碰撞
function checkCollision(aX, aY, aW, aH, bX, bY, bW, bH) {
return !(bX > aX + aW ||
bX + bW < aX ||
bY > aY + aH ||
bY + bH < aY);
}
// 画分数
function drawScore() {
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('得分: ' + score, 10, 30);
}
// 游戏结束文字
function drawGameOver() {
ctx.fillStyle = 'white';
ctx.font = '40px Arial';
ctx.textAlign = 'center';
ctx.fillText('游戏结束', canvas.width / 2, canvas.height / 2);
ctx.font = '20px Arial';
ctx.fillText('你的得分: ' + score, canvas.width / 2, canvas.height / 2 + 40);
}
// 游戏主循环
function gameLoop(timestamp) {
if (isGameOver) {
drawGameOver();
return;
}
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 移动飞机
if (leftPressed && planeX > 0) {
planeX -= planeSpeed;
}
if (rightPressed && planeX < canvas.width - planeWidth) {
planeX += planeSpeed;
}
// 画飞机
drawPlane();
// 产生敌人
if (!lastEnemySpawn) lastEnemySpawn = timestamp;
if (timestamp - lastEnemySpawn > enemySpawnInterval) {
spawnEnemy();
lastEnemySpawn = timestamp;
}
// 移动敌人并检测碰撞
for (let i = enemies.length - 1; i >= 0; i--) {
enemies[i].y += enemySpeed;
drawEnemy(enemies[i]);
if (checkCollision(
planeX, planeY, planeWidth, planeHeight,
enemies[i].x, enemies[i].y, enemyWidth, enemyHeight
)) {
isGameOver = true;
}
// 如果敌人飞出屏幕，移除并加分
if (enemies[i].y > canvas.height) {
enemies.splice(i, 1);
score += 10;
}
}
drawScore();
requestAnimationFrame(gameLoop);
}
// 开始游戏
requestAnimationFrame(gameLoop);
</script>
</body>
</html>

复制代码