<!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. Oracle VM VirtualBox使用的注意事项

    Oracle VM VirtualBox使用的注意事项 Oracle VM VirtualBox 上克隆虚拟机 方法一 1.复制源虚拟里的 vdi 文件到新的目录 2.命令行进入 Oracle VM  ...

  2. IOS 京东相关app 出现“网络请求失败，请检查您的网络设置”的解决办法

    问题情况 在IOS系统下,下载安装或者更新新版的京东相关app之后,打开app直接就是“网络请求失败,请检查网络设置”,无论是数据连接还是wifi都试了,都是网络请求失败. 然而打开无线局域网-使用无 ...

  3. 将TensorFlow模型变为pb——官方本身提供API，直接调用即可

    TensorFlow: How to freeze a model and serve it with a python API 参考:https://blog.metaflow.fr/tensorf ...

  4. 机器人走迷宫（dfs）

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=1590 #include <stdio.h ...

  5. mysql如何查询最新插入的数据

    在MySQL中,使用auto_increment类型的id字段作为表的主键,并用它作为其他表的外键,形成“主从表结构”,这是数据库设计中常见的用法.但是在具体生成id的时候,我们的操作顺序一般是:先在 ...

  6. 移动App服务端架构设计

      我从事手机app服务端开发现在已经是3个年头,自己也整理出了一套相对好用的服务架构,写出来,跟大家一起分享.如有不足,还请多指教. 一:基础流程图. 其实有一点还需要加上,就是对json的压缩和加 ...

  7. android 自定义view 前的基础知识

    本篇文章是自己自学自定义view前的准备,具体参考资料来自 Android LayoutInflater原理分析,带你一步步深入了解View(一) Android视图绘制流程完全解析,带你一步步深入了 ...

  8. Dubbo的@Reference和@Service说明---1Reference用在消费者2Service用在提供者【import com.alibaba.dubbo.config.annotation.Service;】

    @Reference 用在消费端,表明使用的是服务端的什么服务@RestControllerpublic class RemoteUserController { @Reference(version ...

  9. SQLServer XXX IS NOT NULL

    SQLServer中不能使用像Java和C#中的  XXX!=null   这种用法, 使用上面的用法返回值永远是False False False 正确的用法应该是--> XXXis not ...

  10. swift-自定义TabBar工具栏

    class EBTAppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application(ap ...