どうも、もぎーです。

最近iPhoneの電源が付かなくなるという故障に遭遇したのですが、Apple Careのおかげで無償交換してもらえました。

ただ2要素認証系は全滅したので日頃からスマホロストには備えておきましょう。

 

さて、タイトルにある通りですが、簡単にブラウザで動くゲームを作ってみようと思います。

ただの思いつきです。ゲーム内容はカービィ64のフルーツ拾うやつみたいな感じです。

 

アイコンの画像は好きな画像を使ってください。

よく素材のお世話になるところを紹介しておきます。

https://icooon-mono.com/

ちなみに今回作るゲームはここで遊べるよ

 

まずは適当なHTMLファイルにcanvas要素を用意しましょう。

こんなもんでいいでしょう。

次にゲームを動かすJavascriptを書いていくのですが、以下のような順で進めます。

  • ゲームの枠組みであるメインフレームを作る
  • ゲームのオブジェクトを作成してcanvasに画像を描画する
  • ゲーム的な動きを付けていく

最後にHTMLファイルにペタッと貼り付けて画像を用意すれば良い状態のものを貼り付けておきます。

 

ゲームの枠組みであるメインフレームを作る

メインフレームとはなんぞやという方のために。

ゲームって60fpsだったり、30fpsだったり一定の間隔で処理が動いています。

60fpsというのは1秒間に60回処理をすることを表しています。

Javascript上で1秒間に60回処理が動くように設定していく = メインフレーム作成ですね。

はい、ペタり

1000ms / 60で1秒を60で割っています。

setIntervalの動きは、mainメソッドを1000ms / 60秒毎に実行するという意味です。

initalizeはゲーム起動時のローディングみたいなものです。

ここではHTMLのcanvasの取得とcontext2Dの取得をしています。

このあと中身を記載していきます。

なんとメインフレームはもう完成です。次にいきましょう。

 

ゲームのオブジェクトを作成してcanvasに画像を描画する

ここからちょっとは面倒になってきます。

ですが小規模開発なので色々考慮せず実装していきます。

ペタり

このゲームオブジェクトを生成して、メインフレームの処理毎にobjects内のゲームオブジェクトを更新していくよ。

Vectorはゲームを作る際は必ず付き纏うやつです。

座標・向き・長さなど色々な情報を表現するのに使用されます。

zとか追加すれば3D用ですね。

 

次はcanvasへの描画。

Object.keys(objects).reverse().forEachで監視対象のGameObjectを描画していくよ。

context.drawImage(Imageクラス, x座標, y座標, xサイズ, yサイズ)となっています。

 

この段階で描画する準備は整いました。GameObjectをnewすれば描画されます。

initializeに肉付けしました。

Imageクラスで画像を用意して、GameObjectのコンストラクタに渡しています。

playerは自分で操作するキャラクタです。

そう言った理由もありInitializeで生成します。

 

new Vector(canvas.width / 2 – IMAGE_SIZE / 2, canvas.height – IMAGE_SIZE*1.5)

ここに関してはx軸をcanvasの中央、y軸をcanvasの一番したより少し上くらいで表示します。

 

ここまで来れば、playerImage.srcに設定した画像がcanvasに表示されるかと思います。

順番に紹介するために結構散らかった書き方になっているのでここらでいったんまとめましょう。

これでゲームのオブジェクトを作成してcanvasに画像を描画することができたかと思います。

ゲーム的な動きを付けていく

基本的なことができたらここからは自由です。

今回取り上げるのは、以下の要素です。

  • 一定間隔毎に上からバナナが降ってくる
  • サルを操作してバナナを拾う
  • UIとしてプレイ時間とスコアを表示する

画面イメージは以下です。

質素ですが、ゲームエンジンとかを使わないと最初はこんなもんです。

(ぶっちゃけ最初からUnityとか触った方がメリットしかないと思うよ)

 

記事が長くなってきているので一気に載せて後から説明します。

一定間隔毎に上からバナナが降ってくる

これは

  • メインフレームでcreateDropObjectを呼び出してバナナを生成
  • メインフレームで各バナナが重力で落下するように速度を処理(move()の部分)
  • バナナが地面についた時点でそのバナナは消える(move()内でdestroyを読んでいる部分)

このように実現しています。

この辺りはどのタイミングでどこにオブジェクトを作るか、どのように動かすか、動いたらどうなるかの部分ですね。

 

サルを操作してバナナを拾う

これは

  • キー入力を受けてサルの座標を操作
  • バナナにコリジョン(衝突)したらバナナを消してスコアを獲得

ここでついにユーザーによる操作が可能になりました。

当たり判定については少しでもアクション系のゲームを作ることになったら必ず付き纏うものです。

今回は画像の座標とサイズから、サルとバナナの画像が重なった場合衝突と判定しています。

 

UIとしてプレイ時間とスコアを表示する

これは
・メインフレームで経過時間をカウント
・描画処理でUIを描画

これもゲームではほとんど必要になってくるUI部分ですね。
UIはほとんどの場合ゲームないオブジェクトよりは上のレイヤーで描画をしたいので、基本的には最後に描画するようにしましょう。
ポーズ画面のような動きを作るときはポーズ用の表示の方がレイヤーが上になることが多いです。

 

今回はここまでとします。

すごく簡単なゲームもどきですが、実際に動きのあるものだとそれなりに楽しめるかと思います。

最初に貼ったHTMLファイルのscriptタグ内に最後に貼ったJavascriptを貼り付けば動くようになっていますので是非お試しあれ。

FirebaseあたりでHostingとかしようと思ったのですがなぜかすぐできなかったので許してください。

と諦めようとしたところfirebase logoutからのfirebase loginでtoken問題が解決したのでHostingできました。遊んでいってくれてもいいんですよ。

https://browser-mini-game.firebaseapp.com/