ぼくのかんがえたさいきょうのうぇぶさーびす上記の記事で書いた「typebeats」のゲーム部を簡素化して説明してみます。削っていくと100行に入りそうだったので詰め込んでみました。簡素化していますが、基本的な考え方は共通です。ゲーム概要リズムに合わせて降ってくるアイコンをタッチ/クリックするゲームです。画面をタッチ/クリックするとゲームが開始します。こいつがこいつに重なるくらいがタッチ/クリックするタイミングです。スマホでの動作は確認していません。言語はCoffeeScript、フレームワークはenchant.jsです。触れたことのない方はどっとインストールも参考にしてください。GitHubデモhttp://bokuweb.github.io/youtube_music_game/準備するもの今回必要なものは以下のようになります。ここではゲーム画面しかないのでシーンと言ったらゲーム画面のことです。ゲーム詳細ノートがタッチ/クリックされるべきタイミングを_timingに格納しておき、この時間から逆算して、ノートをシーンに追加したり、動かしたりさせています。enchant.jsの機能で指定したFPSの周期で動作させるメソッドを登録できますので、この登録したメソッド内で何を行うべきなのか判定し、実行するという形になります。ゲームクラス定義部ここではclass内で共通して参照する変数などを定義しておきます。ゲームクラスを宣言します。class名に@を付けることでglobalスコープに配置され、別ファイルから参照することができるようになります。再生する動画のIDを設定します。echant.jsのゲームコアを格納しておくprivate変数です。API制御classのインスタンスを格納しておく変数です。タイミング判定を表示するラベルを格納しておく変数です。落下してくるオブジェクトのタッチ/クリックタイミングを定義します。単位は[sec]です。ここに定義してある時間と実際にタッチ/クリックした時間を比較し、「GREAT」、「BAD」などの判定を行います。ゲームの終了時間を定義します。ここでは再生時間が80secを超えたら終了処理に入ります。コンストラクタクラスからnewでオブジェクトを作成した際に、自動的に実行されます。このサンプルでは一番最後の行でnewしていますのでその時に実行されます。constructor内では以下の処理を行っています。ゲーム本体を生成します。Coreの引数はゲームのwidthとheightです。ここでは800×600のゲームを生成しています。1秒当たり何回描画するかを設定します。使用する画像ファイルをpreloadするよう設定しておきます。ゲームが開始されるわけではなくまずは画像のロードが行われます。ロードが完了すると_game.onloadメソッドが呼ばれます。ロード完了時の処理ロードが完了すると_game.onloadメソッドが呼ばれます。onloadメソッド内では以下の処理を行っています。ゲーム画面をタッチ/クリックしたときの処理を登録しておきます。33.3333..ms周期で呼び出されるメソッドを登録しておきます。33.3333..ms経過するたびに_proccesRootSceneFrameメソッドがコールされます。youtube動画を再生します。iframeタグを埋め込みます。https://www.youtube.com/embed/HNYkOJ-T63k?enablejsapi=1..のHNYkOJ-T63kが動画IDです。ここを変更することで動画を変更できます。その他詳細はhttps://developers.google.com/youtube/js_api_reference?hl=jaを参照してください。ノートを作成するかどうか問い合わせるメソッドです。返り値がtrueの場合ノートを生成するタイミング、falseの場合は生成するタイミングではないことを示します。動画の再生時間がタッチ/クリックタイミングから1秒減算した値より大きければtrueを返します。タッチ/クリックタイミングから逆算して約1秒前にノートを生成しています。配列_timingにデータが存在するかしらべます。引数で指定された番号のノートを作成し、ノートの動作設定、33.3333..ms周期(すなわち30FPS)で呼び出されるメソッドを登録、ノートをタッチ/クリックしたとき呼び出されるメソッドを登録を行います。ノートがどのように動作するのかを記述します。tl.setTimeBased()を実行することでenchant.jsのアニメーションを時間ベースで実行することができます。デフォルトはフレームベースであるため「何秒間でここからここまで移動」というような処理ができないためです。1000```msecかけて移動するよう設定しています。```_timing[number]```という目標時間から```_yt.getCurrentTime()```という現在時間の差を求めどれだけの時間で移動すべきかを計算しています。ノートをタッチ/クリックしたとき呼び出されるメソッドを登録を行います。タッチ/クリック時の時間をclearTimeとしてnoteのプロパティに登録しておきます。クリアフラグをたてます。タッチ/クリックタイミングから1秒以上経過していればノートをシーンより削除します。ここでノートをタッチ/クリックしたときの処理を記載します。以下の処理も33.3333..ms周期で実行されるため、33.3333..ms毎にノートを透明にしていく処理とノートを大きくする処理を記述しています。不透明度を減らしていきます。シーンから削除します。(e)->```内で登録したタッチ/クリック時の時間とタッチ/クリックタイミングを比較し±0.2秒であれば"COOL"、±0.4秒であれば、"GOOD"、それ以外は"BAD"としています。内で登録されています。動画のボリュームを落としていく。"end"youtube制御クラス動画制御クラスですが、公式のサンプルをclassに閉じ込めただけなので詳細は省きます。詳細はhttps://developers.google.com/youtube/js_api_reference?hl=jaを参照してください。以下のメソッドで動画を制御可能です。順にコールされ、ゲームが開始されます。Game()コンパイル書き終えたらmain.coffeeをコンパイルしてください。main.jsが生成されますのでこれをhtmlファイルで読み込みます。COFFEESCRIPT」からも可能です。</body></html>注意点などこの程度であればなんとか動作すると思いますが、規模が大きくなってくると現状の作りではパフォーマンス面で苦しくなってくるかと思います。簡素化のため現状メモリの管理はまったく気にせず、好き放題やっていますが、このようなつくりの場合GC(ガベージコレクション)が、がしがし走るかとおもいます。GCが走っている間はユーザのプログラムは止まった状態となるので、動きがカクカクしたり、一瞬止まったりする原因になります。ここでは割愛(というか自分もよくわかっていない)しますがゲームを作る上では必要な知識となります。本格的に勉強される方は以下の記事も参考にしてみてください。初心者のための簡単プログラミングレシピサイトに登録させてもらおう。17:00関連記事2020-04-14Rustから目覚めるぼくらのゲームボーイ!Conway氏についてですが、公式にアナウンスがでたようです。以下のようにすることでhtmlがゲーム内に埋め込めます。12引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。