第一步，写一个html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <style>body { margin: 0; }canvas { display: block; background-color: #000; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="600"></canvas> <script src="game.js"></script> </body> </html>
第二步，就是JS文件了。js文件名字 game.js 代码如下
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');let player = {x: canvas.width / 2,y: canvas.height - 30,width: 50,height: 30,speed: 5,dx: 0
};let enemies = [];
let bullets = [];
let keys = {};
let gameRunning = true;function init() {document.addEventListener('keydown', keyDownHandler, false);document.addEventListener('keyup', keyUpHandler, false);setInterval(mainLoop, 1000 / 60); // 每秒60帧setInterval(spawnEnemy, 1000); // 每秒生成一个敌人
}function mainLoop() {if (!gameRunning) return;clearCanvas();movePlayer();moveBullets();moveEnemies();drawPlayer();drawBullets();drawEnemies();checkCollisions();
}function clearCanvas() {ctx.clearRect(0, 0, canvas.width, canvas.height);
}function drawPlayer() {ctx.fillStyle = "red";ctx.fillRect(player.x, player.y, player.width, player.height);
}function movePlayer() {if (keys.right) {player.dx = player.speed;} else if (keys.left) {player.dx = -player.speed;} else {player.dx = 0;}player.x += player.dx;if (player.x < 0) {player.x = 0;} else if (player.x + player.width > canvas.width) {player.x = canvas.width - player.width;}
}function spawnEnemy() {let enemy = {x: Math.random() * (canvas.width - 50),y: 0,width: 50,height: 30,speed: 2};enemies.push(enemy);
}function moveEnemies() {for (let i = 0; i < enemies.length; i++) {enemies[i].y += enemies[i].speed;if (enemies[i].y > canvas.height) {enemies.splice(i, 1);i--;}}
}function drawEnemies() {for (let enemy of enemies) {ctx.fillStyle = "blue";ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);}
}function fireBullet() {let bullet = {x: player.x + player.width / 2 - 2,y: player.y,width: 4,height: 10,speed: 7};bullets.push(bullet);
}function moveBullets() {for (let i = 0; i < bullets.length; i++) {bullets[i].y -= bullets[i].speed;if (bullets[i].y < 0) {bullets.splice(i, 1);i--;}}
}function drawBullets() {for (let bullet of bullets) {ctx.fillStyle = "yellow";ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);}
}function checkCollisions() {for (let i = 0; i < enemies.length; i++) {let enemy = enemies[i];if (player.x < enemy.x + enemy.width &&player.x + player.width > enemy.x &&player.y < enemy.y + enemy.height &&player.y + player.height > enemy.y) {gameRunning = false;alert("游戏结束！");return;}for (let j = 0; j < bullets.length; j++) {let bullet = bullets[j];if (bullet.x < enemy.x + enemy.width &&bullet.x + bullet.width > enemy.x &&bullet.y < enemy.y + enemy.height &&bullet.y + bullet.height > enemy.y) {enemies.splice(i, 1);bullets.splice(j, 1);i--;j--;break;}}}
}function keyDownHandler(e) {if (e.key === 'Right' || e.key === 'ArrowRight') {keys.right = true;} else if (e.key === 'Left' || e.key === 'ArrowLeft') {keys.left = true;} else if (e.key === ' ' || e.key === 'Space') {fireBullet();}
}function keyUpHandler(e) {if (e.key === 'Right' || e.key === 'ArrowRight') {keys.right = false;} else if (e.key === 'Left' || e.key === 'ArrowLeft') {keys.left = false;}
}init();
将game.js 和 html文件放到同级目录，运行html文件，就可以玩了
