JavaScript PR

【初心者向け】JavaScriptでじゃんけんゲームを作ってみた！

  /
記事内に商品プロモーションを含む場合があります

 

この記事では、初心者向けにJavaScriptでじゃんけんゲームをつくるコードを解説します。

じゃんけんゲームは、非常にシンプルなルールではありますが、コードで書いてみると配列、ランダム取得、if関数なんかも駆使しなければいけないので、初心者が挑戦するにはうってつけの教材です！

現状、JavaScriptの基礎を一通り学習して、自分で簡単なゲームを自作してみようと思っているのであれば、この記事を参考に自力で挑戦してみましょう。

完成イメージはこんな感じです。

「最近、独学での学習に限界を感じてませんか？」

私もそうでしたが、正直、独学での学習は、非常に効率が悪いんですよね・・・

 

「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。

プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。

ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。

無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！



 

JavaScriptでじゃんけんゲームを作るコード

それでは、まずコードで紹介しますが、

現在、JavaScriptの勉強をしている場合は、自分で考えたり、調べたりしながら作ってみるのが一番力がつくので、下記のindex.phpをコピーしていただき、まずは、JavaScriptの記述は見ないで挑戦してみてください！

JavaScriptでじゃんけんゲームを作るコード(index.html)

まずは、index.htmlです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <style>
    #state{
      font-weight: bold;
      color: red;
      margin: 10px 0;
    }
</style>
</head>
<body>
  <div>あいて:<span id="cpu"></span></div>
  <div id="state" >最初はグー!じゃんけん・・・</div>

  
  <div>あなた:<span id="player"></span></div>

  <button id="gu">グー</button>
  <button id="cho">チョキ</button>
  <button id="pa">パー</button>
  <button id="reset">reset</button>
  <div>勝ち:<span id="win">0</span>回</div>
  <div>負け:<span id="lose">0</span>回</div>
  
  
  <script src="main.js"></script>
</body>
</html>

 

JavaScriptでじゃんけんゲームを作るコード(main.js)

次に、main.jsです。

自力で挑戦する場合は、自力で挑戦した後に見るようにしましょう。


//index.htmlからidを取得して固定値代入
const state=document.getElementById("state");
const cpu=document.getElementById("cpu");
const gu=document.getElementById("gu");
const cho=document.getElementById("cho");
const pa=document.getElementById("pa");
const player=document.getElementById("player");
const reset=document.getElementById("reset");
const win=document.getElementById("win");
const lose=document.getElementById("lose");

//配列にじゃんけんの選択肢を入れる
//jans[0]="グー",jans[1]="チョキ",jans[2]="パー"
const jans=["グー","チョキ","パー"]
//プレイヤーの選択肢を格納する変数を設定
let playjan;
//CPUの選択肢を格納する変数を設定
let cpuja;
//勝った回数をカウント
let winCount=0;
//負けた回数をカウントする変数を設定。初期値は０
let loseCount=0;

//関数start()を呼び出し。
start();

//グーのボタンを押した時イベント
gu.addEventListener("click",()=>{
  //プレイヤーのテキストにグーを表示
  player.textContent=jans[0];
  //プレイヤーの選択肢を格納する変数にグーを格納
  playjan=jans[0]
  //CPUの選択肢を格納する変数に配列jansからランダムに取得した選択肢を格納
  cpuja=jans[Object.keys(jans)[Math.floor(Math.random() * Object.keys(jans).length)]];
  //上記で取得した変数をCPUのテキストに表示
  cpu.textContent=cpuja; 
  //関数result()を呼び出し
  result();
})
//チョキのボタンを押した時イベント。挙動はグーと同じ
cho.addEventListener("click",()=>{
  player.textContent=jans[1];
  playjan=jans[1]
  cpuja=jans[Object.keys(jans)[Math.floor(Math.random() * Object.keys(jans).length)]];
  cpu.textContent=cpuja;
  result();
})
//パーのボタンを押した時イベント。挙動はグーと同じ
pa.addEventListener("click",()=>{
  player.textContent=jans[2];
  playjan=jans[2]
  cpuja=jans[Object.keys(jans)[Math.floor(Math.random() * Object.keys(jans).length)]];
  cpu.textContent=cpuja;
  result();
})



