JavaScriptでチートモード付きじゃんけんゲームを作ってみた
はじめに、
HTML、CSS、JavaScriptを使って、チートモード付きのじゃんけんゲームを作成しました。
通常モードではCPUがランダムで手を出しますが、チートモードをONにするとプレイヤーが必ず勝てるようになる仕組みです。
この記事では、実装した機能や工夫したポイントについて紹介します。
使用技術
HTML
CSS
JavaScript
HTML
画面のレイアウトを作成しました。
主な要素は以下です。
グー・チョキ・パーのボタン
チートモード切替用チェックボックス
結果表示エリア
JavaScriptでじゃんけんを実装
まず、プレイヤーとCPUの手を配列で管理しました。
ボタンが押されたときにクリックイベントを実行します。
CPUの手を決定する処理
通常モードではランダムでCPUの手を決定します。
Math.floorとは？
小数点以下を切り捨てるメソッドです。
例えば、
Math.floor(2.8);
は
2
になります。
これによって0〜2の整数をランダムで取得できます。
チートモードの実装
今回の一番の特徴がチートモードです。
チェックボックスがONの場合、CPUが必ず負ける手を出します。
例えば、
プレイヤー CPU
グー チョキ
チョキ パー
パー グー
となり、プレイヤーが必ず勝てます。
% 3 の意味
余りを求める演算子です。
(0 + 1) % 3 = 1
(1 + 1) % 3 = 2
(2 + 1) % 3 = 0
最後に0へ戻るため、3種類の手を循環させることができます。
勝敗判定
プレイヤーが勝つパターンを条件式で判定しています。
それ以外は負けとして処理しています。
結果表示
結果はテンプレートリテラルを使用して画面へ表示しています。
テンプレートリテラルを使うことで変数を埋め込みやすくなります。
最後に、
完成系のコードです。
工夫した点
今回特に工夫した点は、
チートモードの実装
通常のじゃんけんゲームではなく、プレイヤーが必ず勝てる機能を追加しました。
まとめ
今回の制作では、
JavaScriptでゲームロジック
を実装しました。
特にチートモードの実装では、配列のインデックスと余り演算子（%）を利用することで、シンプルなコードでプレイヤーが必ず勝てる仕組みを実現できました。
今後は、
勝敗回数の記録
効果音の追加
キャラクターとの対戦
難易度設定
などの機能も追加してみるのも面白いと思います。