1. ジングルは音楽素材/魔王魂さんを利用させていただいています。
2. CSS3を多用しているのでFirefox,chrome推奨。ie9は△です。
3. ソースは好きにしてください。ライツはソースに記載されています。
4. 直接余興に使用してもらってもＯＫです。
5. 裏機能があるので、ソースが冗長です。
6. ディズニーフォントを使用しています。クライアント側にインストールする必要がありますが、いかにもでいい感じです。

実際に使用したところ、会場のプロジェクターの彩度が低くて選択済みの数字がわかりにくいと不評でしたorz
そのあたりは、スタイルシートで調整してください。

結婚式の二次会の余興でBINGOゲームを作る事になりました(一番最後に新郎がビンゴを引き当てるという仕掛け付きなので自作する事にしました）。
で、BINGOゲームは1～75の数字をどんどん抽選していく、いわゆる非復元抽出です。

JavaScriptで実装しようと考えていたときにアルゴリズムがふと思い浮かんだので備忘録として記録しておきます。

昔は「乱数で適当に抽選して重複したら抽選しなおす」方法を良く使っていました。
実用的には問題ないですが、抽選のやり直しが発生したり抽選結果を保持する必要があったりでかっこよくはありません。

JavaScriptで実装する前提で考えた結果、抽選結果を単純に消していけば良いことに気づきました。
C言語だとこれ自体がめんどくさい処理でしたが…

//種
var sheed=[1,2,3,4,5,6,7,8,9,10...75];

function choose() {
  //番号選択
  if (sheed.length == 0) {
      //エラー処理
  }
  var num = sheed[Math.floor(Math.random() * sheed.length)];
  var value = sheed[num];

  //選んだ番号は取り出してしまう。
  sheed.splice(num,1);

  return value;
}

使用例

1.概要

ビンゴゲームWebアプリケーションを作成する。
ただし、作成するのは抽選機能のみ。Webブラウザー上で、グラフィカルに抽選する機能を提供する。
（ビンゴカードをオンラインから取得してもおもしろいかも、全員がスマートフォン時代ならいけるかも）

2.用件

2.1 機能用件

数字は1～75
抽選中のアイコンは大きく表示する
全ての数字のアイコンを画面上に表示しておく
抽選済みの数字は強調表示される
抽選中の演出を用意する。
抽選の乱数は、基底値を固定すると同じ値が選択される
レイアウトは独立して変更可能とする

2.2 非機能用件

言語は、JavaScript+CSS3(for HTML5)

3.設計

3.1概念抽出

• 　数字アイコン
• 　点灯する、消灯する
• 　カレントのアイコン
• 　レイアウト
• 　抽選する
• 　クリアする（初期化する）

3.2 シナリオ

　3.2.1 クリア

　　数字アイコン1～75を消灯状態で表示する
　　カレントアイコンを消灯状態で表示する
　　乱数、抽選情報を初期化する

　3.2.2 抽選する

　　

抽選用演出を開始する

演出は、ランダムに未抽選の数字の選択（選択されると数字アイコンを点灯し、次の数字が選ばれたら消灯する）を繰り返す。

　　

演出を終了する

最終的な抽選を実施して、選択された数字アイコンを点灯させる。
最終的に選ばれた数字アイコンは数回点滅下のちに点灯する。
さらにカレントのアイコンに数字を表示する。

考えがまとまったので後はとっとと実装しまして、
出来上がり。
ソース:bingo.js,bingo_ctl.js
補足も確認して下さい。

• 戦闘の表示効果や効果音を改善しました。
• NPCのAIと移動機能を実装
• お店機能を改善
• 装備による追加効果に対応
• マップエディターを改訂（マップの追加やUIを改善)
• UIの見栄えを少し変更(CSS3を一部使用）
• UIにスピンボックスを追加
• スマートフォンを想定したRTG用のライブラリを作成
• 不具合をそこそこ修正

1. 消費アイテムのみ複数保持するように変更
2. 装備を買ったら、その場で装備する選択肢を追加
3. アイテムを交換できない不具合修正
4. アイテムを売った際にお金が増えない不具合を修正
5. メッセージにスクリプト指定の不具合を修正
6. 宿屋のジングルのタイミングを修正

ナイトリービルドを更新。
習作

補足ですが、キャッシュが効いている場合にCTRL+Rなどでページを再読み込みする必要があります。

余談ですが、VS2003当時は、デフォルトのWINVERの値が低くNTタイマーを使用するために明示的に_WIN32_WINNTバージョンを指定していましたが、ここにあるようにWindows 98などの古いOSが非サポートになったおかげで、バージョンを明示しなくてもNTタイマーが使用できるようになっていました。

1. NPCと自動戦闘可能にしました。
2. NPCの表示・非表示をフラグで指定可能にしました。
3. NPCの移動APIを追加
4. 戦闘時のメッセージ表示を改善
5. メッセージにスクリプト指定に対応
6. ジングルの再生遅延を改善

ナイトリービルドを更新。
習作

補足ですが、キャッシュが効いている場合にCTRL+Rなどでページを再読み込みする必要があります。

TETRIS.Stageクラス

ステージは22本(*1)のラインがあり、ラインは10個の粒（ブロック）で構成されています。
簡単に言えば縦22x横10個の粒で構成されていることになります。
*1 ゲームとして有効なのは20ラインですが、テトリミノが落下する位置として2ライン分追加しています。

ステージの役割は粒の管理で、ラインの削除判定や削除中のラインの状態を管理します。

初期化

ラインを作成します。

DQ.TETRIS.Stage = function (engine) {
    this._engine = engine;
    this.lines = [];
    for (var i = 0; i < 22; i++) {
        this.lines.push(new DQ.TETRIS.Line(i));
    }
}

ゲーム開始時にライン上のチップを削除することで初期化します。

DQ.TETRIS.Stage.prototype = {
    left: DQ.TETRIS.STAGE_LEFT,
    top: -14,
    lines: [],
    clear: function () {
        for (var ln = 0; ln < this.lines.length; ln++) {
            for (var i = 0; i < 10; i++) {
                if (this.lines[ln].chips[i]) {
                    this.lines[ln].chips[i].remove();
                    this.lines[ln].chips[i] = null;
                }
            }
        }
    }
}

当たり判定

Stageクラスが落下中のテトリミノがステージの壁やステージ上の粒にぶつかるかどうかの当たり判定を担当します。

    hitTest: function (mino, dx, dy) {
        ///<summary>
        ///指定のテトリミノの当たり判定をします。
        ///</summary>
        ///<param name="mino" type="Tetrimino">
        ///対象となるテトリミノを指定
        ///</param>
        ///<param name="dx", type="number">
        ///x方向の移動予定幅を指定
        ///</param>
        ///<param name="dy", type="number">
        ///y方向の移動予定幅を指定
        ///</param>

        for (var i = 0; i < 4; i++) {
            var chip = mino.chip(i);
            var cx = Math.floor((chip.x + dx - this.left) / DQ.TETRIS.CHIP_SIZE);
            var cy = Math.floor((chip.y + dy - this.top) / DQ.TETRIS.CHIP_SIZE);
            //wall
            if (cx < 0
                || 10 <= cx
                || 22 <= cy) {
                return true;
            }
            //chip
            if (this.lines[cy].chips[cx]) {
                return true;
            }
        }

        return false;
    }
}

