JavaScript+canvasでサイコロを回す - purkinje @ ウィキ

サイコロを2個振る関数を dice.roll2dice() として、このように定義しました。

ポイントは、setTimeoutを使って、100ミリ秒後に自分自身を呼び出すこと。 これで、何らかの外圧（ユーザーが dice.stop() を実行する）がない限り、 サイコロは約100ミリ秒毎に目を変え続けることになる。

alert("ピップは治療薬を飲んだ。生命点の回復量を決めるために、サイコロを2個振れ。");
dice.rolloing_state = "rolling";
dice.roll2dice();

dice.roll2dice = function() {
    // ユーザーがdice.stop();を押すとdice.rolling_state === "rolled"になり、止まる
    if (this.rolling_state === "rolling") { 
    
        ctx.clearRect(0, 0, 500, 210); // canvasをクリア

        this.die1pip = Math.ceil(Math.random() * 6); // 左のサイコロの目
        switch (this.die1pip) {
            case 1:
                draw_pip1(150, 105); // 1の目のサイコロを描く
                break;
            case 2:
                draw_pip2(150, 105); // 2の目のサイコロを描く
                break;
            case 3:
                draw_pip3(150, 105);  // 3の目のサイコロを描く
                break;
            case 4:
                draw_pip4(150, 105); // 4の目のサイコロを描く
                break;
            case 5:
                draw_pip5(150, 105); // 5の目のサイコロを描く
                break;
            case 6:
                draw_pip6(150, 105); // 6の目のサイコロを描く
                break;
        }

          this.die2pip = Math.ceil(Math.random() * 6); // 右のサイコロの目
        switch (this.die2pip) {
            case 1:
                draw_pip1(350, 105); // 1の目のサイコロを描く
                break;
            case 2:
                draw_pip2(350, 105); // 2の目のサイコロを描く
                break;
            case 3:
                draw_pip3(350, 105); // 3の目のサイコロを描く
                break;
            case 4:
                draw_pip4(350, 105); // 4の目のサイコロを描く
                break;
            case 5:
                draw_pip5(350, 105); // 5の目のサイコロを描く
                break;
            case 6:
                draw_pip6(350, 105); // 6の目のサイコロを描く
                break;
       } 

        // dice.roll_speed === 100ミリ秒後に自分自身を呼び出す
        setTimeout("dice.roll2dice()", this.roll_speed); 
    }
}

そして、ユーザーが回っているサイコロをクリック（実はサイコロを狙わなくてもキャンバス内ならおｋ）すると、 dice.stop() が実行される。

<canvas id="dice_canvas" width="500" height="210" onclick="dice.stop()" style="background: #ccffcc;"></canvas>

dice.stop() で、dice.rolling_state が "rolling" から "rolled" になると、dice.roll2dice() の再度自己呼出が止まり、サイコロが止まる。

dice.stop = function () {
    if (this.rolling_state === "rolling") {
        this.rolling_state = "rolled";
    }
}