はじめに

個人的に小学生向けのプログラミング教室などで、指導をしたりしているので、Javascriptの初歩的なものを作ってみる。

初心者向きなので、コードの中にメモが多めにしています。
作っているバージョンは、Node.jsのv12.4.0と、Homebrew 2.1.6を利用しています。

作るべきものを書き出そう

初心者がやるべきことは、やるべきことを書き出してみること。

5回戦を行う、じゃんけんゲームを作るとしたら、何が必要でしょうか？
必要な機能をざっと考えてみましょう。
そして無くてはならない機能と、あったら良いなと思う機能を、MUST要件とWANT要件に分ける。

じゃんけんゲームに必要な要素

MUST要件(無くてはならない機能)
- じゃんけんに必要なグーチョキパーなどの配列やスコア表
- 自分の手を入力する機能
- 相手の手をランダムに出す機能
- 勝ち負けを判断する機能
WANT要件(あったら良いなと思う機能)
- 最初に自分の名前を入力する
- 5回勝負を行う
- 最終スコアをだす
- 最終スコアを出す前に、少し待機時間を作り、ドキドキ感をつくる

このようになります。
実際の場では、WANT項目はこの機能が本当に必要なのかを、考えながら作っていきます。

が今回は、すべての機能を作っていきましょう。

コードを書く前の準備

下記２つは終わらせておきましょう。

環境構築のやりかた

npmの使い方

機能をつくる

最初に自分の名前を入力する

readlineSyncをつかって、自分の名前を入力する。

import readlineSync from "readline-sync";

//ユーザー名を設定する
const userName = readlineSync.question("あなたの名前を入力してください：");
const enemyName = "相手";

じゃんけんに必要なグーチョキパーなどの配列やスコア表

//じゃんけんの出すものを決定する
const jankens = ["グー","チョキ","パー"];
//自分のスコアと、相手のスコア
const allScore = [0,0];

下記機能4つ分

5回勝負を行う
自分の手を入力する機能
相手の手をランダムに出す機能
勝ち負けを判断する機能

for (let　step = 0; step < 5; step++) {
  //自分の手を入力して、グーチョキパーのいずれかでなければもう一度手を選択
  const userNumber = readlineSync.questionInt("何を出しますか？\n（グーは1、チョキは2、パーは3）：",{limit: '$<1-3>'})-1;
  for(let none =0 ; none < 1 ; none++){
    if((userNumber >= 0) && (userNumber <=2)) {
      console.log("勝負開始だよ！")
    }else{
      console.log('1〜3で入力してね!');
      userNumber = readlineSync.questionInt("何を出しますか？\n（グーは1、チョキは2、パーは3）：",{limit: '$<1-3>'})-1;
      none-- ;
    }
  }

  //自分の手と、相手の手を、数字から文字列に変換する。
  const userJanken = jankens[userNumber];
  const min = 0,max = 2 ;
  let enemyNumber = Math.floor( Math.random() * (max + 1 - min) ) + min ;
  const enemyJanken = jankens[enemyNumber];

  //判定を行い、あいこであればもう一度戦う。勝ち負けが決まればスコアをつける。
  const result = console.log(`\n${userName}さんは${userJanken}、${enemyName}は${enemyJanken}だ！判定は……\n`);

  if(userNumber === enemyNumber){
    result;
    console.log("あいこ！もう一回！\n");
    step --;
  }else if ((userNumber === 0 && enemyNumber === 1) ||(userNumber === 1 && enemyNumber === 2) ||(userNumber === 2 && enemyNumber === 3) ) {
    result;
    allScoreResult;
    allScore[0] ++;
    console.log(`勝ったよ！${userName}さんにスコア1点プラス\n`);
  }else {
    result;
    allScoreResult;
    allScore[1] ++;
    console.log(`負けたよT_T${enemyName}にスコア1点プラス\n`);
  }

const allScoreResult = console.log(`\n自分のスコアは${allScore[0]}点、${enemyName}のスコアは${allScore[1]}点\n`);
}

最終スコアを出す前に、少し待機時間を作り、ドキドキ感をつくる

//終了後に最終スコアを算出する。
console.log("終了!!\n最終スコアを算出中だよ……");

//1秒まってから文字を出力する
function sleep(waitMsec) {
  // 現時刻 + さっき指定した時刻　< 引数分まつ(単位はミリ秒)
  var startMsec = new Date();
  while (new Date() - startMsec < waitMsec);
}

sleep(1000);

最終スコアをだす

//最終スコアを出し、勝利した人の名前を出す。
const finalScoreResult = console.log(`\n自分のスコアは${allScore[0]}点\n\n${enemyName}のスコアは${allScore[1]}点\n`);
if(allScore[0]>allScore[1]){
  console.log(`やったね！${userName}さんの勝利！`);
}else{
  console.log(`残念、${userName}の負けだよ……。`);
}

【Javascript初心者向け】じゃんけんゲームを作ってみる