2022年6月7日 tag: JavaScript, ゲーム制作入門

JavaScriptのゲーム作り方【初心者向け・サンプルコード付き】

プログラミング言語のJavaScriptを学習中の方やこれから学ぼうという方の中には

「JavaScriptでゲームを作ってみたい！」

と思っている方もけっこういるんじゃないかと思います。

この記事では初心者にもわかるようにJavascriptを使ったゲームの作り方やどんなゲームが作れるかなどを解説していきます。

JavaScriptでゲーム開発はできる？

JavaScriptはウェブサイト上でアニメーションなどの動きをつけたり、何らかの操作に対してアクションを起こすようなプログラムを作るのに使われているプログラミング言語です。

具体的な例で言うと、メニューボタンを押したらメニューが開いたり、スライドショーの写真が順番に動いたり、GoogleMapの地図をぐりぐり動かしたりなどに使われています。

このようにJavaScriptはウェブサイトに動きをつけるプログラミング言語なので、その動きをゲーム的なことに使えばゲームも作れるのは想像できると思います。

JavaScriptで作ったゲームはブラウザ上で動くのでブラウザゲームやWEBゲームなどと呼ばれます。

JavaScriptのゲームはcanvasに作る

HTML5(HTMLのバージョン5)からcanvasというタグが追加されました。

このcanvasタグは線や図形、画像などを表示して動かすことに特化したエリアをブラウザのページに作成することができます。

canvasはブラウザ上でグラフの表示や動きのある背景の表示などいろいろなところに使われています。

この描画処理に非常に優れたcanvasは当然ゲームにも利用することができます。

JavaScriptでのゲーム開発は基本的にこのcanvasを利用して行います。

HTML/CSSは必要ない

canvasを使ったゲーム開発では他のエンジニア系サイトの記事に書いてあるようなHTMLとCSSの学習は基本的に必要ありません。

canvasでゲームを作る場合はHTMLとCSSを使いません。

※canvasを使わずにHTML要素を使ってゲームを作る場合にはHTML/CSSの学習が必要です。ただし、この方法ではcanvasほど自由にゲームは作れません。

※canvasでゲームを作るにしてもUIだけをHTML/CSSで作る方法もありますが初心者には必要ないと思います。

JavaScriptでどんなゲームが作れる？

canvas上で動作するゲームならアクションゲーム・シューティングゲーム・RPGなど基本的になんでも作ることは可能です。

ゲームパッドに対応したゲームももちろん作ることができます。

WebGLで高速な画像処理が可能に

以前は、JavaScriptはブラウザ上で動作するため直接本体の処理能力を利用できずに処理が遅いと言われていました。

しかし現在はWebGLという非常に高速に画像を処理してくれる機能を使うことができるようになりました。

このWebGLを使えばかなり激しい描画のゲームも作ることができるようになっています。

WebGLは個人で一から扱うのは難しいですが対応しているライブラリを使うと簡単に扱えます。

JavaScriptでもよほど高い処理能力を要求されるようなゲームでない限りはどんなゲームでも作ることができるようになっています。

JavaScriptで作られたゲームが遊べるサイト

筆者自身JavaScriptでゲームを作って自分のサイトで公開しています。ブラウザゲームでは珍しいアクションゲームやシューティングゲームをたくさん作っています。

どんなゲームが作れるのか気になる方や、この記事を疑っている方は一度私のサイトでゲームを遊んでいただけると良いかと思います。

ウェブゲームセンターコスモ

ウェブゲームセンターコスモ - ブラウザで遊べる無料ゲーム

https://wgc-cosmo.com

ブラウザで遊べる無料ゲームのサイト。アクション・シューティング・パズル・脳トレなど気軽に楽しめるミニゲームがいろいろ！すべて個人開発のオリジナルゲーム！スマホ・タブレット・PCで遊べるよ！

サイト自体も面白く見せるためにJavaScriptを使ってアニメーションなどいろいろ仕掛けを入れているのでその辺も意識して見てもらえると嬉しいです(普通のサイトよりは頑張っている自信ある！！)。

他にもJavaScriptで作られたゲームを遊べるサイトを私のゲームサイトのリンク集ページにリンクをたくさん載せています。

