JavaScript

JavaScript 数字大小予想ゲームHighOrLowを作成してみた

読了時間: 約356
数字大小予想ゲーム HighOrLow

最近、私はプログラミングをするのが楽しくなってきました。
まだまだ大したものは作れませんが、それでも実際に動くものができるとうれしくなりますね!

今日も、昨日に引き続きJavaScriptのプログラミングをしてみました。
そして、またまたミニゲームを作成してみましたよ。
その名も「HighOrLow」です!

HighOrLowは、次に出る数字が大きいか小さいかを予想して当てるゲームです。
連続して何回当てられるかに挑戦します。

今回の記事では、HighOrLowの遊び方とその仕組みについて解説します。

HighOrLowとは?

HighOrLowは、問題の数字よりも次に出る数字が大きいか(High)または小さいか(Low)を予想して当てるゲームです。
ルールがシンプルなので、誰でも遊ぶことができますよ。

HighOrLowのルール

例えば、問題の数字が7だとしたら…。
次に出る数字が7よりも大きいか小さいかを予想します。
大きいと思えばHigh、小さいと思えばLowを選択します。

選択が終わると、結果が表示されます。
正解なら点数が1点加算され、不正解なら点数は0になります。
すなわち、連続正解数が点数となるわけですね。

数字はランダムに1〜13の間で選ばれます。
極端に小さい数や大きい数が問題になれば予想しやすいですが…。
中間あたりの数が問題になると、そこは運試しになってきます。
あなたの運がどれほどのものか試してみましょう。

HighOrLowの遊び方

HighOrLowは、以下のリンク先になります。
ルール説明の下に、ゲームエリアがあります。

数字大小予想ゲーム HighOrLow

ゲームエリアには、3つのボタンがあります。
Nextボタンは、次の問題を表示する際に使用するものです。
Highボタンは、次の数字が大きいと思った時に押すものです。
Lowボタンは、次の数字が小さいと思った時に押すものです。
メッセージが表示されますので、その指示に従ってゲームをプレイしてください。

数字大小予想ゲーム HighOrLow

HighOrLowの仕組み

HighOrLowでは、JavaScriptを使ってゲームの主な処理を行っています。

HighまたはLowボタンが押されると、正解かどうかのチェック判定をします。
正解なら点数の加算と正解メッセージの表示、不正解なら点数の初期化と不正解メッセージを表示します。
チェック判定はcheck関数内で行っています。

class Game {
    ...
    check(isHigh) {
        this.targetNum = Util.random(1, 13);

        // High
        if(this.targetNum > this.currentNum) {
            if(isHigh == 1) {
                this.score++;
                this.result = 1;
            } else {
                this.score = 0;
                this.result = -1;
            }
        }
        // Low
        else if(this.targetNum < this.currentNum) {
            if(isHigh == -1) {
                this.score++;
                this.result = 1;
            } else {
                this.score = 0;
                this.result = -1;
            }
        }
        // Draw
        else {
            this.check(isHigh);
            return;
        }

        this.gameView.onCheck(this.targetNum, this.score, this.result);
    }
...
}

Nextボタンが押された時に、問題を生成するのですが…。
これは単に乱数を取得して保持するだけです。

class Game {
    ...
    createQuestion() {
        this.currentNum = Util.random(1, 13);
        this.gameView.onCreateQuestion(this.currentNum);
    }
    ...
}

あとはHTMLやCSSを使って、ゲームの状況を良い具合に表示してやれば良いですね。
HTMLの書き換えにはjQueryを使っています。

完全なソースコードは、お使いのウェブブラウザの「ページのソースを表示」で確認することができます。
興味がある方はチェックしてみてください。

まとめ

今回の記事では、数字大小予想ゲームHighOrLowの遊び方とその仕組みについて解説しました。
大きいか小さいかを予想するだけというシンプルなゲームですので、作るのはそれほど難しくはありませんね。
ただ、実装方法が今のやり方で良いのかというのはよく分かりません。
とりあえず、ちゃんと動いているので良しとしていますけど…。

HighOrLowは、老若男女問わず誰でも気軽に遊ぶことができます。
暇な時にでもぜひプレイしてみてください。
最高何点を取ることができるのか!?
あなたの運を試してみましょう。

数字大小予想ゲーム HighOrLow

書いた人: 鈴木俊吾(すずしん)
フリーランスのライター・ブロガー・プログラマ。

大学卒業後、公務員を目指していたが失敗。
その後、仕事をしようとするも全て不採用に。
そのうち、心を病んで統合失調症を発症。
入退院を繰り返す。

「仕事をもらえないなら自分で作ればいい」「自分の好きな仕事だけをやろう!」と思うようになり、フリーランスに転身。
現在は、ブログの更新やアプリ開発を主な仕事にしている。

趣味は音楽鑑賞・読書・カラオケ・オセロ。
特に好きな歌手は水樹奈々で、ファンクラブにも所属している。
最近ハマっている曲は「恋想花火」。

フィードを登録していただくと、ブログの更新を把握しやすくなります。
あなたからの登録をお待ちしています!

Feedly
RSS

Twitter: @suzushin7

POSTED COMMENT

  1. あか男 より:

    またまたミニゲームですね。

    今回の方が簡単で、当てやすかったです(^^)

    • すずしん より:

      あか男さん

      コメントありがとうございます。

      またまた作ってみましたよっ!
      今回のミニゲームはシンプルなので遊びやすいですよね。
      ただ、簡単すぎてすぐ飽きてしまうかも…(笑)。

コメントを残す

%d人のブロガーが「いいね」をつけました。