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>
巴特西

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

最新文章

热门文章
