Html5最简单的游戏Demo——Canvas绘图的骰子 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>骰子游戏</title>
    <script type="text/javascript">
        var crapsSize = 100;//骰子的width，height
        var crapsMargin = 50;//骰子的边距
        var pointRadius = 10;//点的半径
        var money = 500;//钱

        function InitCraps() {
            drawCraps(6, 6, 6);

            var sumLabel = document.getElementById("coinSum");
            sumLabel.textContent = money;
        }

        function Bet() {
            var num1 = Math.floor(Math.random() * 6 + 1);
            var num2 = Math.floor(Math.random() * 6 + 1);
            var num3 = Math.floor(Math.random() * 6 + 1);

            drawCraps(num1, num2, num3);

            var resultLabel = document.getElementById("betResult");
            var sumLabel = document.getElementById("coinSum");
            var bigRadio = document.getElementById("bigRadio");

            var crapsSum = num1 + num2 + num3;
            if (crapsSum == 3 || crapsSum == 18) {//庄家通杀
                money = money - 50;
                sumLabel.textContent = money;
                resultLabel.textContent = "庄家通杀！";
            }
            else if (crapsSum <= 10) {//4~10，小
                if (bigRadio.checked) {
                    money = money - 50;
                    sumLabel.textContent = money;
                    resultLabel.textContent = "有赌未为输，继续！";
                }
                else {
                    money = money + 50;
                    sumLabel.textContent = money;
                    resultLabel.textContent = "不赌不知时运高，继续！";
                }
            }
            else {//11~17，大
                if (bigRadio.checked) {
                    money = money + 50;
                    sumLabel.textContent = money;
                    resultLabel.textContent = "不赌不知时运高，继续！";
                }
                else {
                    money = money - 50;
                    sumLabel.textContent = money;
                    resultLabel.textContent = "有赌未为输，继续！";
                }
            }
        }



        function drawCraps( craps1,craps2,craps3) {
            var ctx = document.getElementById("myCanvas").getContext("2d");

            var crapsArray = new Array(craps1, craps2, craps3);
            for (var i = 0; i < 3; i++) {
                var xOffset = crapsMargin * (i + 1) + crapsSize * i;
                

                ctx.clearRect(xOffset, crapsMargin, crapsSize, crapsSize);
                switch (crapsArray[i]) {
                    case 1: draw1(ctx, xOffset);
                        break;
                    case 2: draw2(ctx, xOffset);
                        break;
                    case 3: draw3(ctx, xOffset);
                        break;
                    case 4: draw4(ctx, xOffset);
                        break;
                    case 5: draw5(ctx, xOffset);
                        break;
                    default: draw6(ctx, xOffset);
                        break;
                }
            }
        }

        function drawRect(ctx,xOffset) {
            ctx.strokeRect(xOffset, crapsMargin, crapsSize, crapsSize);
        }

        function draw1(ctx, xOffset) {
            ctx.beginPath();
            ctx.arc(xOffset + crapsSize / 2, crapsMargin + crapsSize / 2, pointRadius, 0, 2 * Math.PI, true);
            ctx.fill();

            drawRect(ctx, xOffset);
        }

        function draw3(ctx, xOffset) {
            draw1(ctx, xOffset);
            draw2(ctx, xOffset);
        }

        function draw5(ctx, xOffset) {
            draw4(ctx, xOffset);
            draw1(ctx, xOffset);
        }

        function draw4(ctx, xOffset) {
            ctx.beginPath();
            ctx.arc(xOffset + crapsSize / 4, crapsMargin + crapsSize / 4, pointRadius, 0, 2 * Math.PI, true);
            ctx.arc(xOffset + crapsSize / 4, crapsMargin + crapsSize / 4 * 3, pointRadius, 0, 2 * Math.PI, true);
            ctx.closePath();
            ctx.fill();

            ctx.beginPath();
            ctx.arc(xOffset + crapsSize / 4 * 3, crapsMargin + crapsSize / 4, pointRadius, 0, 2 * Math.PI, true);
            ctx.arc(xOffset + crapsSize / 4 * 3, crapsMargin + crapsSize / 4 * 3, pointRadius, 0, 2 * Math.PI, true);
            ctx.closePath();
            ctx.fill();

            drawRect(ctx, xOffset);
        }

        function draw2(ctx, xOffset) {
            ctx.beginPath();
            ctx.arc(xOffset + crapsSize / 4, crapsMargin + crapsSize / 4 * 3, pointRadius, 0, 2 * Math.PI, true);

            ctx.arc(xOffset + crapsSize / 4 * 3, crapsMargin + crapsSize / 4, pointRadius, 0, 2 * Math.PI, true);
            ctx.fill();

            drawRect(ctx, xOffset);
        }

        function draw6(ctx, xOffset) {
            ctx.beginPath();
            ctx.arc(xOffset + crapsSize / 4, crapsMargin + crapsSize / 2, pointRadius, 0, 2 * Math.PI, true);
            ctx.arc(xOffset + crapsSize / 4 * 3, crapsMargin + crapsSize / 2, pointRadius, 0, 2 * Math.PI, true);
            ctx.closePath();
            ctx.fill();

            draw4(ctx, xOffset);
        }
    </script>
</head>
<body onload="InitCraps()">
    <canvas id="myCanvas" width="500" height="200">your broswer does not support canvas.</canvas>
    <br />
    <input type="radio" name="sex" value="大" id="bigRadio" checked="checked"/>大
    <input type="radio" name="sex" value="小" />小
    <br />
    <input type="button" value="play" onclick="Bet()" />
    <br />
    <label>*三个骰子，总点数为4至10称作小，11至17为大，围骰除外</label>
    <br />
    <label>本次结果：</label>
    <label id="betResult">Null</label>
    <br />
    <label>当前钱币总数为：</label>
    <label id="coinSum">0</label>
</body>
</html>

 

posted @ 2014-12-30 10:02  AlvinLiang  阅读(1305)  评论(0)    收藏  举报