帮我生成飞机大战的网页代码 - 科学教育

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
body {
margin: 0;
background: black;
overflow: hidden;
}
#gameCanvas {
background: #111;
display: block;
margin: 0 auto;
border: 2px solid white;
}
#score {
color: white;
font-size: 20px;
text-align: center;
margin-top: 5px;
font-family: "微软雅黑", Arial, sans-serif;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="score">得分: 0</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;
const bulletWidth = 5;
const bulletHeight = 10;
const bulletSpeed = 7;
const enemyWidth = 40;
const enemyHeight = 40;
const enemySpeed = 2;
let bullets = [];
let enemies = [];
let leftPressed = false;
let rightPressed = false;
const planeSpeed = 5;
let score = 0;
// 监听键盘按键事件
document.addEventListener('keydown', e => {
if(e.code === 'ArrowLeft') leftPressed = true;
if(e.code === 'ArrowRight') rightPressed = true;
if(e.code === 'Space') shootBullet();
});
document.addEventListener('keyup', e => {
if(e.code === 'ArrowLeft') leftPressed = false;
if(e.code === 'ArrowRight') rightPressed = false;
});
// 发射子弹函数
function shootBullet() {
bullets.push({
x: planeX + planeWidth / 2 - bulletWidth / 2,
y: planeY,
width: bulletWidth,
height: bulletHeight,
});
}
// 创建敌机函数
function createEnemy() {
const x = Math.random() * (canvas.width - enemyWidth);
enemies.push({
x: x,
y: -enemyHeight,
width: enemyWidth,
height: enemyHeight,
});
}
// 检测碰撞
function isCollide(a, b) {
return !(
a.x + a.width < b.x ||
a.x > b.x + b.width ||
a.y + a.height < b.y ||
a.y > b.y + b.height
);
}
// 更新游戏状态
function update() {
// 移动飞机
if(leftPressed) {
planeX -= planeSpeed;
if(planeX < 0) planeX = 0;
}
if(rightPressed) {
planeX += planeSpeed;
if(planeX > canvas.width - planeWidth) planeX = canvas.width - planeWidth;
}
// 移动子弹
bullets = bullets.filter(bullet => bullet.y + bullet.height > 0);
bullets.forEach(bullet => {
bullet.y -= bulletSpeed;
});
// 移动敌机
enemies = enemies.filter(enemy => enemy.y < canvas.height);
enemies.forEach(enemy => {
enemy.y += enemySpeed;
});
// 子弹和敌机碰撞检测
for(let i = bullets.length - 1; i >= 0; i--) {
for(let j = enemies.length - 1; j >= 0; j--) {
if(isCollide(bullets[i], enemies[j])) {
// 碰撞，删除子弹和敌机，得分加一
bullets.splice(i, 1);
enemies.splice(j, 1);
score++;
document.getElementById('score').innerText = '得分: ' + score;
break;
}
}
}
// 敌机碰到飞机也算游戏结束（这个版本还没做，可以自己试试加）
}
// 画出飞机
function drawPlane() {
ctx.fillStyle = 'lime';
ctx.beginPath();
// 画一个三角形表示飞机
ctx.moveTo(planeX + planeWidth/2, planeY);
ctx.lineTo(planeX, planeY + planeHeight);
ctx.lineTo(planeX + planeWidth, planeY + planeHeight);
ctx.closePath();
ctx.fill();
}
// 画子弹
function drawBullets() {
ctx.fillStyle = 'yellow';
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
}
// 画敌机
function drawEnemies() {
ctx.fillStyle = 'red';
enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
}
// 主循环
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
update();
drawPlane();
drawBullets();
drawEnemies();
requestAnimationFrame(gameLoop);
}
// 每隔1秒生成一个敌机
setInterval(createEnemy, 1000);
// 开始游戏
gameLoop();
</script>
</body>
</html>

复制代码