HTML5 を使ったシンプルな 2D ゲームの作り方ハンズオン

(※)この記事は monoe's blog の「HTML5 を使ったシンプルな 2 D ゲームの作り方」内容を ECMA Script 2016 の機能を加味して書き直したものです。

概要

---

HTML5 を使用したゲーム開発は、Canvas、SVG を使用した 2D ゲーム、WebGL を使用した 3D CG ゲームなどがありますが、このハンズオンでは、入門者向けに Canvas を使用したシンプルな 2D ゲームを開発し、JavaScript を使用したゲーム開発の基礎について学びます。

開発するゲーム

空から降って来る雪の結晶を雪だるまがキャッチするゲームです。

これを作成することにより Canvas でのアニメーションとキーボード、タッチによるスプライト(ゲームのキャラクター)の操作、当たり判定といったゲームの基本的なことを学ぶことができます。

要件

---

このラボを完了するには、以下のツールが必要です。　

• 以下のいずれかの最新の Web ブラウザー
  • Microsoft Edge
  • Google Chrome
  • Mozilla Firefox
  • Apple Safari
• Visual Studio Code
• Node.js
• ngrok

ハンズオン

---

1. 開発環境の準備とプロジェクトの作成
2. Canvas への画像のロード
3. 基本的なアニメーションの実装
4. 矢印キーとタッチによる制御
5. 当たり判定
6. 複数 Sprite の生成とランダムな動作
7. ヒット時の画像の切り替えと効果音の実装
8. ルールの追加
9. Progressive Web App 化