落下中のテトリミノを構成する４つの粒に対して壁とステージ上の粒との当たり判定を実施します。
ステージ上の粒の有無は、対象となる座標に粒のインスタンスがあるかどうかで判定しています。
横移動の場合、hitTest()でfalseが返ると移動できません。
落下処理の場合は、「遊び」状態へ遷移します。「遊び」状態が放置されると落下中のテトリミノはただの粒へと変化します。

粒への移行

落下が完了したテトリミノをラインへ粒として登録します。

{
    transChip: function (mino) {
        ///<summary>
        ///落下中だったテトリミノをチップへ変換します。
        ///</summary>
        ///<param name="mino" type="Tetrimino">
        ///変換するテトリミノを指定
        ///</param>

        for (var i = 0; i < 4; i++) {
            var chip = mino.chip(i);
            var cx = Math.floor((chip.x - this.left) / DQ.TETRIS.CHIP_SIZE);
            var ln = Math.floor((chip.y - this.top) / DQ.TETRIS.CHIP_SIZE);
            this.lines[ln].chips[cx] = new DQ.Screen.Canvas.Sprite({
                image: chipImg.client[0],
                x: cx * DQ.TETRIS.CHIP_SIZE + this.left,
                y: ln * DQ.TETRIS.CHIP_SIZE + this.top,
                width: DQ.TETRIS.CHIP_SIZE,
                height: DQ.TETRIS.CHIP_SIZE,
                dir: mino.type,
                animation: false,
                numberOfPause: 0
            });
            this._engine._canvas.push(this.lines[ln].chips[cx]);
        }
    }
}

