Java Scriptの基本その10　HTML、CSSとの連携

イントロダクション

JavaScriptを使った「数字を当てよう」ゲームの解説です。まず、secretNumber変数に1から20までのランダムな数を設定し、プレイヤーのスコアをdefaltScoreで初期化します。「当てる」ボタンを押すと、入力された数字と正解の数字を比較し、結果を表示します。「もう一回」ボタンを押すとゲームがリセットされ、再挑戦できます。これで簡単に楽しいゲームが作れますよ！

こんな感じのゲームを作ります

1. 変数の定義と初期化

このゲームの始まりには、いくつかの重要な変数が定義され、初期化されています。

let secretNumber = Math.trunc(Math.random() * 20) + 1;
let defaltScore = 20;
let highScore = 0;

• secretNumber: 1から20の範囲でランダムな整数を生成します。Math.trunc() 関数を使用して小数点以下を切り捨てます。

• defaltScore: プレイヤーの現在のスコアを示す変数で、初期値は20です。

• highScore: プレイヤーが達成した最高スコアを保持するための変数で、初期値は0です。

これらの変数はゲームの進行状況を追跡し、後で結果を表示するために使用されます。

2. 「当てる」ボタンのクリックイベント

プレイヤーが「当てる」ボタンをクリックすると、以下のコードが実行されます。

document.querySelector(".check").addEventListener("click", function () {
  const guessNumber = Number(document.querySelector(".guessNumber").value);
  console.log(guessNumber, typeof guessNumber);
  if (!guessNumber) {
    document.querySelector(".message").textContent = "No number";
  } else if (guessNumber === secretNumber) {
    document.querySelector(".message").textContent = "Correct Number";
    defaltScore++;
    document.querySelector(".score").textContent = defaltScore;
    document.querySelector("body").style.backgroundColor = "#f9f0e4";
    document.querySelector(".message").style.fontSize = "32px";
    if (defaltScore > highScore) {
      highScore = defaltScore;
      document.querySelector(".highscore").textContent = highScore;
    }
  } else if (guessNumber > secretNumber) {
    document.querySelector(".message").textContent = "もっと低いよ";
    defaltScore--;
    document.querySelector(".score").textContent = defaltScore;
  } else if (guessNumber < secretNumber) {
    document.querySelector(".message").textContent = "もっと高いよ";
    defaltScore--;
    document.querySelector(".score").textContent = defaltScore;
  }
});

• .checkボタンがクリックされると、プレイヤーが入力した数字を取得します。

• 入力がない場合は「No number」というメッセージを表示します。

• 入力が正解の数字と一致した場合、メッセージを「Correct Number」に変更し、スコアを1点増やします。また、背景色を変更し、フォントサイズを大きくします。

• 入力が正解より大きい場合は「もっと低いよ」、小さい場合は「もっと高いよ」というメッセージを表示し、スコアを1点減らします。

3. 「もう一回」ボタンのクリックイベント

プレイヤーが「もう一回」ボタンをクリックすると、ゲームがリセットされます。

document.querySelector(".again").addEventListener("click", function () {
  defaltScore = 20;
  secretNumber = Math.trunc(Math.random() * 20) + 1;
  document.querySelector(".message").textContent = "Start Guessing...";
  document.querySelector(".score").textContent = defaltScore;
  document.querySelector(".guessNumber").value = "";
  document.querySelector("body").style.backgroundColor = "#ffdcaa";
  document.querySelector(".message").style.fontSize = "";
});

• defaltScoreとsecretNumberがリセットされ、新しいゲームが開始されます。

• メッセージ、スコア、入力フィールド、背景色、フォントサイズが初期状態に戻されます。

まとめ

このゲームは、JavaScriptの基本的な変数操作やイベントリスナーの使い方を学ぶのに最適です。自分で数値を入力して当てる楽しさもあり、プログラミングの実践的なスキルを身につけることができます。簡単に作れるので、ぜひ試してみてください！

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！