当前位置： 文江博客文章教程详情

HTML5 游戏开发指南

发布于 2023-01-31 22:27:50 字数 9408 浏览 114 评论 0

那么您想使用 Canvas 和 HTML5 制作游戏吗？ 按照本教程进行操作，您很快就会上路。

本教程假定您至少具有中等水平的 JavaScript 知识。

您可以先 玩游戏 或直接跳转到文章 查看游戏源代码 。

创建画布

为了画东西，我们需要创建一个画布。 因为这是一本 No Tears 指南，所以我们将使用 jQuery。

var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;

var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
                      "' height='" + CANVAS_HEIGHT + "'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');

游戏循环

为了模拟流畅和连续的游戏外观，我们希望更新游戏和重绘屏幕的速度快于人类思维和眼睛所能感知的速度。

var FPS = 30;
setInterval(function() {
  update();
  draw();
}, 1000/FPS);

现在我们可以将更新和绘制方法留空。 重要的是要知道 setInterval()负责定期给他们打电话。

function update() { ... }
function draw() { ... }

你好世界

现在我们有一个游戏循环，让我们更新我们的 draw 方法以在屏幕上实际绘制一些文本。

function draw() {
  canvas.fillStyle = "#000"; // Set color to black
  canvas.fillText("Sup Bro!", 50, 50);
}

专业提示：确保在进行更改后运行您的应用程序。 如果有什么东西坏了，当只有几行变化要看时，追踪起来会容易得多。

这对于固定文本来说非常酷，但是因为我们已经设置了一个游戏循环，所以我们应该能够很容易地让它移动。

var textX = 50;
var textY = 50;

function update() {
  textX += 1;
  textY += 1;
}

function draw() {
  canvas.fillStyle = "#000";
  canvas.fillText("Sup Bro!", textX, textY);
}

现在试一试。 如果你跟着走，它应该在移动，但也会离开之前在屏幕上绘制的时间。 花点时间猜猜为什么会这样。 这是因为我们没有清除屏幕。 所以让我们在 draw 方法中添加一些屏幕清除代码。

function draw() {
  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  canvas.fillStyle = "#000";
  canvas.fillText("Sup Bro!", textX, textY);
}

现在您已经在屏幕上移动了一些文本，您已经完成了一个真正的游戏。 只需加强控制、改进游戏玩法、修饰图形……好吧，这可能是真正游戏的 1/7，但好消息是教程还有更多内容。

创建播放器

创建一个对象来保存播放器数据并负责绘图之类的事情。 在这里，我们使用一个简单的对象字面量来创建一个播放器对象来保存所有信息。

var player = {
  color: "#00A",
  x: 220,
  y: 270,
  width: 32,
  height: 32,
  draw: function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  }
};

我们现在使用一个简单的彩色矩形来代表玩家。 当我们绘制游戏时，我们将清除画布并绘制玩家。

function draw() {
  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  player.draw();
}

键盘控制

使用 jQuery 热键

使跨浏览器的 jQuery Hotkeys 插件 按键处理变得更加容易。 而不是为无法辨认的跨浏览器哭泣 keyCode和 charCode问题，我们可以像这样绑定事件：

$(document).bind("keydown", "left", function() { ... });

不必担心哪些键具有哪些代码的细节是一个巨大的胜利。 我们只是希望能够说出诸如“当玩家按下向上按钮时，做某事”之类的话。 jQuery Hotkeys 可以很好地做到这一点。

球员运动

JavaScript 处理键盘事件的方式完全是事件驱动的。 这意味着没有用于检查键是否关闭的内置查询，因此我们必须使用自己的查询。

您可能会问，“为什么不使用事件驱动的方式来处理键呢？” 好吧，这是因为键盘重复率因系统而异，并且不受游戏循环时间的限制，因此游戏玩法可能因系统而异。 要创建一致的体验，将键盘事件检测与游戏循环紧密集成非常重要。

好消息是我已经包含了一个 16 行的 JS 包装器，它将使事件查询可用。 它称为 key_status.js ，您可以随时通过检查来查询密钥的状态 keydown.left， ETC。

现在我们可以查询按键是否按下，我们可以使用这个简单的更新方法来移动播放器。

function update() {
  if (keydown.left) {
    player.x -= 2;
  }

  if (keydown.right) {
    player.x += 2;
  }
}

来吧，试一试。

您可能会注意到播放器可以移出屏幕。 让我们限制玩家的位置，让他们保持在边界内。 此外，播放器似乎有点慢，所以让我们也提高速度。

function update() {
  if (keydown.left) {
    player.x -= 5;
  }

  if (keydown.right) {
    player.x += 5;
  }

  player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}

添加更多输入也同样容易，所以让我们添加一些射弹。

function update() {
  if (keydown.space) {
    player.shoot();
  }

  if (keydown.left) {
    player.x -= 5;
  }

  if (keydown.right) {
    player.x += 5;
  }

  player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}

player.shoot = function() {
  console.log("Pew pew");
  // :) Well at least adding the key binding was easy...
};

添加更多游戏对象

炮弹

现在让我们真正添加射弹。 首先，我们需要一个集合来将它们全部存储在：

var playerBullets = [];

接下来，我们需要一个构造函数来创建项目符号实例。

function Bullet(I) {
  I.active = true;

  I.xVelocity = 0;
  I.yVelocity = -I.speed;
  I.width = 3;
  I.height = 3;
  I.color = "#000";

  I.inBounds = function() {
    return I.x >= 0 && I.x <= CANVAS_WIDTH &&
      I.y >= 0 && I.y <= CANVAS_HEIGHT;
  };

  I.draw = function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  };

  I.update = function() {
    I.x += I.xVelocity;
    I.y += I.yVelocity;

    I.active = I.active && I.inBounds();
  };

  return I;
}