テトリミノを構成する４つの粒を該当する座標の粒として登録します。
粒のインスタンスは描画用のSpriteです。スプライトを作成する際には、座標系を粒から画面のpixel単位へ変換しています。
作成したSpriteは、キャンバスへ登録します（これによって、粒の描画はキャンバス(*2)が適宜実行してくれます)。
*2 念のためですが、このキャンバスは拙作のライブラリのキャンバスクラスの事です。

削除判定

ライン上に新しい粒が登録された後は、ラインの削除判定を実施します。

{
    eraseLine: function () {
        this._lineFlash = [];
        for (var i = 21; 2 <= i; i--) {
            if (this.lines[i].canErase()) {
                //削除可能なラインがあったのでフラッシュ状態へ移行
                this.mode = DQ.TETRIS.StageMode.Flash;
                this._elapse = 0;
                var line = new DQ.Screen.Canvas.Sprite({
                    y: i * DQ.TETRIS.CHIP_SIZE + this.top,
                    x: this.left,
                    width: DQ.TETRIS.CHIP_SIZE * 10,
                    height: DQ.TETRIS.CHIP_SIZE,
                    animation: false,
                    numberOfPause: 0,
                    image: flashImg.client[0]
                });
                this._lineFlash.push(line);
                engine._canvas.push(line);
            }
        }
        return this._lineFlash.length;
    },

全てのラインについて削除判定を行います。判定自体はラインクラスに任せていますが、ようはライン内の全ての領域に粒があれば削除可能です。
削除可能なら画面効果用のスプライトを登録しています。
この時点で、ゲーム全体の状態はゲーム中(Play)状態から削除中(Erase)状態へ遷移します。
また、画面効果として削除可能なラインがフラッシュして、しばらくしてからラインが消え、またしばらくしてから全体が落下するようになっています。
ちなみに、メソッドの名前が微妙だったりしますが、そこは目をつぶります。

状態管理

Stageクラスではラインが削除中の場合だけ状態を管理します。状態はUpdate()の呼び出しによる一定の時間経過後に遷移します。

{
    update: function () {
        if (this.mode == DQ.TETRIS.StageMode.None) {
            return;
        }
        this._elapse += 60 / TETRIS.fps;
        if (this.wait <= this._elapse) {
            //時間経過を超えた
            switch (this.mode) {
                case DQ.TETRIS.StageMode.Flash:
                    //フラッシュ中から削除中へ移行
                    this.mode = DQ.TETRIS.StageMode.Erase;
                    this._elapse = 0;
                    for (var i = 21; 2 <= i; i--) {
                        if (this.lines[i].canErase()) {
                            this.lines[i].clear();
                        }
                    }
                    for (var i = 0; i < this._lineFlash.length; i++) {
                        this._lineFlash[i].remove();
                    }
                    this._lineFlash = [];
                    break;
                case DQ.TETRIS.StageMode.Erase:
                    //削除中から通常へ移行
                    this.mode = DQ.TETRIS.StageMode.None;
                    this._elapse = 0;
                    var count = 0;
                    for (var i = 21; 2 <= i; i--) {
                        if (this.lines[i].canDown()) {
                            this.lines.splice(i, 1);
                            count++;
                        }
                    }
                    //削除した分だけラインを追加
                    for (i = 0; i < count; i++) {
                        this.lines.unshift(new DQ.TETRIS.Line(0));
                    }
                    //ライン番号を振り直す
                    for (i = 0; i < 22; i++) {
                        this.lines[i].line(i);
                    }
                    break;
            }
        }
    }
}

ステージの状態はNone→Flash→Erase→Noneへと遷移します。
状態遷移後に経過時間を示す_elapseがクリアされ、一定時間経過後にイベント処理が実施されます。
まず、Flash状態にある場合は削除可能なラインをクリアします。それからフラッシュ効果用のスプライトを削除(remove)します。
（スプライトをremove()するとキャンバスクラスからも削除され、描画の対象から外れます。）
次に削除状態にある場合は、ラインを落下させます。
落下処理については、削除可能なラインを配列から削除して、削除した分のラインを配列の先頭に追加することで落下したように見せています。
余談ですが、ぷよぷよなど粒自体が落ちていく場合にはこの手法は使えないですね。

全体の状態遷移

その２では、割愛していた全体の状態遷移の管理です。
updateメソッド中で、状態毎のチェックを実施しています。

    update: function () {
        var mode = DQ.TETRIS.Mode;
        switch (this.game) {
            case mode.Start:
            case mode.GameOver:
                return;
            case mode.Erase:
                //ラインの削除演出中
                this.stage.update();
                if (this.stage.mode == DQ.TETRIS.StageMode.None) {
                    //演出完了
                    this.game = DQ.TETRIS.Mode.Play;
                    //落下したラインに合わせてゴーストを移動
                    this.moveGhost();
                }
                break;
            case mode.Delay:
                //「遊び」中
                this._elapse += 60 / this.fps;
                if (this.wait <= this._elapse) {
                    this.game = DQ.TETRIS.Mode.Play;
                    this.stage.transChip(this.current);
                    this.current.remove();
                    this.shiftCurrent();
                    soundBox.play(1);

                    var n_line = this.stage.eraseLine();
                    if (n_line > 0) {
                        this.score.score += DQ.TETRIS.Game.ScoreTable[n_line];
                        this.score.line += n_line;
                        var pre = this.score.level;
                        this.score.level = Math.floor(this.score.line / 10) + 1;
                        if (pre != this.score.level) {
                            this.levelUp();
                        }
                        this.updateScore();

                        this.game = DQ.TETRIS.Mode.Erase;
                        return;
                    }
                }
                break;
            case mode.Play:
                //「落下中」
                if (this.isAccelerate()) {
                    if (this.current.y - this._startPos > DQ.TETRIS.CHIP_SIZE) {
                        this.score.score++;
                        this.updateScore();
                        this._startPos += DQ.TETRIS.CHIP_SIZE;
                    }
                }
                var dy = this.gdy;
                if (this.hitTest(0, dy + DQ.TETRIS.CHIP_SIZE)) {
                    //「遊び」に移行
                    this.game = DQ.TETRIS.Mode.Delay;
                    this._elapse = 0;
                    this.stopAccelerate();
                    this.current.move(0, dy);
                    this.current.fit();
                } else {
                    this.current.move(0, dy);

                }
                break;
        }

    }
}