//リセットボタンをクリックした時のイベント
reset.addEventListener("click",()=>{
  // 関数start()を呼び出し
  start();
  //stateにテキストを表示
  state.textContent="最初はグー！じゃんけん・・・";
})

//result()の関数です。じゃんけん判定を判定をここで行います。
function result(){
  //if関数で分岐。
  //プレイヤーとCPUが同じだったら、stateにテキストを表示
  if(playjan===cpuja){
    state.textContent="あいこで・・・"
  //プレイヤーが勝った場合の分岐。
  }else if(playjan===jans[0]&&cpuja===jans[1]||playjan===jans[1]&&cpuja===jans[2]||playjan===jans[2]&&cpuja===jans[0]){
    //stateにテキストを表示
    state.textContent="かち";
    //関数display()を呼び出し
    display()
    //勝った回数に１プラス
    winCount++;
    //勝った回数をテキストに表示
    win.textContent=winCount;
  }else{
    //stateにテキストを表示
    state.textContent="まけ";
    //関数display()を呼び出し
    display()
    //負けた回数に１プラス
    loseCount++;
    //負けた回数をテキストに表示
    lose.textContent=loseCount;
  }
}

//start()の関数。ボタンの表示、非表示を設定。disabled＝falseだとボタンを表示され、disabled＝tureだと非表示となる。
function start(){
  gu.disabled=false;
  cho.disabled=false;
  pa.disabled=false;
  reset.disabled=true;
}
//display()の関数。ボタンの表示、非表示を設定。disabled＝falseだとボタンを表示され、disabled＝tureだと非表示となる。
function display(){
  gu.disabled=true;
  cho.disabled=true;
  pa.disabled=true;
  reset.disabled=false;
}

 

 

JavaScriptでじゃんけんゲームを作るコードの解説

それでは、コードを解説していきます。

解説は、「変数、定数の定義」「イベントアクション」「関数」で分けて解説していきます。

JavaScriptでじゃんけんゲームの解説（変数、定数の定義）

まずは、変数や定数を定義している部分の解説です。

//index.htmlからidを取得して定数に代入
const state=document.getElementById("state");
const cpu=document.getElementById("cpu");
const gu=document.getElementById("gu");
const cho=document.getElementById("cho");
const pa=document.getElementById("pa");
const player=document.getElementById("player");
const reset=document.getElementById("reset");
const win=document.getElementById("win");
const lose=document.getElementById("lose");

ここでは、index.htmlのタグを呼び出し、定数に代入しています。

「const 〇〇」は、〇〇を定数に設定しており、
「document.getElementById(“〇〇”)」は、index.htmlのid属性のタグを呼びだしています。

つまり、「const state=document.getElementById(“state”)」は、stateという定数に、index.htmlにあるstateのid属性がついたタグを代入しています。

なお、今回、定数とid属性を同じ名称にしていますが、別々の名称でも問題ありませんが、同じ方がわかりやすいので、基本的には一緒にします。

//配列にじゃんけんの選択肢を入れる
//jans[0]="グー",jans[1]="チョキ",jans[2]="パー"
const jans=["グー","チョキ","パー"]
//プレイヤーの選択肢を格納する変数を設定
let playjan;
//CPUの選択肢を格納する変数を設定
let cpuja;
//勝った回数をカウント
let winCount=0;
//負けた回数をカウントする変数を設定。初期値は０
let loseCount=0;

//関数start()を呼び出し。
start();

ここでは、配列と変数を定義しております。

const jans=["グー","チョキ","パー"]

まず、定数jansにじゃんけんの3パターンを配列にして格納していきます。
この配列から、必要な要素を取得するには、jans[0]のように取得します。

jans[0]//グー
jans[1]//チョキ
jans[2]//パー

 

playjanとcpujaについては、プレイヤーとコンピューターの選択された「グー」「チョキ」「パー」を格納するための変数を定義しています。

 

winCountとloseCountは、勝敗数をカウントするための変数を定義し、初期値を0とします。
また、ここでボタンを初期状態にするため関数「start()」を呼び出しておきます。
※関数については、後述で解説しています。

JavaScriptでじゃんけんゲームの解説（イベントアクション）

次に、イベントアクションの部分の解説です。

