游戏飞机大战的代码 - 科学教育

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
body { margin:0; background: #000; overflow: hidden; }
canvas { display: block; margin: 0 auto; background: #111; }
</style>
</head>
<body>
<canvas id="game" width="400" height="600"></canvas>
<script>
// 画布和上下文
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const WIDTH = canvas.width;
const HEIGHT = canvas.height;
// 飞机
const plane = {
x: WIDTH / 2 - 20,
y: HEIGHT - 80,
width: 40,
height: 60,
speed: 5
};
// 子弹数组
let bullets = [];
// 敌机数组
let enemies = [];
// 分数
let score = 0;
// 按键状态
const keys = {};
// 创建子弹函数
function createBullet() {
bullets.push({
x: plane.x + plane.width / 2 - 3,
y: plane.y,
width: 6,
height: 12,
speed: 7
});
}
// 随机生成敌机
function createEnemy() {
const size = 40;
enemies.push({
x: Math.random() * (WIDTH - size),
y: -size,
width: size,
height: size,
speed: 2 + Math.random() * 2
});
}
// 监听键盘按下
window.addEventListener('keydown', function(e) {
keys[e.key] = true;
// 空格键发射子弹
if (e.code === 'Space') {
createBullet();
}
});
//监听键盘松开
window.addEventListener('keyup', function(e) {
keys[e.key] = false;
});
// 碰撞检测函数
function isColliding(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 gameLoop() {
// 清空画布
ctx.clearRect(0, 0, WIDTH, HEIGHT);
// 移动飞机
if (keys['ArrowLeft'] && plane.x > 0) {
plane.x -= plane.speed;
}
if (keys['ArrowRight'] && plane.x + plane.width < WIDTH) {
plane.x += plane.speed;
}
// 画飞机（用三角形表示）
ctx.fillStyle = 'skyblue';
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();
// 移动子弹，画子弹
for (let i = bullets.length - 1; i >= 0; i--) {
let b = bullets[i];
b.y -= b.speed;
if (b.y + b.height < 0) {
bullets.splice(i, 1);
continue;
}
ctx.fillStyle = 'yellow';
ctx.fillRect(b.x, b.y, b.width, b.height);
}
// 生成敌机（每隔一些帧数生成）
if (Math.random() < 0.02) {
createEnemy();
}
// 移动敌机，画敌机
for (let i = enemies.length - 1; i >= 0; i--) {
let e = enemies[i];
e.y += e.speed;
if (e.y > HEIGHT) {
enemies.splice(i, 1);
continue;
}
ctx.fillStyle = 'red';
ctx.fillRect(e.x, e.y, e.width, e.height);
}
// 检测子弹和敌机碰撞
for (let i = enemies.length - 1; i >= 0; i--) {
for (let j = bullets.length - 1; j >= 0; j--) {
if (isColliding(enemies[i], bullets[j])) {
enemies.splice(i, 1);
bullets.splice(j, 1);
score += 10;
break;
}
}
}
// 检测敌机和飞机碰撞
for (let e of enemies) {
if (isColliding(e, plane)) {
alert(`游戏结束！得分：${score}`);
document.location.reload();
return;
}
}
// 显示分数
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('分数: ' + score, 10, 30);
// 请求下一帧动画
requestAnimationFrame(gameLoop);
}
// 开始游戏
gameLoop();
</script>
</body>
</html>

复制代码

<!DOCTYPE html>
<html>
<head>
<title>简易飞机大战</title>
<style>
body {
margin: 0;
overflow: hidden; /* 不显示滚动条 */
background: black;
}
#gameCanvas {
background: #111;
display: block;
margin: 0 auto;
border: 2px solid white;
}
</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 = 40;
let score = 0;
let gameOver = false;
// 玩家飞机对象
const player = {
x: canvas.width / 2 - planeWidth / 2,
y: canvas.height - planeHeight - 10,
width: planeWidth,
height: planeHeight,
speed: 5,
moveLeft: false,
moveRight: false,
};
// 子弹数组
const bullets = [];
// 敌机数组
const enemies = [];
// 生成敌机
function createEnemy() {
const enemyWidth = 40;
const enemyHeight = 40;
const x = Math.random() * (canvas.width - enemyWidth);
const y = -enemyHeight;
const speed = 2 + Math.random() * 2;
enemies.push({x, y, width: enemyWidth, height: enemyHeight, speed});
}
// 绘制玩家飞机
function drawPlayer() {
ctx.fillStyle = 'cyan';
// 用三角形画飞机
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();
}
// 绘制子弹
function drawBullets() {
ctx.fillStyle = 'yellow';
bullets.forEach(b => {
ctx.fillRect(b.x, b.y, b.width, b.height);
});
}
// 绘制敌机
function drawEnemies() {
ctx.fillStyle = 'red';
enemies.forEach(e => {
ctx.fillRect(e.x, e.y, e.width, e.height);
});
}
// 移动玩家飞机
function movePlayer() {
if (player.moveLeft && player.x > 0) {
player.x -= player.speed;
}
if (player.moveRight && player.x + player.width < canvas.width) {
player.x += player.speed;
}
}
// 移动子弹
function moveBullets() {
for(let i = bullets.length -1; i >= 0; i--) {
bullets[i].y -= bullets[i].speed;
if (bullets[i].y < 0) {
bullets.splice(i, 1); // 把超出画面顶部的子弹删掉
}
}
}
// 移动敌机
function moveEnemies() {
for(let i = enemies.length -1; i >= 0; i--) {
enemies[i].y += enemies[i].speed;
if (enemies[i].y > canvas.height) {
// 敌机到底，算作游戏失败
gameOver = true;
}
}
}
// 碰撞检测函数
function isColliding(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 checkBulletEnemyCollision() {
for(let i = enemies.length -1; i >= 0; i--) {
for(let j = bullets.length -1; j >= 0; j--) {
if(isColliding(enemies[i], bullets[j])) {
// 击中了敌机
enemies.splice(i,1);
bullets.splice(j,1);
score += 10;
break; // 一个敌机被一个子弹击中后跳出内层循环
}
}
}
}
// 检测玩家和敌机碰撞
function checkPlayerEnemyCollision() {
for(let i = 0; i < enemies.length; i++) {
if(isColliding(player, enemies[i])) {
gameOver = true;
break;
}
}
}
// 显示分数
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() {
if (gameOver) {
drawGameOver();
return;
}
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
movePlayer();
moveBullets();
moveEnemies();
checkBulletEnemyCollision();
checkPlayerEnemyCollision();
drawPlayer();
drawBullets();
drawEnemies();
drawScore();
requestAnimationFrame(gameLoop);
}
// 控制按键
document.addEventListener('keydown', function(e) {
if(e.code === 'ArrowLeft') {
player.moveLeft = true;
} else if(e.code === 'ArrowRight') {
player.moveRight = true;
} else if(e.code === 'Space') {
// 发射子弹
bullets.push({
x: player.x + player.width/2 - 2,
y: player.y,
width:4,
height:10,
speed:7,
});
}
});
document.addEventListener('keyup', function(e) {
if(e.code === 'ArrowLeft') {
player.moveLeft = false;
} else if(e.code === 'ArrowRight') {
player.moveRight = false;
}
});
// 每秒生成一个敌机
setInterval(() => {
if(!gameOver) {
createEnemy();
}
}, 1000);
// 开始游戏
gameLoop();
</script>
</body>
</html>

复制代码