ゲーム全体の状態はゲーム開始直後(StartGame)、ゲームオーバー(GameOver)、ゲーム中(Play)、遊び中(Delay)および削除中(Erase)です。
ゲーム開始直後およびゲームオーバー状態はキー操作があるまでやることも状態遷移もありません。
次に基本となるゲーム状態ですが、ここについては前回説明しているので割愛します。
遊び状態は一定時間が経過するとステージへ定着(transChip)します。それからラインの削除判定を実施し、削除可能なラインがなければゲーム中状態へ遷移し、削除可能なラインがあれば削除中へ遷移します。
また、削除可能なラインがあった場合はスコアーの計算やレベルアップの判定も実施していますが、説明は割愛します。
削除中状態ではステージに状態管理を委譲しています。これは、削除中の演出の管理をStageクラスへ局所化する意図があります。

次回は、ゴーストやハードドロップについてです。

とりあえず遅延ロード

スクリプト内から動的にスクリプトをロードするinclude()関数の例です。

    include = function (file) {
        var s = document.createElement('script');
        s.src = file;
        s.type = 'text/javascript';
        s.defer = 'defer';
        document.head.appendChild(s);
    }

このコード自体はなんでも無いですね。scriptタグをheadタグに追加しているだけです。

ロード完了を待つ

