Webページ上で動くゲームを制作しました。今日はその宣伝をさせて欲しいです。
noteにも同じ内容で記事を投稿しています。
ゲームURL
概要と参考ページ
基本的にはHTMLとJavascriptで動いています。Udemyで見つけたある講義動画を参考にし、それを自分なりに色々いじくってできたものです。
作ったのは、ただひたすらに前に向かって走っていくゲームです。ブラウザのオフライン画面で出てくるアレがイメージです。
ゲーム画面
工夫した点
ゲームルールを親切にしてみた
元のゲームでは、障害物に一度ぶつかったらゲームオーバーになります。それでは優しくないなと思ったので、何度当たっても良いというルールに変更してあります。
また、障害物にぶつかるとスピードが落ちる代わりに無敵時間が発生し、ぶつかった障害物は消えます。これでアクションが苦手な人にも優しい設計になっていると思いますがどうでしょう。
プレイヤーにできることを少し増やしてみた
ブーストとブレーキの機能をつけました。十字キーの右を押すと速くなり、左を押すと遅くなります。どっちも押していなければ、デフォルトの速さに戻ります。
ブーストとブレーキの速度差は大きく、加速度も高いです。ジャンプ込みで快適に動かせると思います。スマブラSPのプリンの空中移動をイメージしているかも。
プレイヤーの状態を視覚的にわかりやすくした
プレイヤーはジャンプとブースト・ブレーキという機能を持っています。四角形ひとつで表現するにはちょっと複雑な状態を、わかりやすく示すための工夫をしてあります。
デフォルト・ブースト・ブレーキの状態によって、プレイヤーの色が変わります。また、ジャンプができる状態とできない状態で枠線の色も変化します。
一方で障害物にぶつかった時、無敵時間中は操作ができません。無敵時間中は、プレイヤーが点滅して表示されます。これはFCロックマンなど、ゲームではよくある演出ですね。ちょっと組み込んでみました。
障害物の大きさやできる場所を、毎回ランダムにしてみた
何度も遊ぶたびに、障害物ができる位置と形が微妙に変わるようにしてあります。自分がランダム性のあるゲームが好きなので、織り込んでみた設定です。
連続でいっぱい生成されて無理ゲーになるとか、逆にいつまでも障害物が来なくてつまらんという、両極端な状態にはならないようにしてあるつもり。
反省点、さらなる改善案
コードがごちゃごちゃ
コードがごちゃごちゃして、読みにくくなってしまったと思います。変数の名前とか。同じ機能のコードを何回も書いたりとか。修正するとなったら骨が折れそうですね。
自分でちゃんとゲームを作ったのは初めてだから許してほしい。次はもっと見やすくてわかりやすいコードを書きたいですな。
画面をモノクロにしちゃった
参考動画とは異なり、画面内の要素すべてをモノトーンで構成してあります。これはカラーまで考慮すると、色の設定が複雑になって見やすいゲームにするのが大変になりそうだと思ったからです。
ここはちょっと楽しちゃいました。わかりやすいゲームにするなら、もっと色んな色を使った方が良かったかも。でもモノトーンだけで画面が構成されるゲームも、それはそれで味があるんじゃない？（言い訳）
キャンバスサイズに合わせた表示をした方が良かったかも
ブラウザのウインドウを大きくしても小さくしても、ゲーム画面のサイズは変わりません。スクショで見せたように、大きなウインドウで表示すると画面が相対的に小さくなってしまいます。
これはキャンバスサイズをHTMLで定数に設定してしまったのが原因でしょう。かといって今からHTMLでキャンバスサイズを可変にしても、JSの変数まで全部いじくらないとダメになってしまいます。初めからHTMLのキャンバスサイズを可変にした上で、JSでのゲーム変数もキャンバスサイズに依存する数値に設定するとこの問題は解決するか。
小ジャンプを実装したい
アクションゲームには大抵実装されている「小ジャンプ」。ジャンプボタンを押した長さによって、ジャンプ高度が変わるアレです。実はこのゲームには組み込めていないんですよね。やり方が思いついたらコードを組むかもしれません。
今回はこんなところですかね。良かったら遊んでみてください。プログラミングで何か作ったら、またここで共有しようと思います。