stackprobe7s_memo

専ら自分用メモ

ブラウザで動くゲームを試作した(JavaScript)

JavaScript でゲームを作ってみた。
JavaScript の習熟度に自信がなかったので、JS の知見を得るのと、こうやればゲームに出来るよねという妄想が正しいかどうか確認するため、ちゃんとしたゲームよりとりあえず動く試作版レベルを目指した。今後はこれをちゃんとしたゲームに仕立てたい。
フレームワーク等は使用せず requestAnimationFrame でぐるぐる回しながら Canvas をぶっ叩いている。
ゲームのコードは自作のビルドツールを介して単一の html に変換&軽く難読化している。リソースはゲーム実行時にダウンロードしている。リソースが丸見えなので、せめて暗号化した data-URL をダウンロードして復号して読み込む形に作り変えたい。
 
いかんせん試作版なのでどこに公開することもないのだが、せっかくなのでここに残しておく。
プレイするには各ページにある Game.html を開かれたし。
 
動作確認:PC, Windows 10 Pro, Google Chrome
 
 

HAKO

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Hako
ひたすら敵を避けてゴールを目指す 2D アクションゲーム
HAKO を元にした。
いちおう最後まで遊べる。
ゲームパッド対応 (というかゲームパッド推奨)
操作方法:
 メニュー画面はマウス対応
 カーソルキー = 移動
 Z = ジャンプ・決定
 X = 低速移動・キャンセル
 

Doremy

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Doremy
ロックマン風の 2D アクションゲーム
プレイヤーキャラがロックマンっぽいだけ。
ゲームパッド対応 (というかゲームパッド推奨)
操作方法:
 メニュー画面はマウス対応
 カーソルキー = 移動
 Z = ジャンプ・決定
 X = 攻撃・キャンセル
 スペース = ポーズメニュー
 

Marisa

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Marisa
俯瞰視点の 2D アクションゲーム
ゲームパッド対応 (というかゲームパッド推奨)
操作方法:
 メニュー画面はマウス対応
 カーソルキー = 移動
 Z = 低速移動・決定
 X = 攻撃・キャンセル
 スペース = ポーズメニュー
 

Cirno

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Cirno
2D アクションゲーム
上記 Doremy の前バージョン
ゲームパッド対応 (というかゲームパッド推奨)
操作方法:
 メニュー画面はマウス対応
 カーソルキー = 移動
 Z = ジャンプ・決定
 X = 攻撃・キャンセル
 スペース = ポーズメニュー
 

Shooting (v3)

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Shooting_v003
縦スクロール 2D シューティング
ゲームパッド対応 (というかゲームパッド推奨)
レベルデザインは適当なので 1 分くらいで終わります。
操作方法:
 メニュー画面はマウス対応
 カーソルキー = 移動
 Z = 攻撃・決定
 X = 低速移動・キャンセル
 

Shooting (v2)

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Shooting_v002
上記の前バージョン
 

Shooting (v1)

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Shooting
上記の前バージョン
 

Puzzle2048 (v3)

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Puzzle2048_v003
2048 というパズルのパクリインスパイア
ゲームというより数が増えていくのを暖かく見守るやつ
たぶんスマホ
操作方法:
 チェス盤のようなテーブルの上下左右あたりをクリック
 

Puzzle2048 (v2)

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Puzzle2048_v002
上記の前バージョン
 

Puzzle2048 (v1)

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Puzzle2048
上記の前バージョン
 

Bubble_Shooter (v2)

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Bubble_v002
バブルシュータというパズルのパクリインスパイア
動作確認用なのでちゃんと遊べない。
たぶんスマホ
操作方法:
 クリックで弾射出
 

Bubble_Shooter (v1)

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Bubble
上記の前バージョン
 

Archanoid (v2)

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Archanoid_v002
何かのパズルのパクリインスパイア
動作確認用なのでちゃんと遊べない。
たぶんスマホ
操作方法
 クリックで弾射出
 

Archanoid (v1)

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Archanoid
上記の前バージョン
 

Hammer

http://ornithopter.ccsp.mydns.jp/HPStore/20220805_GameJS/Hammer
重そうな物体を振り回すテスト
動作確認用なのでちゃんと遊べない。
たぶんスマホ
操作方法
 マウスを振り回す
 テンキーの1~4 = おもり変更