そして読み込み完了を待って、任意のコードを実行するlazyLoad()を実装します。

    lazyLoad = function(url, ctl, fn) {
        function _check(ctl) { //オブジェクトの有無でロード完了を判定
            return !!(eval(ctl));
        }
        if (_check(ctl)) {
            fn && fn(); //ロード済みなら指定の関数をすぐ実行
        } else {
            include(url);
            setTimeout(function () {
                if (!_check(ctl)) {
                    setTimeout(arguments.callee, 15.625);
                } else {
                    fn && fn();//読み込みが終わったら関数を実行
                }
            }, 15.625);
        }
    }

今でもそうだと思うのですが、scriptタグの読み込み完了イベントは拾えないので代わりに遅延ロードしたスクリプトを実行した結果として作成されるオブジェクトの有無を判定に利用します。
後は既に読み込み済みなら遅延ロードを実行しないようにチェックを挟んでおきます。

複数箇所からの呼び出し

先のコードではとりあえず読み込み済みのチェックは実施していますが、遅延ロードが完了する前に複数回同じスクリプトが呼び出されると無駄があったり面倒くさいことが発生するかもしれません。
そこで同じスクリプトに対しては一度しかinclude()が呼び出されないようにします。

    _urls = [];
    lazyLoad = function (url, ctl, fn) {
        function _check(ctl) {
            return !!(eval(ctl));
        }
        if (_check(ctl)) {
            fn && fn();
            _remove$lazyLoad();
        } else {
            if (_urls[url]) { //リクエスト済みならfnのみ登録して終了。
                _urls[url].push(fn);
                return;
            }
            _urls[url] = [];
            include(url);
            _urls[url].push(fn);
            setTimeout(function () {
                if (!_check(ctl)) {
                    setTimeout(arguments.callee, 15.625);
                } else {
                    for (var i = 0; i < DQ._urls[url].length; i++) {
                        _urls[url][i] && DQ._urls[url][i].call();
                    }
                    delete _urls[url];
                }
            }, 15.625);
        }
    }

読み込み中のスクリプトと読み込み完了時に実行される関数を_urlsに追加しています。
`

複数のスクリプトを遅延ロードする

複数のスクリプトを遅延ロードしてから自身のコードを実行したい場合どうなるのでしょうか。

lazyLoad("first.js", "Window.FIRST", function() {
  layzLoad("second.js", "Window.SECOND", function() {
      ... //自分のコード
  });
});

もしくは

lazyLoad("first.js", "Window.FIRST");
layzLoad("second.js", "Window.SECOND", function() {
    ... //自分のコード
});

まあ、どちらもいまいちですね。
そこで、全ての遅延ロードが完了したら呼び出される、afterLoad()という関数を用意します。

    lazyLoad = function (url, ctl, fn) {
        function _check(ctl) {
            return !!(eval(ctl));
        }
        if (_check(ctl)) {
            fn && fn();
            __remove$lazyLoad();
        } else {
            if (_urls[url]) {
                _urls[url].push(fn);
                return;
            }
            _urls[url] = [];
            include(url);
            _urls[url].push(fn);

            setTimeout(function () {
                if (!_check(ctl)) {
                    setTimeout(arguments.callee, 15.625);
                } else {
                    for (var i = 0; i < _urls[url].length; i++) {
                        _urls[url][i] && _urls[url][i].call();
                    }
                    delete _urls[url];
                    _remove$lazyLoad();
                }

            }, 15.625);
        }
_
        function _remove$lazyLoad() {
            var cnt = 0;
            for (var nm in DQ._urls) {
                cnt += _urls.hasOwnProperty(nm) ? 1 : 0;
            }
            if (cnt == 0) {
                __trigger && setTimeout(DQ.__trigger, 0);
            }
        }
    }

__trigger = function () {
    for (var i = 0; i < _onLoad.length; i++) {
        _onLoad[i].call();
    }
    _onLoad.length = 0;
    delete __trigger;
}
_onLoad = [];
afterLoad = function (callback) {
    _onLoad.push(callback);
}

使い方は以下の通りです。

lazyLoad("first.js", "Window.FIRST");
layzLoad("second.js", "Window.SECOND");
afterLoad(function() {
    ... //自分のコード
});

より複雑なケースでは問題が出る可能性もありますが、そこは宿題ということで。