黄思齐小飞棍 - 科学教育

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单飞机大战游戏</title>
<style>
body {
background: #000;
margin: 0;
overflow: hidden;
}
canvas {
background: #111;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
// 获取画布和绘图环境
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const CANVAS_WIDTH = canvas.width;
const CANVAS_HEIGHT = canvas.height;
// 玩家飞机对象
const player = {
x: CANVAS_WIDTH / 2 - 20,
y: CANVAS_HEIGHT - 60,
width: 40,
height: 40,
speed: 5,
bullets: []
};
// 敌人飞机数组
let enemies = [];
const enemyWidth = 40;
const enemyHeight = 40;
let enemySpeed = 1;
let enemySpawnInterval = 1000; // 毫秒
// 控制变量
let keys = {};
let score = 0;
let gameOver = false;
// 监听键盘按下
window.addEventListener('keydown', function(e){
keys[e.key] = true;
// 按空格发射子弹
if(e.key === ' ' || e.key === 'Spacebar'){
fireBullet();
}
});
// 监听键盘松开
window.addEventListener('keyup', function(e){
keys[e.key] = false;
});
// 发射子弹函数
function fireBullet(){
// 给子弹添加一个对象，位置在飞机正上方中间
player.bullets.push({
x: player.x + player.width / 2 - 3,
y: player.y,
width: 6,
height: 12,
speed: 7
});
}
// 生成敌机
function spawnEnemy(){
const x = Math.random() * (CANVAS_WIDTH - enemyWidth);
enemies.push({
x: x,
y: -enemyHeight,
width: enemyWidth,
height: enemyHeight,
speed: enemySpeed
});
}
// 更新游戏状态
function update(){
if(gameOver) return;
// 玩家左右移动
if(keys['ArrowLeft'] && player.x > 0){
player.x -= player.speed;
}
if(keys['ArrowRight'] && player.x < CANVAS_WIDTH - player.width){
player.x += player.speed;
}
// 更新子弹位置
player.bullets.forEach((bullet, index) => {
bullet.y -= bullet.speed;
// 离开画面就删除
if(bullet.y + bullet.height < 0){
player.bullets.splice(index, 1);
}
});
// 更新敌机位置
enemies.forEach((enemy, enemyIndex) => {
enemy.y += enemy.speed;
// 敌机碰到地面，游戏结束
if(enemy.y > CANVAS_HEIGHT){
gameOver = true;
}
// 检测敌机和子弹碰撞
player.bullets.forEach((bullet, bulletIndex) => {
if(isColliding(bullet, enemy)){
// 移除敌机和子弹
enemies.splice(enemyIndex, 1);
player.bullets.splice(bulletIndex, 1);
score += 10;
}
});
// 检测敌机和玩家飞机碰撞
if(isColliding(enemy, player)){
gameOver = true;
}
});
}
// 碰撞检测函数
function isColliding(a, b){
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
// 绘制游戏元素
function draw(){
// 清空画布
ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
// 画玩家飞机（绿色三角形）
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.moveTo(player.x + player.width/2, player.y);
ctx.lineTo(player.x, player.y + player.height);
ctx.lineTo(player.x + player.width, player.y + player.height);
ctx.closePath();
ctx.fill();
// 画子弹（黄色矩形）
ctx.fillStyle = 'yellow';
player.bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
// 画敌机（红色方块）
ctx.fillStyle = 'red';
enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
// 画分数
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('分数: ' + score, 10, 30);
if(gameOver){
ctx.fillStyle = 'white';
ctx.font = '40px Arial';
ctx.fillText('游戏结束', CANVAS_WIDTH/2 - 100, CANVAS_HEIGHT/2);
}
}
// 游戏主循环
function gameLoop(){
update();
draw();
if(!gameOver){
requestAnimationFrame(gameLoop);
}
}
// 开始生成敌机
setInterval(() => {
if(!gameOver){
spawnEnemy();
}
}, enemySpawnInterval);
// 开始游戏
gameLoop();
</script>
</body>
</html>

复制代码