企業・個人いろいろなサイトがいろんなゲームを公開しているので遊んでみてください。

※サイトを訪れるのが面倒な方はサイドバーにゲームを埋め込んでいるので遊んでみてください(数種類のゲームからランダムで表示されます。スマホでは非表示になってます)。

JavaScriptでゲームを作るメリット・デメリット

JavaScriptでゲームが作れるのはわかったけれど、そもそもJavaScriptでゲームを作るとなにか良いことあるの？

と考える方もいると思うのでJavaScriptで作るメリット・デメリットを解説します。

他の言語と比べて学習難度が低い

JavaScriptはプログラミング言語としては学習難度が他の言語よりも比較的低くく入門者向きと言われています。

変数の型の扱いが厳格でなかったりいろいろ最初に躓きやすい部分が緩い設定になってたりします(良くも悪くもって感じではあるけど)。

また、ブラウザ上で動作するため開発環境の構築もほとんど必要なくテキストエディターさえあれば始められる手軽さも初心者向きと言えます。

しかし、初心者向けだと言っても「他の言語と比べて初心者向け」なだけであって決して簡単ではないです。

簡単だと勘違いして取り掛かると挫折するので気を付けてください。

スマホ・タブレット・PCで遊べる

JavaScriptはブラウザ上で動くプログラミング言語なのでJavaScriptで作ったゲームはブラウザがあれば遊べます。

つまりパソコンでもスマホでもandroidでもiPhoneでもタブレットでもブラウザがあれば関係なく遊ぶことができます。

本来であればそれぞれの機種向けに開発しなければならないものが、ブラウザ上で動くJavaScriptなら一つで済むわけです。

これがJavaScriptでゲームを作る最大のメリットと言って良いと思います。

スマホアプリにすることもできる

JavaScriptで開発したゲームはブラウザ上で動きます。

一見スマホアプリとは全く無縁のようですが、実はブラウザ上で動くならブラウザの機能込みでアプリ化してしまえばスマホアプリにすることができます。

そのような形で作られたアプリをハイブリッドアプリと言います。

JavaScriptでゲームを作ってから「やっぱりアプリにもしたいな」と思ってもハイブリッドアプリにすれば一からスマホアプリを開発しなおす必要はありません。

このハイブリッドアプリを簡単に作れるようにしてくれているサービスとしてMonacaがあります。

ja.monaca.io

Monaca - すべての人にアプリ開発を

https://ja.monaca.io

ハイブリッドアプリを作るには本来は専門の知識が必要ですがMonacaを使えばさっくり出来てしまいます。

JavaScriptで作ったゲームをMonacaでスマホアプリにする方法はこちらの記事に書いています。

いんわんのブログ

2019.05.16

monacaでブラウザゲームからゲームアプリを作る方法

https://inwans.com/change-to-application

JavaScriptなどで作ったブラウザゲームをスマホアプリ化する方法があるのでご紹介。今回はenchant.jsでの場合の紹介ですがJavaScriptで作ったゲームなら同じようにできると思います。ゲームは先にブラウザで遊べるように作っておいてそれをMonacaに取り込んでスマホアプリにする感じです。「ちょ、待てよ。そもそもブラウザゲームってどう作るんだ？」って方はこちらの記事をどうぞ('ω')ノ Monacaとは？Monacaというハイブリッドアプリを作れるサービスがあります。ハイブリッドアプリとは基本的にウェブの...

デメリット

最後にデメリットも解説しておきます。

一つは処理能力では絶対にアプリやPCゲームに劣ります。

WebGLを使えば高速に描画できると言っても同じレベルではないです。

ものすごくキレイなグラフィックでバリバリ動くようなゲームが作りたいのであれば他の開発環境で作りましょう。

もう一つのデメリットは収益化が難しいこと。

ブラウザゲームではアプリのような広告(Googleの広告)をゲーム内に入れることができません(法人はできるが個人ではできない)。

収益を第一に考えているのであればやはり他の開発環境で作りましょう。

JavaScriptでゲームが作れるおすすめの学習本

初心者の方向けにJavaScriptの学習をしながらゲームも作れてしまうおすすめの本を紹介します。

