阅读量:0
要利用HTML5 Canvas制作一个简单的打飞机游戏，首先需要创建一个HTML文件，然后在文件中引入JavaScript代码。以下是一个简单的示例：，，``
html，，，，， canvas {， border: 1px solid black;， }，，，，，，，， var canvas = document.getElementById('gameCanvas');， var ctx = canvas.getContext('2d');，， var player = {， x: canvas.width / 2,， y: canvas.height 50,， width: 50,， height: 50,， speed: 5， };，， var enemy = {， x: Math.random() * (canvas.width 50),， y: 0,， width: 50,， height: 50,， speed: 2， };，， function drawRect(obj) {， ctx.fillStyle = 'green';， ctx.fillRect(obj.x, obj.y, obj.width, obj.height);， }，， function update() {， ctx.clearRect(0, 0, canvas.width, canvas.height);，， player.x += player.speed;， if (player.x > canvas.width) {， player.x = 0;， } else if (player.x< 0)="" {，="" player.x="canvas.width;，" }，，="" enemy.y="" +="enemy.speed;，" if="" (enemy.y=""> canvas.height) {， enemy.x = Math.random() * (canvas.width 50);， enemy.y = 0;， }，， drawRect(player);， drawRect(enemy);，， requestAnimationFrame(update);， }，， update();，，，，，``，，这个示例中，我们创建了一个简单的飞机（绿色矩形）和敌人（另一个绿色矩形）。飞机会自动从右向左移动，当到达画布左侧时会重新从右侧开始。敌人会从画布顶部向下移动，当到达画布底部时会重新从顶部开始，并在水平方向上随机生成位置。利用HTML5 Canvas制作一个简单的打飞机游戏
准备工作
我们需要创建一个HTML文件，并在其中引入一个canvas元素，我们将使用JavaScript来处理游戏逻辑和绘制图形。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF8"> <title>简单打飞机游戏</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="gameCanvas" width="480" height="320"></canvas> <script src="game.js"></script> </body> </html>我们创建一个名为game.js的JavaScript文件，用于编写游戏逻辑。
游戏对象
在游戏中，我们需要创建几个对象：玩家飞机、敌人飞机和子弹，我们可以使用JavaScript类来表示这些对象。
class GameObject { constructor(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; } draw(ctx) { ctx.fillRect(this.x, this.y, this.width, this.height); } } class Player extends GameObject { constructor(x, y, width, height) { super(x, y, width, height); } } class Enemy extends GameObject { constructor(x, y, width, height) { super(x, y, width, height); } } class Bullet extends GameObject { constructor(x, y, width, height) { super(x, y, width, height); } }游戏逻辑
现在我们需要编写游戏的主要逻辑，我们需要初始化游戏对象，然后在游戏循环中更新它们的位置并检测碰撞。
const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); let player = new Player(240, 280, 30, 30); let enemies = []; let bullets = []; let lastEnemySpawnTime = 0; function gameLoop() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 更新玩家位置 player.draw(ctx); // 生成敌人 if (Date.now() lastEnemySpawnTime > 1000) { let enemy = new Enemy(Math.random() * (canvas.width 30), 0, 30, 30); enemies.push(enemy); lastEnemySpawnTime = Date.now(); } // 更新敌人位置并检测碰撞 for (let i = 0; i < enemies.length; i++) { enemies[i].y += 2; enemies[i].draw(ctx); if (enemies[i].y > canvas.height) { enemies.splice(i, 1); i; } else if (isColliding(player, enemies[i])) { alert('游戏结束！'); location.reload(); } } // 更新子弹位置并检测碰撞 for (let i = 0; i < bullets.length; i++) { bullets[i].y = 5; bullets[i].draw(ctx); if (bullets[i].y < 0) { bullets.splice(i, 1); i; } else { for (let j = 0; j < enemies.length; j++) { if (isColliding(bullets[i], enemies[j])) { bullets.splice(i, 1); enemies.splice(j, 1); i; j; } } } } requestAnimationFrame(gameLoop); } function isColliding(obj1, obj2) { return obj1.x < obj2.x + obj2.width && obj1.x + obj1.width > obj2.x && obj1.y < obj2.y + obj2.height && obj1.y + obj1.height > obj2.y; } gameLoop();键盘事件处理
为了让玩家可以控制飞机，我们需要监听键盘事件，并根据按键来移动飞机或发射子弹。
document.addEventListener('keydown', function(event) { switch (event.keyCode) { case 37: // 左箭头键 player.x = 5; break; case 39: // 右箭头键 player.x += 5; break; case 38: // 上箭头键 let bullet = new Bullet(player.x + 10, player.y, 5, 10); bullets.push(bullet); break; } });运行游戏
你可以在浏览器中打开HTML文件，开始玩这个简单的打飞机游戏了，你可以使用左右箭头键来移动飞机，使用上箭头键发射子弹，当敌人撞到你的飞机时，游戏将结束。
FAQs
Q1: 如何增加更多的敌人？
A1: 在游戏循环中，你可以根据需要增加生成敌人的条件，你可以设置一个计数器，每当达到一定数量的敌人被消灭时，就增加新的敌人，你还可以通过调整敌人生成的时间间隔来控制敌人的数量。
| 步骤 | 描述 | 代码示例 |
| | | |
| 1. 创建HTML结构 | 在HTML文件中创建一个canvas元素，用于绘制游戏画面。 | ```html
``` |
| 2. 添加CSS样式 | 为canvas设置背景色，以及可能的样式。 | ```css
#gameCanvas {
backgroundcolor: #000;
``` |
| 3. 初始化Canvas | 在JavaScript中获取canvas元素和其上下文。 | ```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
``` |
| 4. 创建飞机对象 | 定义飞机的属性，如位置、大小、速度等。 | ```javascript
class Plane {
constructor(x, y, width, height, color) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.color = color;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
move(x, y) {
this.x += x;
this.y += y;
}
``` |
| 5. 创建飞机实例并绘制 | 创建飞机对象，并调用draw方法在canvas上绘制。 | ```javascript
const plane = new Plane(350, 500, 50, 50, 'red');
plane.draw();
``` |
| 6. 监听键盘事件 | 监听键盘事件，使飞机可以响应键盘输入移动。 | ```javascript
document.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 37: // 左箭头
plane.move(5, 0);
break;
case 38: // 上箭头
plane.move(0, 5);
break;
case 39: // 右箭头
plane.move(5, 0);
break;
case 40: // 下箭头
plane.move(0, 5);
break;
}
});
``` |
| 7. 创建游戏循环 | 使用requestAnimationFrame来创建一个游戏循环，不断更新飞机的位置并重新绘制。 | ```javascript
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除canvas
plane.draw(); // 重新绘制飞机
requestAnimationFrame(gameLoop); // 请求下一次动画帧
gameLoop();
``` |
| 8. 完成游戏 | 至此，一个简单的打飞机游戏已经完成，玩家可以使用键盘方向键控制飞机移动。 | |
