<!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. luogu2828 [HEOI2016/TJOI2016]排序

    题目大意 给出一个1到n的全排列,现在对这个全排列序列进行m次局部排序,排序分为两种:(0,l,r)表示将区间[l,r]的数字升序排序:(1,l,r)表示将区间[l,r]的数字降序排序.最后询问第q位 ...

  2. Java-JRE：JRE百科

    ylbtech-Java-JRE:JRE百科 JRE是Java Runtime Environment缩写,指Java运行环境,是Sun的产品.运行JAVA程序所必须的环境的集合,包含JVM标准实现及 ...

  3. nodejs express开发

    用NodeJS+Express开发WEB应用---第一篇 大漠穷秋2014-03-28 预热 为了对后面的内容理解更加透彻,推荐首先阅读下面这篇很好的文章: http://www.nodebeginn ...

  4. python3+request接口自动化框架中自动发送邮件

    在上一篇中的自动化框架中没有放上自动发送测试结果到邮箱的功能,在这篇文章中在补一下,哈哈 1.上一篇的代码就不在一一介绍了,本篇只介绍发送邮件的功能代码 2.在public common 文件夹中创建 ...

  5. JavaScript学习三

    2019-05-30 20:38:50 逻辑运算符 && || ! !如果对非布尔值取反,则将会把数值变成布尔值,然后再取反 隐式类型转化 为任意的数据类型做两次非运算,既可将其转换成 ...

  6. HDU2186

    2019-05-30 19:31:10 水题 #include <bits/stdc++.h> using namespace std; int main() { int c; scanf ...

  7. centos 修改ssh端口，以支持vsftp

    vi /etc/ssh/sshd_config Port 22 Port 2225执行/etc/init.d/sshd restart   启动SSH服务,这样SSH端口将同时工作与22和2225上. ...

  8. 管理mysql数据严格模式，和安全模式处理

    最近使用mysql数据库高一点的版本遇到了,插入和修改等语句失败情况.语句没有错误,但是workbench提示 Field 'id' doesn't have a default value.原因是 ...

  9. Lambda&Linq

    var list = new List<Model> { , UserName = ", Email = "zhang3@yoy.com"}, , UserN ...

  10. ios 指纹识别解锁

    :添加LocalAuthentication.framework框架 :实现过程 #import "ViewController.h" #import <LocalAuthe ...