現在はネットで検索すればゲームの作り方の情報はある程度ありますが、内容の濃さや充実度はやっぱり本の方が圧倒的です。

そして本に収録されているサンプルプログラムはとても参考になる物が多いです。

できるキッズ子どもと学ぶ JavaScriptプログラミング入門

子供と保護者が一緒にプログラミングを学ぶようなコンセプトで書かれたJavaScriptの教則本です。

子供でも分かりやすいように書かれているのでJavaScriptの学習本の中では一番優しいと思います。

優しく書かれているからと言って内容が薄いなんてことはなく、本の後半では落ちものパズル(テ〇リス)を本格的に作っています。

本のほぼ半分のページ数を使って落ちものパズルの作り方を解説しているのでとても参考になります。

これから初めてプログラミングを始める方はまずこの本がおすすめです。

つくって楽しいJavaScript入門身近な不思議をプログラミングしてみよう

ゲーム関係の内容の本ではないですが、扱っている内容がゲームにも役に立ちそうなものがいっぱいある面白い本です。

プログラムで図形を描いたり色を塗ったり音を作って鳴らしたりなどゲーム開発に近い面白いことがいろいろ載っています。

言葉では説明しづらいですが、本を開くととても興味をそそられる内容で溢れています。

ゲームで学ぶJavaScript入門

JavaScriptを基本から学びつつ、ゲームまで作れてしまう内容の濃いお得な本です。

サンプルに収録されているゲームプログラムはゲームライブラリを使わず100%素のJavaScriptで作られています。

サンプルプログラムのクオリティも非常に良くとても参考になります。

ただ、一つ難を言えばかなり濃い内容を一冊にまとめているため初心者には説明が駆け足に感じてちょっと難しいかもしれません。

もう一冊JavaScriptの優しい解説書を用意して併用して学ぶとちょうど良いと思います。

著者の田中賢一郎さんはこの本のほかに2冊JavaScriptのゲーム関連の本を出しています。

ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング

JavaScriptゲームプログラミング　知っておきたい数学と物理の基本

ゲームアルゴリズムまるごと図鑑

人気の7つのジャンルのゲームを題材にアルゴリズムの解説をしてくれている欲張りな本です。

サンプルプログラムはとてもクオリティが高くかっこいいのでモチベーションが上がります。

ただし、初心者にとってちょっとハードルが高いのである程度JavaScriptを理解していないと難しいと思います。

JavaScriptを勉強しながら数年かけて理解するつもりで、焦らずにじっくり時間をかけてやっていくと良いと思います。

戦略シミュレーションゲームの作り方

戦略シミュレーションゲームに的を絞った解説本です。

ゲームエンジンにenchant.jsを使っているため敬遠されそうですが、内容がすごく濃くとても参考になります。

サンプルプログラムもenchant.jsとは思えないくらいクオリティが高く素晴らしいです。

戦略シミュレーションゲームの作り方の本がそもそも珍しいと思うので持っておいて損は無いと思います。

JavaScriptのおすすめゲーム開発用ライブラリ

JavaScriptだけで一からすべてをプログラミングしてゲームを作っていくことはもちろん可能ですが、それはあまりにも大変です。

JavaScriptにはゲームを作るためのライブラリ(またはゲームエンジン、フレームワークと呼ばれてたりする)というものがいくつか公開されていて無料で使うことができます。

これらのライブラリはゲーム開発で必要な基本的なプログラムをあらかじめ作ってくれているので効率よく開発を進めることができます。

基本的にはこれらのライブラリを使ってゲームを作ります。

ではJavaScriptのゲーム開発向けのおすすめライブラリをいくつか紹介します。

enchant.js

enchant.jsはもうかなり古いのですが一時期とても人気があったゲームエンジンです。

現在は更新が停止してしまい公式サイトも無くなってしまいましたが今でも使うことはできます。

とても人気があったためネット上に多くの情報が残っているので初心者でも独学で調べて作りやすいです。

古いゲームエンジンなのでスルーされがちですがJavaScriptで初めてゲームを作るなら一番おすすめです。

筆者も最初はこのenchant.jsから入りました。

筆者がenchant.jsで作ったゲーム ▷ コスモファイター

