ホーム

スタッフブログ

2023年10月17日

自主課題の成果物のまとめ

こんにちは。システムチームのKです。

プログラム未経験で入社し4か月、

今回は9月の間に作った制作した3つのゲームについて書いていきます。

 

9月の間に3つのゲームを制作しました。

使った言語はHTML/CSS/JavaScriptです。

HTMLとCSSで画面を作り、JavaScriptでゲーム性を加えました。

1,ビンゴゲーム

一つ目はビンゴゲームです。

下記が実際のサイトになります。

http://calendar980.html.xdomain.jp/BingoGeme.html

 

番号の抽選については参考サイトのものを写経していますが、

ビンゴシートの作成とビンゴの判定は自分で作りました。

 

詳しいコードは下記のGitHubにアップしています。

https://github.com/MinatoMinazuki/programing/blob/main/site01/JavaScript/BingoGeme.html

 

一番悩んだところはビンゴ判定です。

全てをクラスの付け替えで何とかしようとしていることが見て取れるかと思います。

クラスの付け替えや判定以外の方法が思いつかなかったのですが、

結果としてif文の条件式が冗長になっています。

 

ただ、ビンゴゲームとしての要件(縦横斜めがそろえばビンゴ)は満たせています。

厳密にいえばリーチの判定やシートの縦列の数字の決まりなどあるかと思いますが、

ビンゴゲームとしては成立しているかと思います。

2,○×ゲーム

二つ目は○×ゲームです。三目並べともいわれるゲームです。

下記が実際のサイトです。

http://calendar980.html.xdomain.jp/tic-tac-toe_vsCom.html

 

こちらのコードもGitHubにアップしています。

https://github.com/MinatoMinazuki/studies/blob/master/tic-tac-toe/tic-tac-toe.html

 

始める前は勝敗判定が難しいかと思っていましたが、

ビンゴゲームの判定にならえば、成立させることができました。

対人戦であれば6時間ほどで完成しました。

 

そこから対CPUに改良を始めましたが、こちらは難しかったです。

CPUの判断方法、手番の交代、勝敗判定のタイミング等々……考え方が難しかったですが、

自作関数の理解は深まったように思います。

 

関数を呼び出す位置やconsole.log()を使って何度も検証し、

求める処理が行われるまで繰り返しました。

3,じゃんけんゲーム

3つ目はじゃんけんゲームです。

下記が実際のサイトです。

http://calendar980.html.xdomain.jp/rock-paper-scissors.html

 

こちらのコードは下記のGitHubにあります。

https://github.com/MinatoMinazuki/studies/blob/master/rock-paper-scissors/rock-paper-scissors.html

 

この制作でちょっと驚いたことがありました。

難易度設定でHardがありますが、ちゃんと強いことです。

勝ち越すことがほぼできません。

 

処理を見れば当たり前なのですが、クリックしたプレイヤーの手を含んで

CPUの出し手を決めるだけでここまで変わるのかと思いました。

プログラムの深淵を覗いた気分になりました。

まとめ

以前、システムチームのMTGでJavaScriptが苦手といったことがあります。

ですが、実際にゲームを制作したことである程度理解を深めることができ、

大体のJavaScriptの処理を考えることができるようになりました。

 

制作している中で、ミスが一番多かったのはスペルミスでした。

「console.log()で出てこない」「処理自体は合っているはずなのに」

その場合のミスが結局、単純なスペルミスだったことが多々ありました。

コピペや検索機能など、そういうものを使いこなしていく必要があると実感しました。

 

また、すべての制作したゲームに言えるのは、if文の条件式が長いことです。

条件式や処理をできるだけ簡潔にするためのコードを考えることも今後の課題になります。

 

最後までお読みいただき、ありがとうございました。

求人バナー

このページの上部へ戻る