ひたすら避けるゲーム(mouse専用) 📖

隕石と弾と爆風に当たったらゲームオーバー。ひたすら避け続けてください。Pointer Lock APIのテスト用に作成したプログラムです。API部分を整理し、隕石が回るよう修正。

プログラム: (→大)
画面横は描画中キャンバス["width"] 画面縦は描画中キャンバス["height"] 自サイズは24 敵サイズは12 隕石サイズは12 爆発サイズは24 弾サイズは{半径:3} 自文字は「🛸」 敵文字は「👾」 隕石文字は「🥔」 爆発文字は「💥」 進入禁止幅は24 Xは画面横÷２ Yは画面縦÷２ スコアは０ スコアタイマは０ エンカウンターは０ ゲームオーバーフラグはオフ 描画中はオフ 敵群は[] 敵弾群は[] 隕石群は[] 爆発中は[] キャンバスIDは描画中キャンバス["id"] CTXは描画中コンテキスト 枠モードは０ 基準日時は０ 前回日時は０ 経過時間は０ 経過レートは1.0 fidは-1 tidは-1 # 描画高速化機能 文字描画準備文字列は『 ctx.save(); if (size) { ctx.font=""+size+"px sans- serif"; } ctx.textAlign="center"; ctx.textBaseline="middle"; 』 文字描画文字列は『 ctx.save(); ctx.translate(X,Y); if (R != null) { r=R*(Math.PI/180); ctx.rotate(r); } ctx.fillText(c,0,0); ctx.restore(); 』 文字描画復帰文字列は『 ctx.restore(); 』 文字描画準備関数は"ctx,size"と文字描画準備文字列でJS関数作成 文字描画関数は"ctx,X,Y,R,c"と文字描画文字列でJS関数作成 文字描画復帰関数は"ctx"と文字描画復帰文字列でJS関数作成 単文字描画文字列は『 ctx.save(); if (size) { ctx.font=""+size+"px sans- serif"; } ctx.textAlign="center"; ctx.textBaseline="middle"; ctx.translate(X,Y); ctx.fillText(c,0,0); ctx.restore(); 』 単文字描画関数は"ctx,size,X,Y,c"と単文字描画文字列でJS関数作成 開始する。 ●開始とは 　もし、!(ポインターロックAPIチェック)ならば、 　　「必要なAPI(Pointer Lock API)が無いため実行できませんでした」を表示 　　戻る 　ここまで 　DOCUMENTの「pointerlockchange」に「POINTERLOCK変更」をDOMイベント追加 　描画中キャンバスをクリックした時には、 　　もし、(キャンバスIDにマウスキャプチャ済)でなければ、 　　　WINDOW["event"]["target"]にポインターロック設定 　　違えば、 　　　枠モードは１−枠モード 　　ここまで 　ここまで 　初期画面描画 ここまで ●POINTERLOCK変更とは 　もし、(キャンバスIDにマウスキャプチャ済)ならば、 　　描画中はオン 　　DOCUMENTの「mousemove」に「マウス移動」をDOMイベント追加 　　基準日時は「Date.now()」をJS実行 　　処理予約 　違えば、 　　描画中はオフ 　　描画中キャンバスをクリックした時には 　　ここまで 　　DOCUMENTの「mousemove」から「マウス移動」をDOMイベント削除 　　DOCUMENTの「pointerlockchange」から「POINTERLOCK変更」をDOMイベント削除 　ここまで ここまで ●(値を下限から上限で)範囲制限とは 　もし、値＞上限ならば、 　　値は上限 　違えばもし、値＜下限ならば、 　　値は下限 　ここまで 　値で戻る ここまで ●(値を下限から上限で)範囲ループとは 　もし、値＞上限ならば、 　　値は下限＋値－上限 　違えばもし、値＜下限ならば、 　　値は上限－（下限－値） 　ここまで 　値で戻る ここまで ●マウス移動とは 　XはX+WINDOW["event"]["movementX"] 　YはY+WINDOW["event"]["movementY"] 　もし、枠モードが０ならば、 　　XはXを進入禁止幅から（画面横−進入禁止幅）で範囲制限 　　YはYを進入禁止幅から（画面縦−進入禁止幅）で範囲制限 　違えば、 　　XはXを進入禁止幅から（画面横−進入禁止幅）で範囲ループ 　　YはYを進入禁止幅から（画面縦−進入禁止幅）で範囲ループ 　ここまで ここまで ●(群を)進行処理とは 　個体数は群の配列要素数 　(個体数)回、 　　個体は群[個体数-回数] 　　個体["X"]は個体["X"]+個体["DX"]×経過レート 　　個体["Y"]は個体["Y"]+個体["DY"]×経過レート 　　もし、個体["R"]＝NULLでなければ、 　　　個体["R"]は個体["R"]+個体["DR"]×経過レート 　　　もし、個体["R"]＜0ならば 　　　　個体["R"]は個体["R"]＋３６０ 　　　違えばもし、個体["R"]≧360ならば、 　　　　個体["R"]は個体["R"]−３６０ 　　　ここまで 　　ここまで 　　もし、個体["X"]＜0||個体["X"]>画面横||個体["Y"]<0||個体["Y"]>画面縦ならば、 　　　群の個体数−回数を配列切り取る 　　ここまで 　ここまで ここまで ●敵弾進行とは 　敵弾群を進行処理 ここまで ●隕石進行とは 　隕石群を進行処理 ここまで ●敵進行とは 　敵群を進行処理 ここまで ●爆発処理とは 　爆発数は爆発中の配列要素数 　(爆発数)回、 　　爆発は爆発中[爆発数-回数] 　　爆発["カウンタ"]は爆発["カウンタ"]−経過時間 　　もし、爆発["カウンタ"]＜０ならば、 　　　爆発中の爆発数-回数を配列切り取り 　　ここまで 　ここまで ここまで ●(速さで)出現基礎とは 　出現Xは(画面横×0.1+((画面横×0.8)の乱数)) 　出現Yは(画面縦×0.1+((画面横×0.8)の乱数)) 　出現向きは(50の乱数)+(50の乱数)＋９０ 　出現位置は４の乱数 　もし、出現位置＜１ならば 　　出現Xは０ 　　出現向きは出現向き＋１８０ 　違えばもし、出現位置＜２ならば 　　出現Yは０ 　　出現向きは出現向き＋２７０ 　違えばもし、出現位置＜３ならば 　　出現Xは画面横 　　出現向きは出現向き＋０ 　違えば 　　出現Yは画面縦 　　出現向きは出現向き＋９０ 　ここまで 　もし、出現向き≧３６０ならば、 　　出現向きは出現向き−３６０ 　ここまで 　向きはDEG2RAD(出現向き) 　個体は{ 　　X:出現X, 　　Y:出現Y, 　　向:出現向き, 　　速:速さ, 　　DX:COS(向き)×速さ, 　　DY:SIN(向き)×速さ 　} 　個体を戻す ここまで ●隕石出現とは 　速さは0.4+(20の乱数)÷10+スコア÷500 　もし、速さ＞3.0ならば、 　　速さは3.0 　ここまで 　隕石は速さで出現基礎 　隕石["サイズ"]は隕石サイズ 　隕石["R"]は360の乱数 　回転速度は(5の乱数)＋(5の乱数) 　もし、(２の乱数)<1ならば、 　　回転速度は回転速度×(-1) 　ここまで 　隕石["DR"]は回転速度 　隕石群に隕石を配列追加 ここまで ●敵出現とは 　速さは0.5+(20の乱数)÷10 　敵は速さで出現基礎 　敵["サイズ"]は敵サイズ 　敵["攻撃カウンタ"]は０ 　敵["攻撃インターバル"]は２００＋(１００の乱数)×１０ 　敵["R"]はNULL 　敵群に敵を配列追加 ここまで ●ランダムエンカウンターとは 　エンカウンターはエンカウンター＋１×経過レート 　もし、エンカウンター＞１０ならば、 　　敵数は敵群の配列要素数 　　色々数は(隕石群の配列要素数)＋敵数 　　もし、(色々数の乱数)＜(スコア÷100)＋２ならば、 　　　もし、(１００の乱数)＜１２ならば、 　　　　敵出現 　　　違えば 　　　　隕石出現 　　　ここまで 　　ここまで 　　エンカウンターは０ 　ここまで ここまで ●スコア処理とは 　スコアタイマはスコアタイマ＋経過時間 　もし、スコアタイマ＞１０００ならば、 　　スコアはスコア＋１０ 　　スコアタイマはスコアタイマ−１０００ 　ここまで ここまで ●(敵から)弾発射とは 　速さは1.0 　出現向きは(４５の乱数)＋(４５の乱数) 　もし、X＜敵["X"]ならば、 　　出現向きは出現向き＋９０ 　ここまで 　もし、Y＜敵["Y"]ならば、 　　出現向きは３６０－出現向き 　ここまで 　もし、出現向き≧３６０ならば、 　　出現向きは出現向き−３６０ 　ここまで 　向きはDEG2RAD(出現向き) 　弾は{ 　　X:敵["X"], 　　Y:敵["Y"], 　　向:出現向き, 　　速:速さ, 　　DX:COS(向き)×速さ, 　　DY:SIN(向き)×速さ, 　　R:NULL, 　　サイズ: 弾サイズ["半径"] 　} 　敵弾群に弾を配列追加 ここまで ●敵処理とは 　(敵群の配列要素数)回、 　　敵は敵群[回数-1] 　　敵["攻撃カウンタ"]は敵["攻撃カウンタ"]＋経過時間 　　もし、敵["攻撃カウンタ"]＞敵["攻撃インターバル"]ならば、 　　　敵から弾発射 　　　敵["攻撃カウンタ"]は０ 　　ここまで 　ここまで ここまで ●敵弾判定処理とは 　弾数は敵弾群の配列要素数 　隕石数は隕石群の配列要素数 　もし、弾数が０ならば、 　　戻る 　ここまで 　(弾数)回 　　Tは弾数-回数 　　弾は敵弾群[T] 　　もし、弾["X"]－弾["サイズ"]＜X＋自サイズ×0.4&&弾["X"]＋弾["サイズ"]＞X−自サイズ×0.4ならば、 　　　もし、弾["Y"]－弾["サイズ"]＜Y＋自サイズ×0.3&&弾["Y"]＋弾["サイズ"]＞Y－自サイズ×0.2ならば、 　　　　ゲームオーバーフラグはオン 　　　　戻る 　　　ここまで 　　ここまで 　　もし、隕石数＞０ならば 　　　(隕石数)回 　　　　Pは隕石数-回数 　　　　隕石は隕石群[P] 　　　　もし、弾["X"]－弾["サイズ"]＜隕石["X"]＋隕石["サイズ"]×0.4&&弾["X"]＋弾["サイズ"]＞隕石["X"]−隕石["サイズ"]×0.4ならば、 　　　　　もし、弾["Y"]－弾["サイズ"]＜隕石["Y"]＋隕石["サイズ"]×0.4&&弾["Y"]＋弾["サイズ"]＞隕石["Y"]－隕石["サイズ"]×0.4ならば、 　　　　　　隕石群のPを配列切取 　　　　　　敵弾群のTを配列切取 　　　　　　爆発は{X:隕石["X"], Y:隕石["Y"], サイズ:爆発サイズ, R:NULL, カウンタ: １０００} 　　　　　　爆発中に爆発を配列追加 　　　　　　隕石数は隕石群の配列要素数 　　　　　　スコアはスコア＋５ 　　　　　　抜ける 　　　　　ここまで 　　　　ここまで 　　　ここまで 　　ここまで 　ここまで ここまで ●隕石判定処理とは 　隕石数は隕石群の配列要素数 　もし、隕石数が０ならば、 　　戻る 　ここまで 　(隕石数)回 　　隕石は隕石群[回数-1] 　　もし、隕石["X"]－隕石["サイズ"]×0.3＜X＋自サイズ×0.4&&隕石["X"]＋隕石["サイズ"]×0.3＞X−自サイズ×0.4ならば、 　　　もし、隕石["Y"]－隕石["サイズ"]×0.3＜Y＋自サイズ×0.3&&隕石["Y"]＋隕石["サイズ"]×0.3＞Y－自サイズ×0.2ならば、 　　　　ゲームオーバーフラグはオン 　　　　戻る 　　　ここまで 　　ここまで 　ここまで ここまで ●爆発判定処理とは 　爆発数は爆発中の配列要素数 　もし、爆発数が０ならば、 　　戻る 　ここまで 　敵弾数は敵弾群の配列要素数 　隕石数は隕石群の配列要素数 　(爆発数)回 　　Iは爆発数-回数 　　爆発は爆発中[I] 　　もし、爆発["X"]－爆発["サイズ"]×0.3＜X＋自サイズ×0.4&&爆発["X"]＋爆発["サイズ"]×0.3＞X−自サイズ×0.4ならば、 　　　もし、爆発["Y"]－爆発["サイズ"]×0.3＜Y＋自サイズ×0.3&&爆発["Y"]＋爆発["サイズ"]×0.3＞Y－自サイズ×0.2ならば、 　　　　ゲームオーバーフラグはオン 　　　　戻る 　　　ここまで 　　ここまで 　　もし、敵弾数＞０ならば 　　　(敵弾数)回 　　　　Tは敵弾数-回数 　　　　弾は敵弾群[T] 　　　　もし、弾["X"]－弾["サイズ"]＜爆発["X"]＋爆発["サイズ"]×0.4&&弾["X"]＋弾["サイズ"]＞爆発["X"]−爆発["サイズ"]×0.4ならば、 　　　　　もし、弾["Y"]－弾["サイズ"]＜爆発["Y"]＋爆発["サイズ"]×0.4&&弾["Y"]＋弾["サイズ"]＞爆発["Y"]－爆発["サイズ"]×0.4ならば、 　　　　　　敵弾群のTを配列切取 　　　　　　爆発["カウンタ"]は爆発["カウンタ"]+４００ 　　　　　　スコアはスコア＋１ 　　　　　ここまで 　　　　ここまで 　　　ここまで 　　　敵弾数は敵弾群の配列要素数 　　ここまで 　　もし、隕石数＞０ならば 　　　(隕石数)回 　　　　Pは隕石数-回数 　　　　隕石は隕石群[P] 　　　　もし、爆発["X"]−爆発["サイズ"]×0.4＜隕石["X"]＋隕石["サイズ"]×0.4&&爆発["X"]＋爆発["サイズ"]×0.4＞隕石["X"]−隕石["サイズ"]×0.4ならば、 　　　　　もし、爆発["Y"]－爆発["サイズ"]×0.4＜隕石["Y"]＋隕石["サイズ"]×0.4&&爆発["Y"]＋爆発["サイズ"]×0.4＞隕石["Y"]－隕石["サイズ"]×0.4ならば、 　　　　　　隕石群のPを配列切取 　　　　　　爆発は{X:隕石["X"], Y:隕石["Y"], サイズ:爆発サイズ, R:NULL, カウンタ: １０００} 　　　　　　爆発中に爆発を配列追加 　　　　　　スコアはスコア＋５ 　　　　　ここまで 　　　　ここまで 　　　ここまで 　　　隕石数は隕石群の配列要素数 　　ここまで 　ここまで ここまで ●処理予約とは 　tidは"処理フレーム"を0.02秒タイマー開始時 ここまで ●処理中止とは 　全タイマー停止 ここまで ●処理フレームとは 　前回日時は基準日時 　基準日時は「Date.now()」をJS実行 　経過時間は基準日時−前回日時 　経過レートは経過時間÷20.0 　爆発処理 　敵処理 　敵弾進行 　敵弾判定処理 　敵進行 　隕石進行 　隕石判定処理 　爆発判定処理 　ランダムエンカウンター 　スコア処理 　もし、ゲームオーバーフラグがオンならば、 　　ゲーム終わり 　ここまで 　もし、描画中ならば、 　　描画予約 　違えば、 　　処理中止 　ここまで ここまで ●自機描画とは 　単文字描画関数(CTX,自サイズ,X,Y,自文字) ここまで ●敵弾描画とは 　弾数は敵弾群の配列要素数 　もし、弾数＞０ならば、 　　1に線太さ設定 　　黒色に線色設定 　　白色に塗り色設定 　　(弾数)回 　　　弾は敵弾群[回数-1] 　　　[弾["X"], 弾["Y"]]へ弾サイズ["半径"]の円描画。 　　ここまで 　ここまで ここまで ●(群を文字で)群文字描画処理とは 　個体数は群の配列要素数 　もし、個体数＞０ならば、 　　文字描画準備関数(CTX,群[0]["サイズ"]) 　　(個体数)回、 　　　個体は群[回数-1] 　　　文字描画関数(CTX,個体["X"],個体["Y"],個体["R"],文字) 　　ここまで 　　文字描画復帰関数(CTX) 　ここまで ここまで ●隕石描画とは 　隕石群を隕石文字で群文字描画処理 ここまで ●爆発描画とは 　爆発中を爆発文字で群文字描画処理 ここまで ●敵描画とは 　敵群を敵文字で群文字描画処理 ここまで ●進入禁止枠描画とは 　白色に塗り色設定 　1.0に線太さ設定 　もし、枠モードが０ならば、 　　赤色に線色設定 　違えば、 　　青色に線色設定 　ここまで 　[進入禁止幅, 進入禁止幅, 画面横−進入禁止幅×２, 画面縦−進入禁止幅×２]の四角描画 ここまで ●ビルボード描画とは 　もし、枠モードが０ならば、 　　モードは「ストップ」 　違えば 　　モードは「ループ」 　ここまで 　黒色に塗り色設定 　「12px sans- serif」に描画フォント設定 　[画面横÷３×１－40, 20]に「スコア：{スコア}」を文字描画 　[画面横÷３×２－40, 20]に「境界：{モード}」を文字描画 ここまで ●描画予約とは 　もし、fidが(-1)ならば、 　　fidは「画面描画フレーム」を画面更新時実行 　ここまで ここまで ●画面描画フレームとは 　fidは-1 　[0,0,画面横,画面縦]の描画クリア 　進入禁止枠描画 　自機描画 　隕石描画 　敵描画 　爆発描画 　敵弾描画 　ビルボード描画 ここまで ●初期画面描画とは 　[0,0,画面横,画面縦]の描画クリア 　黒色に線色設定 　黒色に塗り色設定 　２に線太さ設定 　「18px sans- serif」に描画フォント設定 　[画面横÷2－60, 画面縦÷2]に「クリックで開始」を文字描画 ここまで ●ゲーム終とは 　描画中はオフ 　ポインターロック解除 　黒色に線色設定 　黒色に塗り色設定 　２に線太さ設定 　「24px sans- serif」に描画フォント設定 　[画面横÷2－20, 画面縦÷2]に「おわり」を文字描画 ここまで # Pointer Lock API機能 ●ポインターロックAPIチェックとは 　「(typeof document.exitPointerLock !== "undefined")」をJS実行で戻る ここまで ●(OBJに)ポインターロック設定とは 　OBJの"requestPointerLock"を[]でJSメソッド実行。 ここまで ●ポインターロック解除とは 　DOCUMENTの"exitPointerLock"を[]でJSメソッド実行。 ここまで ●(IDに)マウスキャプチャ済とは 　「document.pointerLockElement === document.getElementById("{ID}")」をJS実行で戻る。 ここまで # 基本機能 JSメソッド実行文字列は『return IF.OBJ[IF.METHOD].apply(IF.OBJ,IF.ARGS)』 JSメソッド実行関数は["IF"]とJSメソッド実行文字列でJS関数作成 ●(FuncNameを)実行予約とは 　[FuncNameのJSオブジェクト取得]でWINDOW["requestAnimationFrame"]をJS関数実行で戻る ここまで ●(ARGSとBODYで)JS関数作成とは 　『(function(A,B){return new Function(A,B);})』を[ARGS,BODY]でJS関数実行を戻す ここまで