enchant.jsについて筆者が試行錯誤したすべてをまとめた記事があるので良ければ参考にしてください。

いんわんのブログ

2018.10.13

【enchant.js】ゲームの作り方【サンプルまとめ】

https://inwans.com/enchantjs-useful-techniques

PixiJS

ブラウザ上で高速に画像を描画できるWebGLという技術を使って画像を描画してくれる機能を持った2D描画に特化したライブラリです。

ゲーム用ライブラリではないため必要な部分を自分で作らなくてはいけませんがとても扱いやすいです。

音楽再生用のpixi-sound.jsも公開されていて一緒に使うことができます。

筆者は現在PixiJSを使ってゲームを作っています。

筆者がPixiJSで作ったゲーム ▷ 連射ソルジャー

PixiJSの基本的な使い方はこちらの記事に書いてあります。

いんわんのブログ

2021.08.29

pixi.jsの基本的な使い方をまとめてみた【PixiJS入門】

https://inwans.com/basic-pixijs

PixiJSは2Dの描画に特化したJavaScriptのライブラリです。WebGLという技術が使われていて画像の描画処理が高速に行えるようになっています。 PixiJSを使えばサイトにかっこいい演出を入れたり、かっこいいWEBアプリ作ったり、かっこいいゲーム作ったりできます(語彙力。。)。この記事では初めてPixiJSを使うときに知っておくと役に立ちそうな基本的な使い方を一通り駆け足で解説します。音楽の再生ができるpixi-sound.jsについても少し説明します。ちなみに筆者は個人でブラウザゲームを作って公開しています。2020年...

phaser.js

上記のpixi.jsをコアに作られたゲームエンジンです。

オープンソースで開発されていて無料で使うことができます。

JavaScriptのゲームエンジンとしては世界で一番利用されているらしいのですが国内での情報はかなり少ないように思います。

phaser.io

Phaser - A fast, fun and free open source HTML5 game framework

https://phaser.io

Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

JavaScriptのゲーム開発環境を作る

実際にJavaScriptでゲームを作るための準備をしましょう。

JavaScriptの開発環境はとても簡単でプログラミング用のテキストエディターとブラウザがあればOKです。

テキストエディターを用意する

JavaScriptはwindowsのメモ帳でも書けますが専用のテキストエディターがあった方が作業が圧倒的に楽になります。

最近はVisual Studio Codeというエディターが人気のようなのでこれを使いましょう。

azure.microsoft.com

Visual Studio Code – コードエディター | Microsoft Azure

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

ほぼすべての言語に対応し、任意の OS で動作する強力なコードエディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

ブラウザを用意する

ブラウザはwindowsならChromeかEdge、Macならsafariを使ってください。

他のブラウザでもほとんど同じに動作しますが、ごくまれに挙動が違うことがあります。

とりあえず一番利用者が多いブラウザで開発しましょう。

ファイルの構成と起動の仕方

JavaScriptはウェブページ上で起動するので簡単なHTMLファイルを作ります。

名前はindex.htmlなど「○○.html」の形になっていればOKです。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <title>サンプル</title>
    <meta charset="utf-8">
    <script src="main.js"></script>
</head>
<body>
    <canvas id="canvas" style="background-color: black;"></canvas>
</body>
</html>

<canvas>の部分にゲームが表示されます。

JavaScriptのプログラムは○○.js(例ではmain.js)というファイルを作ってそこに書いていきます。

このindex.htmlとmain.jsを一つのフォルダに入れて管理してください。

そして起動するときはindex.htmlをブラウザにドラッグ＆ドロップすると起動します。

ローカルサーバー

使うライブラリによってはローカルサーバーが必要なものがあります。

上で紹介したテキストエディターのVisual Studio Codeにローカルサーバーの機能を追加できるプラグインがあるのでそれを使うと楽にできます。

サンプルプログラム集

ちょっとしたサンプルプログラムをいくつか紹介します。

JavaScriptなのでゲーム画面で右クリックからソースを見ればソースコードも全部見ることができます。

ライブラリを使ったミニゲームのサンプルプログラム

ライブラリを使ったミニゲームのサンプルプログラムのです。

enchant.js

▷▷ enchant.jsでのランゲーム作り方