//グーのボタンを押した時イベント
gu.addEventListener("click",()=>{
  //プレイヤーのテキストにグーを表示
  player.textContent=jans[0];
  //プレイヤーの選択肢を格納する変数にグーを格納
  playjan=jans[0]
  //CPUの選択肢を格納する変数に配列jansからランダムに取得した選択肢を格納
  cpuja=jans[Object.keys(jans)[Math.floor(Math.random() * Object.keys(jans).length)]];
  //上記で取得した変数をCPUのテキストに表示
  cpu.textContent=cpuja; 
  //関数result()を呼び出し
  result();
})

 

JavaScriptでは、ボタンをクリックした際に起こるイベント下記のように記述します。

〇〇.addEventListener("click",()=>{
//イベントの記述
｝

〇〇は、ボタンを定義した定数などを入れ、｛　｝の中にボタンを押した際のイベントを記述していきます。

今回の場合は、ボタン「グー」を押したクリックイベントのバージョンで解説していきますが、基本的に「チョキ」と「パー」の場合も同じです。

player.textContent=jans[0];
playjan=jans[0]

まずここでは、配列から「グー」の要素（jans[0]）を取得して、プレイヤーのテキストに表示されます。

また、この後勝敗の判定を行うためにplayjanにもグーを格納します。

  cpuja=jans[Object.keys(jans)[Math.floor(Math.random() * Object.keys(jans).length)]];
  cpu.textContent=cpuja;

次にここでは、配列からランダムに要素を取得して、cpujaに格納します。
また、取得した要素をCPUのテキストに表示します。

ランダムに要素を取得する部分の解説は下記の記事を参照してください。

JavaScriptで配列からランダムに選択する方法を超わかりやすく解説この記事は、初心者向けに配列やその配列からランダムに要素を取り出す方法について、わかりやすく解説する記事です。 筆者は、ITやプロ...
 
 result();

最後に、「playjan」と「cpuja」に格納された要素（「グー」「チョキ」「パー」）を元に勝敗の判定を行うため、関数result()を呼び出します。
※関数result()は、この後解説します。

//リセットボタンをクリックした時のイベント
reset.addEventListener("click",()=>{
  // 関数start()を呼び出し
  start();
  //stateにテキストを表示
  state.textContent="最初はグー！じゃんけん・・・";
})

こちらは、resetボタンを押した時のクリックイベントです。

初期状態に戻すためのイベントのため、まず関数start()を呼び出して、ボタンを初期状態に戻します。

また、stateのテキストも初期状態に戻します。

JavaScriptでじゃんけんゲームの解説（関数）

最後に関数部分の解説です。

JavaScriptでじゃんけんゲームの関数(result)

下記の関数「result()」については、じゃんけんの勝敗についてまとめています。

//リセットボタンをクリックした時のイベント
function result(){
  //if関数で分岐。
  //プレイヤーとCPUが同じだったら、stateにテキストを表示
  if(playjan===cpuja){
    state.textContent="あいこで・・・"
  //プレイヤーが勝った場合の分岐。
  }else if(playjan===jans[0]&&cpuja===jans[1]||playjan===jans[1]&&cpuja===jans[2]||playjan===jans[2]&&cpuja===jans[0]){
    //stateにテキストを表示
    state.textContent="かち";
    //関数display()を呼び出し
    display()
    //勝った回数に１プラス
    winCount++;
    //勝った回数をテキストに表示
    win.textContent=winCount;
  }else{
    //stateにテキストを表示
    state.textContent="まけ";
    //関数display()を呼び出し
    display()
    //負けた回数に１プラス
    loseCount++;
    //負けた回数をテキストに表示
    lose.textContent=loseCount;
  }
}

 

先に関数を簡単に解説すると、下記のように記述します。

function 〇〇(){

//関数の中身を記述

}

関数は、「〇〇()」の部分に自分で関数を名を付け、{ }の中に関数の中身を記述します。
そして、この関数を呼び出したい時には、呼び出したい箇所で、「〇〇()」と記述することで呼び出すことが可能です。

今回の場合は、「result()」と呼び出すことで今回記述している関数を呼び出します。

 

じゃんけんの勝敗には、「あいこ」「かち」「まけ」があるので、プレイヤーとCPUの選択肢を比較し、それぞれIF構文を利用し分岐させています。

　//if関数で分岐。
  //プレイヤーとCPUが同じだったら、stateにテキストを表示
  if(playjan===cpuja){
    state.textContent="あいこで・・・"
  }

まず、ここの部分は、プレイヤーの選択肢（playjan）とCPU（cpuja）の選択肢が同じだった場合、つまり「あいこ」の場合の挙動が書かれていて、stateのテキストに「あいこで・・・」と表示させ、もう一度プレイヤーに「グー」「チョキ」「パー」を選ばせます。

//プレイヤーが勝った場合の分岐。
 else　if(playjan===jans[0]&&cpuja===jans[1]||playjan===jans[1]&&cpuja===jans[2]||playjan===jans[2]&&cpuja===jans[0]){
    //stateにテキストを表示
    state.textContent="かち";
    //関数display()を呼び出し
    display()
    //勝った回数に１プラス
    winCount++;
    //勝った回数をテキストに表示
    win.textContent=winCount;
  }

次にここの部分では、プレイヤーが勝った場合の挙動を記述しております。

まず、else ifの部分ですが、「&＆」は「AND（かつ）」、「｜｜」は「OR（または）」を意味しています。

playjan===jans[0]&&cpuja===jans[1] || playjan===jans[1]&&cpuja===jans[2] || playjan===jans[2]&&cpuja===jans[0]

なので、上記の部分は、【プレイヤーが「グー」でかつCPUが「チョキ」だった場合】または、【プレイヤーが「チョキ」でかつCPUが「パー」だった場合】または、【プレイヤーが「パー」でかつCPUが「グー」だった場合】と記述されております。

つまりは、プレイヤーが勝った場合ということで、その挙動が｛　｝内に記述されております。

　　//stateにテキストを表示
    state.textContent="かち";

勝った挙動としては、まずstateのテキストに「かち」と表示させています。

 

    //関数display()を呼び出し
    display()

次に、この後説明するdisplay()を呼び出して、「グー」「チョキ」「パー」のボタンを押せないようにし、「reset」ボタンを押せるようにしています。

    //勝った回数に１プラス
    winCount++;
    //勝った回数をテキストに表示
    win.textContent=winCount;

ここの記述では、勝った回数をカウントするための変数「winCount」に１プラスし、その勝ち数をwinのテキストに表示させています。

else{
    //stateにテキストを表示
    state.textContent="まけ";
    //関数display()を呼び出し
    display()
    //負けた回数に１プラス
    loseCount++;
    //負けた回数をテキストに表示
    lose.textContent=loseCount;
  }

最後にここの部分は、上記で「あいこ」と「勝ち」の分岐を記述してきたので、それ以外。つまり「負け」の挙動が記述されています。

内容については、基本的に「勝ち」と同じような記述がされています。

条件分岐について、こちらの記事で詳しく解説しています。

【初心者向け】JavaScriptの条件分岐について優しく解説します条件分岐は、プログラミングでよく使うもので、条件に応じて挙動を変更したい場合に使用します。 この記事では、そんなJavaScriptの...

JavaScriptでじゃんけんゲームの関数(start・display)

//start()の関数。ボタンの表示、非表示を設定。disabled＝falseだとボタンを表示され、disabled＝tureだと非表示となる。
function start(){
  gu.disabled=false;
  cho.disabled=false;
  pa.disabled=false;
  reset.disabled=true;
}
//display()の関数。ボタンの表示、非表示を設定。disabled＝falseだとボタンを表示され、disabled＝tureだと非表示となる。
function display(){
  gu.disabled=true;
  cho.disabled=true;
  pa.disabled=true;
  reset.disabled=false;
}

最後に、この「start()」と[display()」の関数については、ボタンの表示、非表示の制御のを記述しています。

disabledは非表示を意味していますので、〇〇.disabled=trueとなっているボタンは、非表示となり、〇〇.disabled=falseとなっている場合は、表示されます。

JavaScriptでじゃんけんゲームを作るコードのまとめ

いかがでしたか？？

じゃんけんゲームは、プログラミング初心者がチャレンジするには、非常に勉強になる教材です。

もし、JavaScriptの基礎を学んで、次に何を学習すればよいか悩んでいるのであれば、一度挑戦してみてくださいね。

 

「最近、独学での学習に限界を感じてませんか？」

私もそうでしたが、正直、独学での学習は、非常に効率が悪いんですよね・・・

 

「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。

プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。

ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。

無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！



「最近、独学での学習に限界を感じてませんか？」

 

私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。

 

「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。

プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。

ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。

無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！



関連記事