じゃんけんゲーム

ねえ、じゃんけんしようよ～

＜作成した目的＞

フロントエンドエンジニアを目指しており、JavaScript（JQuery）を使ったコードを用いて簡単なゲームを作ってみたいと思い制作した。

このじゃんけんゲームを通して、職業訓練学校で学んだJQueryの理解を深めるだけでなく、使いこなせるようにする、アルゴリズムの考え方を養いたいと感じていた。

このじゃんけんゲームを作成した結果、JQueryの使い方を理解し、アルゴリズムの考え方を養うことができた。

＜遊び方＞

PlayerとComputerでじゃんけんを行い、勝ち負けに応じてwin/loseのカウントが増えていき、先に3勝（win=3）したほうが勝ちというゲーム。あいこの場合は勝敗が決まるまで続く。自身が選択できる時間は5秒。5秒以内に選択しないと自動的に負け扱いとなる。

＜制作概要＞

●制作期間

1週間（約30時間）

●使用言語

HTML/CSS/JavaScript（jQuery）

●試験項目書

・自分なりに必要な箇所を試験項目書にピックアップし、試験実施・一次検証まで行った。

・実機ブラウザは「Google Chrome」「Safari」「FireFox」。

＜詳細＞

①アラートの表示

・最初の画面の「じゃんけんする」ボタンを押すと「ほんの少しの暇つぶしとして使ってください！」とアラートを表示するようにして、遊び心を表現した。

②勝敗数の表示

・どのページに遷移しても常にゲーム画面の上側に勝敗数を表示することによって、現在の状況がわかるようにした。

・Playerが負けたらp_lose（Playerのlose）が、c_win（Comのwin）がカウントされていく。（逆も同じようにp_win,c_loseがカウントされる。）

③Playerの出し手の定義とComの出し手の定義

・Player

クリックしたボタンに表示された出し手が設定される。

Playerが「グー」を選択した場合、p_s=10が設定され、p_s_l="グー"が設定される。

Playerが「チョキ」を選択した場合、p_s=11が設定され、p_s_l="チョキ"が設定される。

Playerが「パー」を選択した場合、p_s=12が設定され、p_s_l="パー"が設定される。

・Com

let com =Math.floor(Math.random()*9)+1;とし、comに1～9までの整数が設定され、1≦com≦3の時にcom_s=10が設定され、com_s_l="グー"が設定される。

4≦com≦6の時にcom_s=11が設定され、com_s_l="チョキ"が設定される。

7≦com≦9の時にcom_s=12が設定され、com_s_l="パー"が設定される。

④選択画面でのカウントダウンの表記、5秒以内に何も選択しなかった場合

・5からカウントがスタートし、1秒ごとに減っていく。

・5秒以内に選択しないと「何も選択されていないよ…」と表記され自動的に負け扱いとなり、1.5秒後に「負け！」と表示され、画面上部のPlayerのlose、Comのwinに1がカウントされる。

↓1.5秒後

⑤勝敗の判定

・Playerが負ける条件

(p_s)-(com_s)=-2または(p_s)-(com_s)=1またはp_s=null

・あいこの条件

(p_s)-(com_s)=0

・Playerが勝つ条件

(p_s)-(com_s)=-1または(p_s)-(com_s)=2

⑥5秒以内に選択した場合、選択した1.5秒後に結果が表示される（例：自分がチョキを出して負けた場合）

・自分の選択した出し手（チョキ）が表示され、1.5秒後に結果（負け！）が表示され、画面上部のPlayerのlose、Comのwinに1がカウントされる。

↓1.5秒後

⑦あいこの場合

・勝敗が決まるまで行う

⑧2回目以降（3勝が決まるまで繰り返される）

　　　　↓（3回目）

　　　　↓（4回目）

⑨3勝が決まった後

・「次の勝負」ボタンを押すと、「じゃん、けん...」画面に遷移し、自分の出し手を選択できるが、そこで選択しても選択しなくてもは勝敗は変わらず、0.5秒後に「お疲れ様でした！結果は……」と表示され、2秒後に勝敗の結果が表示される。

・「STARTに戻る」ボタンを押すと、リロードされ、最初の画面に戻る。

　　　　　　　　　　　　　↓選択したor選択しなかった0.5秒後

↓2秒後

　　　　　　　　　　　↓「STARTに戻る」ボタンを押す

＜今後実装したい機能＞

・1回1回のお互いの出し手の履歴が最後の結果の画面で表示されるようにしたい。

・自分が2勝している時点で「リーチ！」や2敗している時点で「ピンチ！」という言葉を入れたい。

・文章だけではなく出し手は画像（フリー素材か自分でイラストを作る）に変えたい。

・STARTに戻るのをリロードで実装するのではなく、ボタンを押したら設定がリセットされてまた1からゲームが始められるようにしたい。

・最終結果画面に行ったときに祝福の演出や残念の演出を加えたい。

・最終画面に行ったときに勝敗数を分かりやすいように画面の中央に配置しておきたい。