enchant.jsのいろいろなサンプルをまとめた記事もあります ▷ enchant.jsのサンプルまとめ

pixi.js

▷▷ PixiJSのゲームエンジンとサンプル

▷▷ タップゲームの作り方

▷▷シーン切り替えと遷移演出の作り方

pixi.jsについての記事一覧はこちら ▷ pixi.js記事一覧

JavaScript

▷▷ キー入力で操作できるようにする

▷▷ バーチャルパッドの作り方

▷▷ ゲームパッドで操作できるようにする

フルスクラッチのサンプルプログラム

ライブラリを使わない素のJavaScriptだけで作っているシューティングゲームの簡単なサンプルプログラムです。

すべてを自分でプログラムしなくてはいけないので見た目が地味な割にプログラムは複雑です。

初心者向けではありませんが、なんとなくでも仕組みが分かっているとゲームを作るときに役立ちます。

簡単なフレーム更新プログラム

まずは簡単なフレーム更新プログラムを作ってみました。

フレーム更新プログラムを見る

ソースコードはこんな感じです。

var canvas, ctx;
var x = 0, y = 0, vx = 1, vy = 1;
//初期処理
function init(){
    canvas = document.getElementById("canvas");
    canvas.width = 640;
    canvas.height = 900;
    ctx = canvas.getContext("2d");//コンテキスト
    
    requestAnimationFrame(update);//フレーム処理のお知らせを送る
}
//四角を描く
function drawRect(x, y, w, h){
    ctx.fillStyle = "white";
    ctx.fillRect(x, y, w, h);
}
//画面描画処理
function render(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);//画面をクリア(前の画面描画を削除)
    x += vx;
    y += vy;
    if(x >= canvas.width - 64){
        vx = -1;
    }else if(x <= 0){
        vx = 1;
    }
    if(y >= canvas.height - 64){
        vy = -1;
    }else if(y <= 0){
        vy = 1;
    }
    drawRect(x, y, 64, 64); 
}
//更新処理
function update(){
    render();
    requestAnimationFrame(update);//フレーム処理のお知らせを送る
}
//開始
window.onload = function(){
    init();
}

このなかで大事なのはrequestAnimationFrameというメソッドです。

これはおよそ60FPSになるような一定の間隔で引数に渡した関数を呼び出してくれるようです。

ただし、requestAnimationFrameは一回こっきりしか働いてくれないようで、ずっと更新処理をし続けるには毎回requestAnimationFrameを呼ぶ必要があるようです。

画面が更新されていても何も表示されていなければわからないので四角形を表示させて移動させてみました。DVDプレーヤーのアレみたいなやつを作ってみました。

角に行ったら盛り上がってください(外国で流行っているらしいです)。

仮のキャラを表示して作ってみる

とりあえず画面の更新処理さえできてしまえばもうゲームは出来るはずです。

ってことで作ってみたのがこちらです　→　サンプルプログラムを見る

かなり簡素ではありますが一応シューティングゲームになってます。

プログラムはこんな感じでやってみました。

var SCREEN_WIDTH = 640;//画面幅
var SCREEN_HEIGHT = 900;//画面高さ
var core, player, bullet, enemy;

