▶ 実 行
▶ 実行
クリア
カメで蜂を避けつつ飛蝗を捕まえるゲーム(クリックオンリー)
by てぃふと@うぇいく
# 設定 捕食エリア表示 = オフ 敵接触エリア表示 = オフ 双方向回転 = オフ 停止有 = オフ 画面境界ワープ = オン カメ情報 = { 甲羅グラディエーション: NULL, 足揺: 0, 歩幅: 5, 回速: 10, 揺向: 1, 揺幅: 6, 足モード: 「停止」, 向: 90, 向向: 1, X: 32, Y: 32 } # 内部変数 餌リスト = [] 敵リスト = [] FID = 0 前回TIMESTAMP = 0 スコア = 0 実行状態 = 空 # 実行文 準備 開始 ●足モードチェンジ カメ情報["足モード"]で条件分岐 「停止」ならば、 カメ情報["足モード"]は「移動」。 ここまで。 「移動」ならば、 もし、双方向回転ならば、 カメ情報["向向"]は-カメ情報["向向"]。 ここまで。 カメ情報["足モード"]は「回転」。 ここまで。 「回転」ならば、 もし、停止有ならば、 カメ情報["足モード"]は「停止」。 違えば、 カメ情報["足モード"]は「移動」。 ここまで。 ここまで。 ここまで ここまで ●準備 CTX = 描画中コンテキスト # 甲羅用の緑のグラディエーション 円グラディエーション = CTXの"createRadialGradient"を[32,32,0,32,32,24]でJSメソッド実行 円グラディエーションの"addColorStop"を[0.0,"rgb(240,255,240)"]でJSメソッド実行 円グラディエーションの"addColorStop"を[0.3,"rgb(224,255,224)"]でJSメソッド実行 円グラディエーションの"addColorStop"を[1.0,"rgb(80,255,80)"]でJSメソッド実行 カメ情報["甲羅グラディエーション"] = 円グラディエーション カメ情報["X"] = 描画中キャンバス["width"] / 2 カメ情報["Y"] = (描画中キャンバス["height"]-16) / 2 + 16 描画中キャンバスの「click」に「画面クリック」をDOMイベント追加 ここまで ●開始 実行状態は「実行中」 0でメインループ ここまで ●後始末 描画中キャンバスの「click」から「画面クリック」をDOMイベント削除 FIDを画面更新処理取消 ここまで ●画面クリック EVTはWINDOW["event"] 要素位置はEVT["target"]の"getBoundingClientRect"を[]でJSメソッド実行 XはEVT["clientX"]-要素位置["left"] YはEVT["clientY"]-要素位置["top"] もし、Y<16ならば、 # パネル 違えば、 足モードチェンジ ここまで ここまで ●(経過時間で)メイン処理 カメ情報を足前後 カメ情報を移動反映 餌出現チェック 敵出現チェック 経過時間で餌リストを何行動 経過時間で敵リストを何行動 全描画クリア 空に線色設定 "rgb(240,240,240)"に塗色設定 [0,0,描画中キャンバス["width"],描画中キャンバス["height"]]に四角描画 餌描画 敵描画 カメ情報をマイカメ描画 敵接触検査 餌捕食検査 餌リストは餌リストをリスト整理 敵リストは敵リストをリスト整理 情報パネル表示 ここまで ●(TIMESTAMPで)メインループ 経過時間は0 もし、TIMESTAMP>0かつ前回TIMESTAMP>0ならば、 経過時間 = TIMESTAMP - 前回TIMESTAMP ここまで 前回TIMESTAMP = TIMESTAMP もし、経過時間>0ならば、 経過時間でメイン処理 ここまで もし、実行状態が「実行中」ならば、 FID = 「メインループ」を画面更新時実行 違えば、 後始末 ここまで ここまで ●情報パネル表示 「14px sans-serif」に描画フォント設定 描画中コンテキスト["textAlign"]は"center" 描画中コンテキスト["textBaseline"]は"middle" H = 16 Y = 0 X = 0 # 地色描画 "#000000"に線色設定 "#ccccccFF"に塗り色設定 [0,0,描画中キャンバス["width"],H]に四角描画 文言 = 「スコア: {スコア}」 W = 描画中キャンバス["width"]-X "#88ff88FF"に塗り色設定 [X,0,W,H]に四角描画 "#000000"に塗り色設定 描画中コンテキスト["textAlign"]は"left" [X+2,Y+H/2]に文言を文字描画 X=X+W ここまで ●(カメ情報を)足前後 カメ情報["足揺"] = カメ情報["足揺"] + カメ情報["揺向"]*カメ情報["歩幅"] もし、ABS(カメ情報["足揺"]) ≧ カメ情報["揺幅"]ならば、 カメ情報["揺向"] = - カメ情報["揺向"] ここまで ここまで ●(カメ情報を)移動反映 もし、カメ情報["足モード"]=「移動」ならば、 D = カメ情報["向"] DX = COS(DEG2RAD(D))*カメ情報["歩幅"] DY = SIN(DEG2RAD(D))*カメ情報["歩幅"] もし、画面境界ワープでなければ、 もし、カメ情報["X"]+DX<0+32またはカメ情報["X"]+DX>描画中キャンバス["width"]-32ならば、 DX = 0 DY = 0 ここまで。 もし、カメ情報["Y"]+DY<16+32またはカメ情報["Y"]+DY>描画中キャンバス["height"]-32ならば、 DX = 0 DY = 0 ここまで。 ここまで。 カメ情報["X"] = ((カメ情報["X"] + DX + (描画中キャンバス["width"]-64) - 32) % (描画中キャンバス["width"]-64)) + 32 カメ情報["Y"] = ((カメ情報["Y"] + DY + (描画中キャンバス["height"]-(16+64)) - (16+32)) % (描画中キャンバス["height"]-(16+64))) + (16+32) ここまで もし、カメ情報["足モード"]=「回転」ならば、 カメ情報["向"] = (カメ情報["向"] + カメ情報["向向"]*カメ情報["回速"] + 360) % 360 ここまで ここまで ●敵出現チェック N = 敵リストの配列要素数 もし、N>(スコア/100)+3ならば、戻る。 敵出現 ここまで ●餌出現チェック N = 餌リストの配列要素数 もし、(100の乱数)<((10-N)の二乗)ならば、 餌出現 ここまで ここまで ●(対象リストを)リスト整理 新リストは空配列 対象リストを反復する 対象はそれ もし、対象["状態"]が「除去」でなければ、 対象を新リストに配列追加 ここまで ここまで 新リストで戻る ここまで ●餌出現 餌 = 何出現 餌リストに餌を配列追加 ここまで ●敵出現 敵 = 何出現 TX = カメ情報["X"] TY = カメ情報["Y"] R = 48 EX = 敵["X"] EY = 敵["Y"] もし、((((TX-EX)の二乗)+((TY-EY)の二乗))の平方根)<Rならば、 戻る ここまで 敵リストに敵を配列追加 ここまで ●何出現 W = 描画中キャンバス["width"] H = 描画中キャンバス["height"] X = ((W-80)の乱数)+36 Y = ((H-80-16)の乱数)+36+16 DUR = 2500 + (1200の乱数) + (2500の乱数) (4の乱数)で条件分岐 0ならば、 登場X = 40+((W-80)の乱数) 登場Y = 0-80 退場X = 40+((W-80)の乱数) 退場Y = H+80 ここまで 1ならば、 登場X = 0-80 登場Y = 40+((H-80)の乱数) 退場X = W+80 退場Y = 40+((H-80)の乱数) ここまで 2ならば、 登場X = 40+((W-80)の乱数) 登場Y = H-80 退場X = 40+((W-80)の乱数) 退場Y = 0-80 ここまで 3ならば、 登場X = W+80 登場Y = 40+((H-80)の乱数) 退場X = 0-80 退場Y = 40+((H-80)の乱数) ここまで ここまで 何 = { X: X, Y: Y, 状態: 「登場」, 待機時間: DUR, 登場時間: 800, 退場時間: 800, 行動タイマ: 0, 登場X: 登場X, 登場Y: 登場Y, 退場X: 退場X, 退場Y: 退場Y, 跳躍力: 50 } 何で戻る ここまで ●餌描画 対象リスト = 餌リスト 対象文字 = 「🦗」 もし、(対象リストの配列要素数)>0ならば、 キャンバス状態保存 24に描画フォント設定 描画中コンテキスト["textBaseline"] = "middle" 描画中コンテキスト["textAlign"] = "center" 対象リストを反復する 何はそれ もし、何["状態"]=「除去」ならば、 続ける ここまで T = 何["行動タイマ"] 何["状態"]で条件分岐 「登場」ならば、 DY = ((((T-何["登場時間"]/2)/200)の二乗) - (((何["登場時間"]/2)/200)の二乗)) * 何["跳躍力"] X = 何["登場X"] + (何["X"] - 何["登場X"]) * T / 何["登場時間"] Y = 何["登場Y"] + (何["Y"] - 何["登場Y"]) * T / 何["登場時間"] + DY ここまで 「待機」ならば、 X = 何["X"] Y = 何["Y"] ここまで 「退場」ならば、 DY = ((((T-何["退場時間"]/2)/200)の二乗) - (((何["退場時間"]/2)/200)の二乗)) * 何["跳躍力"] X = 何["X"] + (何["退場X"] - 何["X"]) * T / 何["退場時間"] Y = 何["Y"] + (何["退場Y"] - 何["Y"]) * T / 何["退場時間"] + DY ここまで ここまで [X, Y]に対象文字を文字描画 ここまで キャンバス状態復元 ここまで ここまで ●敵描画 対象リスト = 敵リスト 対象文字 = 「🐝」 もし、(対象リストの配列要素数)>0ならば、 キャンバス状態保存 24に描画フォント設定 描画中コンテキスト["textBaseline"] = "middle" 描画中コンテキスト["textAlign"] = "center" 対象リストを反復する 何はそれ もし、何["状態"]=「除去」ならば、 続ける ここまで T = 何["行動タイマ"] 何["状態"]で条件分岐 「登場」ならば、 X = 何["登場X"] + (何["X"] - 何["登場X"]) * T / 何["登場時間"] Y = 何["登場Y"] + (何["Y"] - 何["登場Y"]) * T / 何["登場時間"] ここまで 「待機」ならば、 X = 何["X"] Y = 何["Y"] ここまで 「退場」ならば、 X = 何["X"] + (何["退場X"] - 何["X"]) * T / 何["退場時間"] Y = 何["Y"] + (何["退場Y"] - 何["Y"]) * T / 何["退場時間"] ここまで ここまで [X, Y]に対象文字を文字描画 ここまで キャンバス状態復元 ここまで ここまで ●(経過時間で対象リストを)何行動 もし、(対象リストの配列要素数)>0ならば、 対象リストを反復する 何はそれ 何["行動タイマ"] = 何["行動タイマ"] + 経過時間 何["状態"]で条件分岐する 「登場」ならば、 もし、何["行動タイマ"]>何["登場時間"]ならば、 何["状態"] = 「待機」 何["行動タイマ"] = 0 ここまで ここまで 「待機」ならば、 もし、何["行動タイマ"]≧何["待機時間"]ならば、 何["状態"] = 「退場」 何["行動タイマ"] = 0 ここまで ここまで 「退場」ならば、 もし、何["行動タイマ"]>何["退場時間"]ならば、 何["状態"] = 「除去」 何["行動タイマ"] = 0 ここまで ここまで ここまで ここまで ここまで ここまで ●(餌を)捕食 スコア = スコア + 10 餌["状態"] = 「除去」 餌["行動タイマ"] = 0 ここまで ●(敵と)衝突 実行状態 = 「終了」 ここまで ●(CALLBACKで対象リストにXYRを)接触抽出 対象リストを反復する 何はそれ もし、何["状態"]=「待機」ならば、 もし、((((XYR[0]-何["X"])の二乗)+((XYR[1]-何["Y"])の二乗))の平方根)<XYR[2]ならば、 CALLBACK(何) ここまで ここまで ここまで ここまで ●餌捕食検査 もし、(餌リストの配列要素数)>0ならば、 TX = カメ情報["X"] TY = カメ情報["Y"] TD = カメ情報["向"] X = TX+COS(DEG2RAD(TD))*(23+4) Y = TY+SIN(DEG2RAD(TD))*(23+4) R = 4+10 もし、捕食エリア表示ならば、 キャンバス状態保存 "rgb(0,0,0)"に線色設定 1に線太さ設定 空に塗色設定 [X,Y]へRの円描画 キャンバス状態復元 ここまで 餌リストに[X,Y,R]を接触抽出には(餌) 餌を捕食 ここまで ここまで ここまで ●敵接触検査 もし、(敵リストの配列要素数)>0ならば、 TX = カメ情報["X"] TY = カメ情報["Y"] R = 36 もし、敵接触エリア表示ならば、 キャンバス状態保存 "rgb(0,0,0)"に線色設定 1に線太さ設定 空に塗色設定 [TX,TY]へRの円描画 キャンバス状態復元 ここまで 敵リストに[TX,TY,R]を接触抽出には(敵) 敵と衝突 ここまで ここまで ここまで ●(カメ情報を)マイカメ描画 F = 0 B = 0 カメ情報["足モード"]で条件分岐 「回転」ならば、F = カメ情報["足揺"]。ここまで。 「移動」ならば、B = カメ情報["足揺"]。ここまで。 ここまで キャンバス状態保存 [カメ情報["X"], カメ情報["Y"]]に描画起点設定 カメ情報["向"]だけ描画回転 # 頭と足の描画の準備 "rgb(144,144,64)"に線色設定 "rgb(208,192,80)"に塗色設定 1に線太さ設定 # 頭描画 [23,0]へ8の円描画 # 足描画 DEGで[50+F,130-F,230-F,310+F]を反復する X = COS(DEG2RAD(DEG))*24+B Y = SIN(DEG2RAD(DEG))*24 [X,Y]へ5の円描画 B = -B ここまで # 甲羅描画の準備 カメ情報["甲羅グラディエーション"]に塗色設定 "rgb(16,160,16)"に線色設定 2に線太さ設定 # 甲羅描画 [0,0]へ24の円描画 キャンバス状態復元 ここまで ●(nの)二乗 (n*n)で戻る ここまで