js飞机大战代码
创建一个简单的飞机大战游戏是一个相对复杂的任务，涉及到HTML、CSS和JavaScript的多个方面。下面我将提供一个非常基础的飞机大战游戏的示例代码，你可以在此基础上进行扩展和优化。
HTML
html复制代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>飞机大战</title> <style> canvas { border: 1px solid black; background-color: #eee; } </style> </head> <body> <canvas id="gameCanvas" width="480" height="640"></canvas> <script src="game.js"></script> </body> </html>
JavaScript (game.js)
javascript复制代码const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); class Plane { constructor(x, y) { this.x = x; this.y = y; this.width = 50; this.height = 30; this.speed = 3; } draw() { ctx.fillStyle = 'blue'; ctx.fillRect(this.x, this.y, this.width, this.height); } update() { this.y -= this.speed; } } class Bullet { constructor(x, y) { this.x = x; this.y = y; this.width = 5; this.height = 15; this.speed = -8; } draw() { ctx.fillStyle = 'red'; ctx.fillRect(this.x, this.y, this.width, this.height); } update() { this.y += this.speed; if (this.y > canvas.height) { bullets.splice(bullets.indexOf(this), 1); } } } let plane = new Plane(canvas.width / 2 - 25, canvas.height - 40); let bullets = []; document.addEventListener('keydown', (e) => { if (e.key === ' ') { bullets.push(new Bullet(plane.x + plane.width / 2 - bullets[0].width / 2, plane.y)); } }); function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); plane.draw(); plane.update(); bullets.forEach(bullet => { bullet.draw(); bullet.update(); }); requestAnimationFrame(gameLoop); } gameLoop();
这个示例中，我们创建了一个简单的飞机和一个子弹类。飞机可以向上移动，当按下空格键时，飞机会发射子弹。游戏循环使用requestAnimationFrame来实现。
这只是一个非常基础的示例，并没有包含敌机、碰撞检测、得分等功能。要创建一个完整的飞机大战游戏，你需要添加更多的功能和优化代码。此外，你可能还需要考虑使用游戏引擎（如Phaser、p5.js等）或框架（如Three.js）来简化开发过程。