class Chara{//キャラクタークラス
    constructor(w, h){
        this.x = 0;
        this.y = 0;
        this.width = w;
        this.height = h;
    }
    render(){
        drawRect(core.ctx, this.x, this.y, this.width, this.height);
    }
}
class Bullet extends Chara{//弾クラス
    constructor(w, h){
        super(w, h);
        this.y = -this.height;
    }
    move(){
        this.y -= 10;
        if(this.y < -this.height){
            this.x = player.x + (player.width - this.width) / 2; 
            this.y = player.y;
        }
    }
}
class Player extends Chara{//プレイヤークラス
    constructor(w, h){
        super(w, h);
        this.x = 300;
        this.y = 500;
    }    
}
class Enemy extends Chara{//敵クラス
    constructor(w, h){
        super(w, h);
        this.x = Math.floor(Math.random() * (SCREEN_WIDTH - this.width));
        this.y = -this.height;
    } 
    move(){
        this.y += 2;
        if(this.y > SCREEN_HEIGHT){
            this.x = Math.floor(Math.random() * (SCREEN_WIDTH - this.width));
            this.y = -this.height;
        }
    }
}
class Core{//ゲーム基幹クラス
    constructor(){
        this.canvas = document.getElementById("canvas");
        this.canvas.width = SCREEN_WIDTH;
        this.canvas.height = SCREEN_HEIGHT;
        this.ctx = this.canvas.getContext("2d");//コンテキスト
        
        this.canvas.addEventListener("mousedown", (e) => {//マウスダウン
            this.isMouseDown = true;
            player.px = e.x;
            player.py = e.y;
        });
        this.canvas.addEventListener("mouseup", (e) => {//マウスアップ
            this.isMouseDown = false;
        });
        this.canvas.addEventListener("mousemove", (e) => {//マウス移動
            if(!this.isMouseDown)return;
            player.x += e.x - player.px;
            player.y += e.y - player.py;
            player.px = e.x;
            player.py = e.y;
        });
        requestAnimationFrame(()=>{this.update();});//フレーム処理のお知らせを送る
    }
    update(){//更新処理
        requestAnimationFrame(()=>{this.update();});//フレーム処理のお知らせを送る
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);//画面をクリア(前の画面描画を削除)
        this.enterframe();//フレーム処理
        this.render();//描画処理
    }
    render(){//描画処理
        enemy.render();
        player.render();
        bullet.render();
    }
    enterframe(){//フレーム処理
        bullet.move();
        enemy.move();
        var r1 = bullet.width / 2;
        var r2 = enemy.width / 2;
        if(circleCollision(bullet.x + r1, bullet.y + r1, r1, enemy.x + r2, enemy.y + r2, r2)){
            enemy.y = SCREEN_HEIGHT;
            bullet.y = -100;
        }
    }
}
function drawRect(ctx, x, y, w, h){//四角を描く
    ctx.fillStyle = "white";
    ctx.fillRect(x, y, w, h);
}
function circleCollision(x1, y1, r1, x2, y2, r2){//当たり判定
    if((x1-x2) * (x1-x2) + (y1-y2) * (y1-y2) <= (r1+r2) * (r1+r2)){
        return true;
    }
    return false;
}
//開始
window.onload = function(){
    core = new Core();
    enemy = new Enemy(64, 64);
    player = new Player(64, 64);
    bullet = new Bullet(16, 16);
}

ゲームにするためには操作が必要なのでmousedown, mouseup, mousemoveを使って操作できるようにしました。

ただ、これはマウスでの操作にしか反応してくれません。スマホなどのタッチでの操作はまた別に作る必要があります。

一応シューティングゲームなのでちゃんと当たり判定も付けています。

ゲームで使う当たり判定の作り方はこちらの記事にまとめています。

いんわんのブログ

2021.04.16

ゲームで使う基本の当たり判定の作り方【初心者向け】

https://inwans.com/collision-basic

ゲーム画面に表示されるキャラクターや背景はただの画像なので実際に衝突するということはありません。当たるかどうかはプログラムでチェックしています。そのプログラムのことを当たり判定と言います。当たり判定はゲームの面白さを左右する当たり判定はキャラクターの持つ座標をもとに点や線、円や四角など一定の形で判定されています。一定の形で判定されるため画像との相性によっては「うそー！あたってないやん！(´;ω;｀)」みたいな見た目は当たってないけどプログラム上当たるということも起こったりします。 ...

画像を読み込んで表示する

最後にキャラクターの画像を表示させてみます→サンプルを見る

画像はプレイヤー、敵、弾の3つ用意します。

大きさはプレイヤー、敵が64×64、弾が16×16です。それらをimagesフォルダに入れてください。

画像の読み込み処理

まずは使う画像をASSETSオブジェクトにまとめて入れておきます。

それぞれの画像の名前とファイルの場所を入れます。

var ASSETS = {
    'img_player': 'images/player.png',
    'img_enemy': 'images/enemy.png',
    'img_bullet': 'images/bullet.png',
};

画像の読み込みなんですが、まず画像を扱うにはImageオブジェクトを作成してそこに画像を読み込んで使います。

var image = new Image();
image.src = '画像ファイルの場所';
image.onload = function() {//読み込んだよ
  
}

