アプリでジャンケンに強くなれるのか？試してみた！

ジャンケンの歴史と攻略法

ジャンケンの歴史

ジャンケンの攻略法

まずは一人で研究できるアプリを！

試作：ジャンケン基本系

ジャンケン基本系0号

じゃんけん相手の手をランダム表示させ、ジャンケンの手と一致するか否かの仕組み。これを軸にして、アプリを改良していきます。

１人じゃん拳プロトタイプ1号

JSで、スタート、プレイ、結果の３画面を用意して体裁を整えました。
シンプルにただジャンケンをするだけのアプりです。
【画面構成】
スタート画面
プレイ画面
結果画面


ここまでは前回の勉強会と被るので割愛します。

１人じゃん拳プロトタイプ2号

1号をベースに3回勝負できるよう改良しました。
勝負の結果を表示、レベル選択を追加しています。
ちょっと勝負事っぽくなってきました。
また勝ち癖が付くように、工夫してます！

１人じゃん拳プロトタイプ3号

そして2号をさらに改良して、5回勝負にしました。
ジャンケンの思考パターンを分析するスクリプトを追加しパターンを読みます。
攻略の糸口になればと思い、ブラウザのコンソールをみながらCPUのパターンが
学べます。
これで、1人でもかなり戦略的に練習できるアプリが完成したかもしれません！

心理戦のロジックのポイント

//1. 初手の傾向を活用
if (round === 1) {  chosenHand = "パー";}
//初心者が初手で「グー」を選びやすい心理

//2. 勝者が同じ手を出しやすい心理を活用
else if (lastRoundWinner === "player") {
    chosenHand = getWinningHand(playerChoice);
}

//3. 敗者が手を変える心理を利用
else if (lastRoundWinner === "cpu") {
    chosenHand = getWinningHand(getMostPlayedHand());
}

//4. ランダムな選択の導入
else {
    chosenHand = getCpuChoiceRandom();

}

対人と対戦できるジャンケン

実現方法の比較

上記を踏まえ、以下の2つの方法で試作を進めました。

ポーリング方式

まずは動作テスト

２人で対戦するジャンケン試作１号

PHP版ポーリングのポイント

//1. サーバー状態の取得 (ポーリング対応)  PHP
case "get_state": // ポーリング用アクション
    sendResponse("success", "Current game state", $state);
    break;

//2. クライアントでのポーリング処理  JS
function startPolling() {
  if (pollingInterval) return; // 重複防止
  pollingInterval = setInterval(() => {
    fetchGameState();
  }, 30000); // 00秒ごと 
}

２人で対戦するジャンケン試作２号

Firebaseを活用

Firebaseは、Googleが提供するクラウドプラットフォームで、アプリの開発・運用を効率化します。リアルタイムデータベース、認証、ホスティング、プッシュ通知などを提供し、バックエンド開発を簡素化。Webやモバイルアプリ開発で広く利用されています。
公式サイト：https://firebase.google.com/

FirebaseのRealtime Databaseを利用してまずは動作テストしました。成功！
レスポンスはポーリングよりも反応が良いと感じました。

Firebase版2人対戦型ジャンケン テスト2号

Firebase版2人対戦型ジャンケンの試作です。対戦ですので、１人でテストする場合は２画面でお試しください。
リンクを外しました。
現在は、テストできませんので、ご了承ください。
かわりに簡素ですが動画をUPしました。
クライアント側とFirebaseの動きが分かります。

1人でジャンケンするのは、非常につならないことがよく分かりました。

【画面構成】
・エントリー画面
・プレイ画面
【動作環境】Firebase、Webサーバ（html,CSS,JS）2人用

まとめ