JavaScript でゲームを作ってみた。
JavaScript の習熟度に自信がなかったので、JS の知見を得るのと、こうやればゲームにできるよねという妄想が正しいかどうか確認するため、ちゃんとしたゲームよりとりあえず動く試作版レベルを目指した。今後はこれをちゃんとしたゲームに仕立てたい。
フレームワーク等は使用せず requestAnimationFrame でぐるぐる回しながら Canvas をぶっ叩いている。
ゲームのコードは自作のビルドツールを介して単一の html に変換&軽く難読化している。リソースはゲーム実行時にダウンロードしている。リソースが丸見えなので、せめて暗号化した data-URL をダウンロードして復号して読み込む形に作り変えたい。
いかんせん試作版なのでどこに公開することもないのだが、せっかくなのでここに残しておく。
プレイするには各ページにある Game.html を開かれたし。
※ページを開く際、稀に高確率でリソースの読み込みに失敗することがあるようです。
NN PBN COMPLETE... という画面で数字(NN)が進まなくなったらページの再読み込みを何度かやってみてください。
動作確認:PC, Windows 10 Pro, Google Chrome
HAKO
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Hako
ひたすら敵を避けてゴールを目指す 2D アクションゲーム
HAKO を元にした。
いちおう最後まで遊べる。
ゲームパッド対応 (というかゲームパッド推奨)
操作方法:
メニュー画面はマウス対応
カーソルキー = 移動
Z = ジャンプ・決定
X = 低速移動・キャンセル
Doremy
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Doremy
ロックマン風の 2D アクションゲーム
プレイヤーキャラがロックマンっぽいだけ。
ゲームパッド対応 (というかゲームパッド推奨)
操作方法:
メニュー画面はマウス対応
カーソルキー = 移動
Z = ジャンプ・決定
X = 攻撃・キャンセル
スペース = ポーズメニュー
Marisa
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Marisa
俯瞰視点の 2D アクションゲーム
ゲームパッド対応 (というかゲームパッド推奨)
操作方法:
メニュー画面はマウス対応
カーソルキー = 移動
Z = 低速移動・決定
X = 攻撃・キャンセル
スペース = ポーズメニュー
Cirno
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Cirno
2D アクションゲーム
上記 Doremy の前バージョン
ゲームパッド対応 (というかゲームパッド推奨)
操作方法:
メニュー画面はマウス対応
カーソルキー = 移動
Z = ジャンプ・決定
X = 攻撃・キャンセル
スペース = ポーズメニュー
Shooting (v3)
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Shooting_v003
縦スクロール 2D シューティング
ゲームパッド対応 (というかゲームパッド推奨)
レベルデザインは適当なので 1 分くらいで終わります。
操作方法:
メニュー画面はマウス対応
カーソルキー = 移動
Z = 攻撃・決定
X = 低速移動・キャンセル
Shooting (v2)
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Shooting_v002
上記の前バージョン
Shooting (v1)
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Shooting
上記の前バージョン
Puzzle2048 (v3)
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Puzzle2048_v003
2048 というパズルのパクリインスパイア
ゲームというより数が増えていくのを暖かく見守るやつ
たぶんスマホ可
操作方法:
チェス盤のようなテーブルの上下左右あたりをクリック
Puzzle2048 (v2)
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Puzzle2048_v002
上記の前バージョン
Puzzle2048 (v1)
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Puzzle2048
上記の前バージョン
Bubble_Shooter (v2)
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Bubble_v002
バブルシュータというパズルのパクリインスパイア
動作確認用なのでちゃんと遊べない。
たぶんスマホ可
操作方法:
クリックで弾射出
Bubble_Shooter (v1)
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Bubble
上記の前バージョン
Archanoid (v2)
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Archanoid_v002
何かのパズルのパクリインスパイア
動作確認用なのでちゃんと遊べない。
たぶんスマホ可
操作方法
クリックで弾射出
Archanoid (v1)
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Archanoid
上記の前バージョン
Hammer
http://ornithopter.ccsp.mydns.jp/HPStore/Hatena/20220805_GameJS/Hammer
重そうな物体を振り回すテスト
動作確認用なのでちゃんと遊べない。
たぶんスマホ可
操作方法
マウスを振り回す
テンキーの1~4 = おもり変更