基本、上記のような感じで書きます。

onloadメソッドは画像の読み込みが完了したら発生するイベントです。大きな画像だったりすると読み込むのに時間がかかったりするので必要な処理は読み込みが終わってからする必要があります。

ただ、ゲームだとたくさん画像を扱うので全部読み込んだかどうかの確認が必要です。

なので、Coreクラスに以下のような処理をつけました。引数のdataはASSETSです。画像はすべてCoreクラスのassetsオブジェクトに読み込みます。

preload(data){
    var length = Object.keys(data).length;
    var count = 0;
    for(let key in data) {
        this.assets[key] = new Image();
        this.assets[key].src = data[key];
        this.assets[key].onload = ()=>{
            if(++count == length){//全部読み込んだ
                this.onload();//読み込み完了後の処理
            }
        }
    }
}

画像の枚数をカウントしておいて、読み込みの完了した数が画像の枚数と同じになればCoreクラスのonloadメソッドを実行します。

それを追加したCoreクラスがこんな感じです。

class Core{//ゲーム基幹クラス
    constructor(){
        this.canvas = document.getElementById("canvas");
        this.canvas.width = SCREEN_WIDTH;
        this.canvas.height = SCREEN_HEIGHT;
        this.ctx = this.canvas.getContext("2d");//コンテキスト
        this.assets = [];//アセット保存用配列
        
        this.canvas.addEventListener("mousedown", (e) => {//マウスダウン
            this.isMouseDown = true;
            player.px = e.x;
            player.py = e.y;
        });
        this.canvas.addEventListener("mouseup", (e) => {//マウスアップ
            this.isMouseDown = false;
        });
        this.canvas.addEventListener("mousemove", (e) => {//マウス移動
            if(!this.isMouseDown)return;
            player.x += e.x - player.px;
            player.y += e.y - player.py;
            player.px = e.x;
            player.py = e.y;
        });
    }
    //画像のロード
    preload(data){
        var length = Object.keys(data).length;
        var count = 0;
        for(let key in data) {
            this.assets[key] = new Image();
            this.assets[key].src = data[key];
            this.assets[key].onload = ()=>{
                if(++count == length){//全部読み込んだ
                    this.onload();//読み込み完了後の処理
                }
            }
        }
    }
    update(){//更新処理
        requestAnimationFrame(()=>{this.update();});//フレーム処理のお知らせを送る
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);//画面をクリア(前の画面描画を削除)
        this.enterframe();//フレーム処理
        this.render();//描画処理
    }
    render(){//描画処理
        enemy.render();
        player.render();
        bullet.render();
    }
    enterframe(){//フレーム処理
        bullet.move();
        enemy.move();
        var r1 = bullet.width / 2;
        var r2 = enemy.width / 2;
        if(circleCollision(bullet.x + r1, bullet.y + r1, r1, enemy.x + r2, enemy.y + r2, r2)){
            enemy.y = SCREEN_HEIGHT;
            bullet.y = -100;
        }
    }
}

読み込み完了後にゲームが始動

画像の読み込みが完了したらゲームプログラムが動き始めるようにします。

core.onloadメソッドに読み込み完了後の処理を記述します。ここで初めてrequestAnimationFrameを使います。

この後は自動で更新処理が行われるようになります。

//開始
window.onload = function(){
    core = new Core();
    core.preload(ASSETS);
    core.onload = function(){
        enemy = new Enemy(64, 64);
        player = new Player(64, 64);
        bullet = new Bullet(16, 16);
        requestAnimationFrame(()=>{core.update();});//フレーム処理のお知らせを送る
    }
}

画像を描画する

Charaクラスのレンダーメソッドに画像を描画するdrawImageメソッドを記述します。

class Chara{//キャラクタークラス
    constructor(w, h){
        this.x = 0;
        this.y = 0;
        this.width = w;
        this.height = h;
    }
    render(){
        core.ctx.drawImage(this.image,　0,　0,　this.width, this.height, this.x, this.y, this.width, this.height); 
    }
}

キャラクターはすべてこのCharaクラスを継承しているのでこの一か所変更するだけでOKです。

これで画像を使ったゲームになります。