V共同你 - 科学教育 - Powered by Discuz!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>打飞机小游戏</title>
<style>
body { margin: 0; overflow: hidden; background: black; }
canvas { display: block; margin: auto; background: #222; }
</style>
</head>
<body>
<canvas id="game" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
// 飞机对象
const plane = {
x: canvas.width / 2 - 20,
y: canvas.height - 60,
width: 40,
height: 40,
speed: 5,
bullets: []
};
// 敌机列表
const enemies = [];
let enemySpeed = 2;
let score = 0;
let gameOver = false;
// 控制键盘按键状态
const keys = {};
// 监听键盘按下和松开
window.addEventListener('keydown', e => {
keys[e.key] = true;
if (e.key === ' ' && !gameOver) { // 空格发射子弹
shootBullet();
}
});
window.addEventListener('keyup', e => {
keys[e.key] = false;
});
function shootBullet() {
// 子弹从飞机头部发射
plane.bullets.push({
x: plane.x + plane.width / 2 - 3,
y: plane.y,
width: 6,
height: 10,
speed: 7
});
}
function createEnemy() {
const x = Math.random() * (canvas.width - 30);
enemies.push({
x: x,
y: -30,
width: 30,
height: 30,
speed: enemySpeed
});
}
let enemyTimer = 0;
const enemyInterval = 60; // 每隔60帧出现一个敌机
function update() {
if (gameOver) return;
// 移动飞机
if (keys['ArrowLeft'] && plane.x > 0) {
plane.x -= plane.speed;
}
if (keys['ArrowRight'] && plane.x + plane.width < canvas.width) {
plane.x += plane.speed;
}
// 更新子弹位置
plane.bullets.forEach((b, i) => {
b.y -= b.speed;
// 超出屏幕删除子弹
if (b.y + b.height < 0) {
plane.bullets.splice(i, 1);
}
});
// 生成敌机
enemyTimer++;
if (enemyTimer > enemyInterval) {
createEnemy();
enemyTimer = 0;
}
// 移动敌机
enemies.forEach((e, i) => {
e.y += e.speed;
// 敌机超出屏幕后删除
if (e.y > canvas.height) {
enemies.splice(i, 1);
}
// 敌机碰到飞机，游戏结束
if (
e.x < plane.x + plane.width &&
e.x + e.width > plane.x &&
e.y < plane.y + plane.height &&
e.y + e.height > plane.y
) {
gameOver = true;
}
// 敌机被子弹击中
plane.bullets.forEach((b, bi) => {
if (
b.x < e.x + e.width &&
b.x + b.width > e.x &&
b.y < e.y + e.height &&
b.y + b.height > e.y
) {
// 删除敌机和子弹
enemies.splice(i, 1);
plane.bullets.splice(bi, 1);
score += 10;
}
});
});
}
function draw() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 画飞机（用绿色三角形表示）
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.moveTo(plane.x + plane.width / 2, plane.y);
ctx.lineTo(plane.x, plane.y + plane.height);
ctx.lineTo(plane.x + plane.width, plane.y + plane.height);
ctx.closePath();
ctx.fill();
// 画子弹（黄色矩形）
ctx.fillStyle = 'yellow';
plane.bullets.forEach(b => {
ctx.fillRect(b.x, b.y, b.width, b.height);
});
// 画敌机（红色方块）
ctx.fillStyle = 'red';
enemies.forEach(e => {
ctx.fillRect(e.x, e.y, e.width, e.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);
ctx.font = '20px Arial';
ctx.fillText('刷新页面重新开始', canvas.width / 2 - 90, canvas.height / 2 + 40);
}
}
function gameLoop() {
update();
draw();
if(!gameOver){
requestAnimationFrame(gameLoop);
}
}
gameLoop();
</script>
</body>
</html>

复制代码