[編集モード] ひたすら避けるゲーム(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関数実行を戻す
ここまで

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] ひたすら避けるゲーム(mouse専用)

素材のアップロード