当玩家射击时，我们应该创建一个子弹实例并将其添加到子弹集合中。

player.shoot = function() {
  var bulletPosition = this.midpoint();

  playerBullets.push(Bullet({
    speed: 5,
    x: bulletPosition.x,
    y: bulletPosition.y
  }));
};

player.midpoint = function() {
  return {
    x: this.x + this.width/2,
    y: this.y + this.height/2
  };
};

我们现在需要将项目符号的更新添加到更新步骤函数中。 为了防止项目符号集合无限期地填满，我们过滤项目符号列表以仅包含活动项目符号。 这也使我们能够移除与敌人相撞的子弹。

function update() {
  ...
  playerBullets.forEach(function(bullet) {
    bullet.update();
  });

  playerBullets = playerBullets.filter(function(bullet) {
    return bullet.active;
  });
}

最后一步是绘制子弹：

function draw() {
  ...
  playerBullets.forEach(function(bullet) {
    bullet.draw();
  });
}

敌人

现在是时候像添加子弹一样添加敌人了。

  enemies = [];

function Enemy(I) {
  I = I || {};

  I.active = true;
  I.age = Math.floor(Math.random() * 128);

  I.color = "#A2B";

  I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
  I.y = 0;
  I.xVelocity = 0
  I.yVelocity = 2;

  I.width = 32;
  I.height = 32;

  I.inBounds = function() {
    return I.x >= 0 && I.x <= CANVAS_WIDTH &&
      I.y >= 0 && I.y <= CANVAS_HEIGHT;
  };

  I.draw = function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  };

  I.update = function() {
    I.x += I.xVelocity;
    I.y += I.yVelocity;

    I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);

    I.age++;

    I.active = I.active && I.inBounds();
  };

  return I;
};

function update() {
  ...

  enemies.forEach(function(enemy) {
    enemy.update();
  });

  enemies = enemies.filter(function(enemy) {
    return enemy.active;
  });

  if(Math.random() < 0.1) {
    enemies.push(Enemy());
  }
};

function draw() {
  ...

  enemies.forEach(function(enemy) {
    enemy.draw();
  });
}

加载和绘制图像

看着所有这些盒子飞来飞去很酷，但是为它们制作图像会更酷。 在画布上加载和绘制图像通常是一种令人泪流满面的体验。 为了避免这种痛苦和痛苦，我们可以使用一个简单的实用程序类。

player.sprite = Sprite("player");

player.draw = function() {
  this.sprite.draw(canvas, this.x, this.y);
};

function Enemy(I) {
  ...

  I.sprite = Sprite("enemy");

  I.draw = function() {
    this.sprite.draw(canvas, this.x, this.y);
  };

  ...
}

碰撞检测

我们让所有这些交易在屏幕上飞来飞去，但它们并没有相互影响。 为了让一切都知道什么时候爆炸，我们需要添加某种碰撞检测。

让我们使用一个简单的矩形碰撞检测算法：

function collides(a, b) {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}

我们要检查几个碰撞：

  1. Player Bullets => 敌舰
  2. 玩家 => 敌舰

让我们创建一个方法来处理我们可以从更新方法调用的冲突。

function handleCollisions() {
  playerBullets.forEach(function(bullet) {
    enemies.forEach(function(enemy) {
      if (collides(bullet, enemy)) {
        enemy.explode();
        bullet.active = false;
      }
    });
  });

  enemies.forEach(function(enemy) {
    if (collides(enemy, player)) {
      enemy.explode();
      player.explode();
    }
  });
}

function update() {
  ...
  handleCollisions();
}

现在我们需要为玩家和敌人添加爆炸方法。 这会将它们标记为移除并添加爆炸。

function Enemy(I) {
  ...

  I.explode = function() {
    this.active = false;
    // Extra Credit: Add an explosion graphic
  };

  return I;
};

player.explode = function() {
  this.active = false;
  // Extra Credit: Add an explosion graphic and then end the game
};

声音

为了完善体验，我们将添加一些甜美的音效。 声音，就像图像一样，在 HTML5 中使用起来可能有些痛苦，但是由于我们神奇的无泪公式 sound.js，声音可以变得超级简单。

player.shoot = function() {
  Sound.play("shoot");
  ...
}

function Enemy(I) {
  ...

  I.explode = function() {
    Sound.play("explode");
    ...
  }
}

虽然 API 现在是无撕裂的，但添加声音是目前使您的应用程序崩溃的最快方法。 声音中断或关闭整个浏览器选项卡的情况并不少见，因此请准备好您的纸巾。

告别

同样，这里是 完整的游戏演示 。 您也可以下载 zip 格式的源代码 。

好吧，我希望你喜欢学习用 JavaScript 和 HTML5 制作简单游戏的基础知识。 通过在正确的抽象级别进行编程，我们可以将自己与 API 中较困难的部分隔离开来，并在面对未来的变化时保持弹性。

参考

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群
更多

你可能也喜欢

使用 jQuery Pjax 做全站异步加载遇到的坑

Mobile-Detect 轻量级的浏览器设备检测 PHP 类

ScrollMagic 神奇的滚动交互动画 jQuery 插件

Tinycon 浏览器的网站图标上显示冒泡的数字

Anime.js 轻量的 JavaScript 动画库

淘宝主图视频和商品链接如何一键下载获取导出？

Slideout.js 侧边栏滑动菜单插件

nanoScrollerJS 基于 jQuery 自定义浏览器滚动条插件

上一篇：

下一篇：

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

叹沉浮

暂无简介

文章
评论
629 人气
发私信
更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文