プログラミング言語のJavaScriptを学習中の方やこれから学ぼうという方の中には
「JavaScriptでゲーム開発してみたい！」
と思っている方もけっこういるんじゃないかと思います。
この記事ではJavascriptを使ったゲームの作り方やどんなゲームが作れるかなどを解説していきます。
一番最後には実際のゲームのサンプルコードもたくさん紹介しているので好きにコピペして改造して遊んでください。
JavaScriptでゲームは作れる？
JavaScriptはウェブサイト上でアニメーションなどの動きをつけたり、何らかの操作に対してアクションを起こすようなプログラムを作るのに使われているプログラミング言語です。
JavaScriptで作ったゲームはブラウザ上で動くのでブラウザゲームやWEBゲームなどと呼ばれます。
どんなゲームが作れるの？
canvas上で動作するゲームならアクションゲーム・シューティングゲーム・RPGなど基本的になんでも作ることは可能です。
ゲームパッドに対応したゲームももちろん作ることができます。
ゲーム開始時にロードすることを考えるとデータ量が小さくなる低解像度なレトロ風なミニゲームなどが相性が良いと思います。
WebGLで高速な画像処理が可能に
以前は、JavaScriptはブラウザ上で動作するため直接本体の処理能力を利用できずに処理が遅いと言われていました。
しかし現在はWebGLという非常に高速に画像を処理してくれる機能を使うことができるようになりました。
このWebGLを使えばかなり激しい描画のゲームも作ることができるようになっています。
WebGLは個人で一から扱うのは難しいですが対応しているライブラリを使うと簡単に扱えます。
JavaScriptでもよほど高い処理能力を要求されるようなゲームでない限りはどんなゲームでも作ることができるようになっています。
JavaScriptでゲームを作るメリット・デメリット
JavaScriptでゲームが作れるのはわかったけれど、そもそもJavaScriptでゲームを作るとなにか良いことあるの？
と考える方もいると思うのでJavaScriptで作るメリット・デメリットを解説します。
スマホ・タブレット・PCで遊べる
JavaScriptはブラウザ上で動くプログラミング言語なので作ったゲームはブラウザがあれば遊べます。
つまりパソコンでもスマホでもandroidでもiPhoneでもタブレットでもブラウザがあれば関係なく遊ぶことができます。
本来であればそれぞれの機種向けに開発しなければならないものが、ブラウザ上で動くJavaScriptなら一つで済むわけです。
作ったゲームをウェブサイトに上げるだけでいろんな機種で遊ぶことができます。
これがJavaScriptでゲームを作る最大のメリットと言って良いと思います。
スマホアプリにすることもできる
JavaScriptで開発したゲームはブラウザ上で動きます。
一見スマホアプリとは全く無縁のようですが、実はブラウザ上で動くならブラウザの機能込みでアプリ化してしまえばスマホアプリにすることができます。
そのような形で作られたアプリをハイブリッドアプリと言います。
ゲームを作ってから「やっぱりアプリにもしたいな」と思ってもハイブリッドアプリにすれば一からスマホアプリを開発しなおす必要はありません。
このハイブリッドアプリを簡単に作れるようにしてくれているサービスとしてMonacaがあります。
ハイブリッドアプリを作るには本来は専門の知識が必要ですがMonacaを使えばさっくり出来てしまいます。
JavaScriptで作ったゲームをMonacaでスマホアプリにする方法はこちらの記事に書いています。
デメリット
最後にデメリットも解説しておきます。
一つは処理能力では絶対にアプリやPCゲームに劣ります。
WebGLを使えば高速に描画できると言っても同じレベルではないです。
ものすごくキレイなグラフィックでバリバリ動くようなゲームが作りたいのであれば他の開発環境で作りましょう。
もう一つのデメリットは収益化が難しいこと。
ブラウザゲームではアプリのような広告(Googleの広告)をゲーム内に入れることができません(法人はできるが個人ではできない)。
収益を第一に考えているのであればやはり他の開発環境で作りましょう。
JavaScriptのゲーム開発向けライブラリ
JavaScriptだけで一からすべてをプログラミングしてゲームを作っていくことはもちろん可能ですが、それはあまりにも大変です。
JavaScriptにはゲームを作るためのライブラリ(またはゲームエンジン、フレームワークと呼ばれてたりする)というものがいくつか公開されていて無料で使うことができます。
これらのライブラリはゲーム開発で必要な基本的なプログラムをあらかじめ作ってくれているので効率よく開発を進めることができます。
基本的にはこれらのライブラリを使ってゲームを作ります。
ではJavaScriptのゲーム開発向けのおすすめライブラリをいくつか紹介します。
enchant.js
enchant.jsはもうかなり古いのですが一時期とても人気があったゲームエンジンです。
現在は更新が停止してしまい公式サイトも無くなってしまいましたが今でも使うことはできます。
とても人気があったためネット上に多くの情報が残っているので初心者でも独学で調べて作りやすいです。
古いゲームエンジンなのでスルーされがちですがJavaScriptで初めてゲームを作るなら一番おすすめです。
筆者も最初はこのenchant.jsから入りました。
筆者がenchant.jsで作ったゲーム ▷ コスモファイター
PixiJS
ブラウザ上で高速に画像を描画できるWebGLという技術を使って画像を描画してくれる機能を持った2D描画に特化したライブラリです。
ゲーム用ライブラリではないため必要な部分を自分で作らなくてはいけませんがとても扱いやすいです。
音楽再生用のpixi-sound.jsも公開されていて一緒に使うことができます。
筆者は現在PixiJSを使ってゲームを作っています。
筆者がPixiJSで作ったゲーム ▷ 連射ソルジャー
PixiJSの基本的な使い方はこちらの記事に書いてあります。
phaser.js
上記のpixi.jsをコアに作られたゲームエンジンです。
オープンソースで開発されていて無料で使うことができます。
JavaScriptのゲームエンジンとしては世界で一番利用されているらしいのですが国内での情報はかなり少ないように思います。
JavaScriptのゲーム開発環境を作る
※追記＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
オンラインエディタのCodePenでゲーム作る方法書きました。
CodePen上で筆者のサンプルをベースにゲームを作ることができます。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝追記終わり＝＝
実際にJavaScriptでゲームを作るための準備をしましょう。
JavaScriptの開発環境はとても簡単でプログラミング用のテキストエディターとブラウザがあればOKです。
テキストエディターを用意する
JavaScriptはwindowsのメモ帳でも書けますが専用のテキストエディターがあった方が作業が圧倒的に楽になります。
最近はVisual Studio Codeというエディターが人気のようなのでこれを使いましょう。
ブラウザを用意する
ブラウザは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ゲームサンプルコード集
JavaScriptで作られたミニゲームなどの簡単なサンプルコード集です。すべて当サイトのオリジナルです。
カテゴリーページ(ゲームサンプルコード集)にもまとめているのでそちらからでも見れます(※カテゴリーページはJavaScriptだけではないです)。
フルスクラッチのサンプルコード
素のJavaScriptだけでフルスクラッチで作ったゲームのサンプルです。
▷ 神経衰弱(codepen)
ゲームに使う操作入力関連のサンプルです。三部作になってます。
enchant.jsを使ったゲームのサンプルコード
enchant.jsを使ったゲームの作り方のサンプルです。
PixiJSを使ったゲームのサンプルコード
PixiJSを使ったゲームの作り方です。
enchant.jsを真似て作ったPixiJSの自作ゲームエンジン「p94e.js」をベースに作っています。
