canvas实现飞机打怪兽射击小游戏的示例代码

下面我会详细讲解“canvas实现飞机打怪兽射击小游戏的示例代码”的完整攻略。

简介

Canvas 是 HTML5 新增的元素，可以通过脚本（通常是 JavaScript）来绘制图形。本文将展示如何使用 Canvas 实现飞机打怪兽射击小游戏。

步骤

第一步：准备工作

首先，需要一个 canvas 元素，在 HTML 中设置宽高，并在 JavaScript 中获取到它的上下文。

<canvas id="game-canvas" width="800" height="600"></canvas>

var canvas = document.getElementById('game-canvas');
var ctx = canvas.getContext('2d');

第二步：绘制背景和飞机

接下来，我们需要绘制游戏区域的背景，并在其中添加一个飞机。

// 绘制背景
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制飞机
var plane = {
  x: 400,
  y: 500,
  width: 50,
  height: 50,
  speedX: 0,
  speedY: 0
};

ctx.fillStyle = '#fff';
ctx.fillRect(plane.x, plane.y, plane.width, plane.height);

在上述代码中，我们首先使用 fillStyle 设置了背景颜色为黑色，并使用 fillRect 绘制背景。接着，我们定义了一个 plane 对象，其中包含了飞机的位置、大小和速度等信息。最后，我们使用 fillStyle 设置飞机的颜色为白色，并使用 fillRect 绘制了一个矩形。

第三步：移动飞机

现在，我们可以通过键盘事件来移动飞机。

// 监听键盘事件
document.addEventListener('keydown', function(event) {
  if (event.keyCode === 37) {
    // 向左移动
    plane.speedX = -5;
  } else if (event.keyCode === 39) {
    // 向右移动
    plane.speedX = 5;
  } else if (event.keyCode === 38) {
    // 向上移动
    plane.speedY = -5;
  } else if (event.keyCode === 40) {
    // 向下移动
    plane.speedY = 5;
  }
});

// 更新飞机位置
function updatePlane() {
  // 更新飞机位置
  plane.x += plane.speedX;
  plane.y += plane.speedY;

  // 限制飞机移动范围
  if (plane.x < 0) {
    plane.x = 0;
  } else if (plane.x > canvas.width - plane.width) {
    plane.x = canvas.width - plane.width;
  }

  if (plane.y < 0) {
    plane.y = 0;
  } else if (plane.y > canvas.height - plane.height) {
    plane.y = canvas.height - plane.height;
  }

  // 绘制飞机
  ctx.fillStyle = '#fff';
  ctx.fillRect(plane.x, plane.y, plane.width, plane.height);
}

// 主循环
function loop() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制背景
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 更新飞机
  updatePlane();

  // 重复执行主循环
  requestAnimationFrame(loop);
}

// 启动游戏
loop();

在上述代码中，我们首先添加了一个键盘事件监听器，用于监听键盘事件，并根据按键的不同来更新飞机的速度。接着，我们定义了一个 updatePlane 函数，用于更新飞机的位置，并限制其移动范围。最后，我们在 loop 函数中调用了 updatePlane 函数，并使用 requestAnimationFrame 来实现主循环。

现在，可以使用左右方向键和上下方向键来控制飞机的移动了。

第四步：添加怪兽并实现射击

最后，我们需要添加怪兽，并实现射击功能。

// 绘制怪兽
var monsters = [];

for (var i = 0; i < 10; i++) {
  monsters.push({
    x: Math.floor(Math.random() * canvas.width),
    y: Math.floor(Math.random() * canvas.height),
    width: 30,
    height: 30
  });
}

function drawMonsters() {
  ctx.fillStyle = '#0f0';

  for (var i = 0; i < monsters.length; i++) {
    var monster = monsters[i];
    ctx.fillRect(monster.x, monster.y, monster.width, monster.height);
  }
}

// 添加子弹
var bullets = [];

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 32) {
    // 发射子弹
    bullets.push({
      x: plane.x + plane.width / 2,
      y: plane.y,
      size: 5,
      speed: 5
    });
  }
});

// 更新子弹
function updateBullets() {
  for (var i = 0; i < bullets.length; i++) {
    var bullet = bullets[i];
    bullet.y -= bullet.speed;

    // 判断子弹是否撞到怪兽
    for (var j = 0; j < monsters.length; j++) {
      var monster = monsters[j];

      if (bullet.x >= monster.x && bullet.x <= monster.x + monster.width && bullet.y <= monster.y + monster.height) {
        // 子弹撞到怪兽了
        bullets.splice(i, 1);
        monsters.splice(j, 1);
        break;
      }
    }

    // 绘制子弹
    ctx.fillStyle = '#f00';
    ctx.fillRect(bullet.x - bullet.size / 2, bullet.y, bullet.size, bullet.size);
  }
}

// 更新怪兽
function updateMonsters() {
  for (var i = 0; i < monsters.length; i++) {
    var monster = monsters[i];

    // 判断怪兽是否撞到飞机
    if (plane.x + plane.width >= monster.x && plane.x <= monster.x + monster.width && plane.y + plane.height >= monster.y && plane.y <= monster.y + monster.height) {
        alert('游戏结束！');
      return;
    }
  }

  // 绘制怪兽
  drawMonsters();
}

// 更新游戏状态
function update() {
  updatePlane();
  updateBullets();
  updateMonsters();
}

// 主循环
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  update();
  requestAnimationFrame(loop);
}

// 启动游戏
loop();

在上述代码中，我们首先添加了怪兽，并使用随机位置、大小和颜色实现了多个怪兽的绘制。接着，我们添加了一个键盘事件监听器，用于监听空格键，并在按下空格键时添加子弹。然后，我们实现了子弹的移动和与怪兽的碰撞检测，并使用 splice 方法从数组中删除已经撞到的子弹和怪兽。最后，我们添加了对怪兽与飞机的碰撞检测，以及游戏结束的提示。

现在，使用键盘的空格键可以发射子弹，击中怪兽后怪兽会消失，如果怪兽撞到了飞机，游戏会结束。

示例说明

示例一

在 updatePlane 函数中，我们通过对飞机的位置进行修改，并使用 fillRect 来实现了飞机的绘制。

function updatePlane() {
  plane.x += plane.speedX;
  plane.y += plane.speedY;

  ctx.fillStyle = '#fff';
  ctx.fillRect(plane.x, plane.y, plane.width, plane.height);
}

示例二

在 updateBullets 函数中，我们使用 for 循环遍历了所有的子弹，并使用 rect 来绘制了子弹的图形。

function updateBullets() {
  for (var i = 0; i < bullets.length; i++) {
    var bullet = bullets[i];
    bullet.y -= bullet.speed;

    ctx.fillStyle = '#f00';
    ctx.fillRect(bullet.x - bullet.size / 2, bullet.y, bullet.size, bullet.size);
  }
}

以上就是“canvas实现飞机打怪兽射击小游戏的示例代码”的完整攻略，希望对你有所帮助。