<!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绘图的骰子的更多相关文章

  1. Html5最简单的游戏Demo——Canvas绘图的弹弹球

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. Html5 学习系列（五）Canvas绘图API快速入门（1）

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  3. HTML5 学习总结（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  4. HTML5 学习笔记（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  5. Html5 学习系列（五）Canvas绘图API快速入门（2）

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  6. HTML5 十大新特性(四)——Canvas绘图

    H5引入了canvas标签,默认是一个300*150的inline-block.canvas的宽高只能用它自身的width和height属性来指定,而不能使用css样式中的width.height. ...

  7. 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习

    源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  9. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

随机推荐

  1. curses-键盘编码-openssl加解密【转】

    本文转载自;https://zhuanlan.zhihu.com/p/26164115 1.1 键盘编码 按键过程:当用户按下某个键时, 1.键盘会检测到这个动作,并通过键盘控制器把扫描码(scan ...

  2. 【BZOJ 2565】 最长双回文串

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2565 [算法] Manacher [代码] #include<bits/std ...

  3. B1232 [Usaco2008Nov]安慰奶牛cheer 最小生成树

    %%%小詹太巨啦!!!我就想直接最小生成树之后建树跑dfs,然后写跪了...然后看小詹博客之后恍然大悟,原来直接把边权改为w * 2 + 两边点权值就行了. 但是还是不对,为什么呢?原来我们起点走了三 ...

  4. google搜索引擎使用方法

    搜索引擎命令大全!这是一个我最喜欢的Google搜索技巧的清单: link:URL = 列出到链接到目标URL的网页清单. related:URL = 列出于目标URL地址有关的网页. site:ht ...

  5. Coursera Algorithms Programming Assignment 2: Deque and Randomized Queue （100分）

    作业原文:http://coursera.cs.princeton.edu/algs4/assignments/queues.html 这次作业与第一周作业相比,稍微简单一些.有三个编程练习:双端队列 ...

  6. Network Saboteur(dfs)

    http://poj.org/problem?id=2531 不太理解这个代码... #include <stdio.h> #include <string.h> ][],v[ ...

  7. ride关键字

    定义变量:set variable 打印 :log 列表:create list 字符转数字型:evaluate 随机数:evaluate random.randint 日志截图:先导入screens ...

  8. 工作2-5年，身为iOS开发的我应该怎么选择进修方向？

    前言: 跳槽,面试,进阶,加薪:这些字眼,相信每位程序员都不陌生! 但是方向的选择,却不知如何抉择!其实最好的方向,已经在各个企业面试需求中完美的体现出来了: 本文展示了2份面试需求,以及方向的总结, ...

  9. 10.Flask-上下文

    1.1.local线程隔离对象 不用local对象的情况 from threading import Thread request = ' class MyThread(Thread): def ru ...

  10. A - Supermarket

    Problem description We often go to supermarkets to buy some fruits or vegetables, and on the tag the ...