代码如下：

 <!DOCTYPE>

 <html>

     <title>柯乐义</title>

     <head>

         <script>

             var leftX = 150;

             var topY = 100;

             var diceX = 80;

             var diceY = 80;

             var dotR = 4;

             var count = 0;

             var lastNum = 0;

             var flag = false;

             function clickMe() {

                 count = 0;

                 if(flag) {

                     return false;

                 }

                 flag = true;

                 var ctx = document.getElementById("canvas").getContext('2d');

                 ctx.beginPath();

                 //ctx.arc(100,100,50,0,Math.PI,false);

                 ctx.strokeRect(leftX,topY,diceX,diceY);

                setTimeout(function(){

                     random(ctx);

                },200);

             }

             function drawDice(ctx,randomNum) {

                 ctx.clearRect(leftX,topY,diceX,diceY);

                     switch(randomNum) {

                         case 1:

                             draw1();

                             break;

                         case 2:

                             draw2();

                             break;

                         case 3:

                             draw3();

                             break;

                         case 4:

                             draw4();

                             break;

                         case 5:

                             draw5();

                             break;

                         case 6:

                             draw6();

                             break;

                     }

                     count++;

                     if(count>=20) {

                         if(randomNum==6) {

                             alert("哇！你走狗屎运啦，今天可以去买彩票啦");

                         } else if(randomNum <=3) {

                             alert("今天运气不太好哦！再试一把");

                         } else {

                             alert("请再接再厉，在来一把");

                         }

                         flag = false;

                         return false;

                     } else {

                         setTimeout(function(){

                             random(ctx);

                        },200-count);

                     }

             }

             function random(ctx) {

                 var randomNum = Math.floor(Math.random()*6)+1;

                 if(randomNum == lastNum) {

                     random(ctx)

                 } else {

                     lastNum = randomNum;

                     drawDice(ctx,randomNum);

                 }

             }

             function commonDraw(ctx,dotX,dotY) {

                 ctx.beginPath();

                 ctx.arc(dotX,dotY,dotR,0,2*Math.PI,false);

                 ctx.stroke();

                 ctx.fill();

             }

             function draw1() {

                 var ctx = document.getElementById("canvas").getContext('2d');

                 ctx.fillStyle="#0000ff";

                 var dotX = leftX+diceX/2;

                 var dotY = topY+diceY/2;

                 commonDraw(ctx,dotX,dotY);

             }

             function draw2() {

                 var ctx = document.getElementById("canvas").getContext('2d');

                 ctx.fillStyle="#99FF66";

                 var dotX = leftX+4*dotR;

                 var dotY = topY+4*dotR;

                 commonDraw(ctx,dotX,dotY);

                 var dotX = leftX+diceX-4*dotR;

                 var dotY = topY+diceY-4*dotR;

                 commonDraw(ctx,dotX,dotY);

             }

             function draw3() {

                 draw1();

                 draw2();

             }

             function draw4() {

                 draw2();

                 var ctx = document.getElementById("canvas").getContext('2d');

                 ctx.fillStyle="#99CC00";

                 var dotX = leftX+diceX-4*dotR;

                 var dotY = topY+4*dotR;

                 commonDraw(ctx,dotX,dotY);

                 var dotX = leftX+4*dotR;

                 var dotY = topY+diceY-4*dotR;

                 commonDraw(ctx,dotX,dotY);

             }

             function draw5(){

                 draw1();

                 draw4();

             }

             //http://www.cnblogs.com/sosoft/

             function draw6(){

                 var ctx = document.getElementById("canvas").getContext('2d');

                 ctx.fillStyle="#996633";

                 var dotX = leftX+4*dotR;

                 var dotY = topY+diceY/2

                 commonDraw(ctx,dotX,dotY);

                 var dotX = leftX+diceY-4*dotR;

                 commonDraw(ctx,dotX,dotY);

                 draw4();

             }

             function  init() {

                 var ctx = document.getElementById("canvas").getContext('2d');

                 ctx.beginPath();

                 ctx.strokeRect(leftX,topY,diceX,diceY);

                 ctx.stroke();

                 draw6();

             }

         </script>

     </head>

     <body onload="init();">

         <canvas id="canvas" width="400" height="300" style="background-color:#CCFFCC">

             your brower is not support html5

         </canvas>

         <input type="button" value="掷骰子" onclick="clickMe();"/>

     </body>

 </html>

html5掷骰子的小demo的更多相关文章

  1. TurnipBit开发板掷骰子小游戏DIY教程实例

    转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇) 0x00前言 下面带大家用TurnipBit开发板实现一个简单的小游戏- ...

  2. 掷骰子游戏窗体实现--Java初级小项目

    掷骰子 **多线程&&观察者模式 题目要求:<掷骰子>窗体小游戏,在该游戏中,玩家初始拥有1000的金钱,每次输入押大还是押小,以及下注金额,随机3个骰子的点数,如果3个骰 ...

  3. Python Tkinter小实例——模拟掷骰子

    什么是Tkinter? Tkinter 是 Python 的标准 GUI 库.Python 使用 Tkinter 可以快速的创建 GUI 应用程序. 由于 Tkinter 是内置到 python 的安 ...

  4. 掷骰子-IOS新手项目练习（抱歉，由于个人原因，图片没显示，要源码的项目私聊）

    ---恢复内容开始--- 今天我们来讲的就是项目<掷骰子> 首先我们先下载资源包,也就是我们需要的图片[点击图片下载] 在我们下载完图片之后,我们就可以开始创建项目 一.我们项目的做法可以 ...

  5. jQuery掷骰子

    网上找的jQuery掷骰子效果,测试兼容IE7及以上浏览器,IE6没有测试 js代码如下: $(function(){ var dice = $("#dice"); dice.cl ...

  6. 3星|《给你讲个笑话：我是创业公司CEO》:创业成功就是上帝掷骰子

    给你讲个笑话:我是创业公司CEO 作者有过数次创业经历,最后一次在济南创业,后来公司搬到北京,看书中的交代公司目前好像还不算太成功.书中交代作者公司的业务是文化产品的策划,没细说做什么,也没说做成过哪 ...

  7. 【Tyvj2046】掷骰子

    好水一道题 掷骰子Description Rainbow和Freda通过一次偶然的机会来到了魔界.魔界的大门上赫然写着:小盆友们,欢迎来到魔界~!乃们需要解决这样一个问题才能进入哦lala~有N枚骰子 ...

  8. python学习之掷骰子游戏

    """ 通过学习的python知识,写一个简单的python小游戏 游戏名字:掷骰子比大小 游戏规则: 1.玩家可以选择玩掷几个骰子游戏(默认3个) 2.玩家可以设置双方 ...

  9. 一个上传图片，预览图片的小demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. svn import-纳入版本控制

    转svn import-纳入版本控制 import: 将未纳入版本控制的文件或目录树提交到版本库.用法: import [PATH] URL 递归地提交 PATH 的副本至 URL.  如果省略 PA ...

  2. Redis学习笔记~Redis主从服务器，读写分离

    回到目录 Redis这个Nosql的存储系统一般会被部署到linux系统中,我们可以把它当成是一个数据服务器,对于并发理大时,我们会使用多台服务器充当Redis服务器,这时,各个Redis之间也是分布 ...

  3. 知方可补不足~用CDC功能来对数据库变更进行捕捉

    回到目录 如果我们希望监视一个数据表的变化,在sql2008之前的版本里,在数据库端可能想到的只有触发器,或者在程序端通过监视自己的insert,update,delete来实现相应的功能,这种实现无 ...

  4. Atitit 数据处理查询 中的异常标准化草案 jpa jdbc hb  oql规范attilax总结

    Atitit 数据处理查询 中的异常标准化草案 jpa jdbc hb  oql规范attilax总结 Javaee6 与net 异常规范1 Jpa规范 JPA全称Java Persistence A ...

  5. fir.im Weekly - 可能是 iOS 审核最全面的解决方案

    ipv6 被拒绝,后台定位被拒绝--让很多国内 iOS 开发者心力交瘁.这是一份关于 iOS 审核的终极免费方案,作者iOSWang对最近iOS 审核被拒问题给出了比较全面的方案:Solve-App- ...

  6. asp.net 有关时间各种（输出）处理

    有关一下时间处理方法 /// <summary> /// 将时间转换成几小时.几天之类的格式 /// </summary> /// <param name="m ...

  7. 每天一个linux命令（27）：linux chmod命令

    chmod命令用于改变linux系统文件或目录的访问权限.用它控制文件或目录的访问权限.该命令有两种用法.一种是包含字母和操作符表达式的文字设定法:另一种是包含数字的数字设定法. Linux系统中的每 ...

  8. JavaScript到底是不是单线程

    JavaScript到底是不是单线程 JavaScript引擎 在了解计时器内部运作前,我们必须清楚一点,触发和执行并不是同一概念,计时器的回调函数一定会在指定delay的时间后被触发,但并不一定立即 ...

  9. Javascript设计模式系列学习笔记

    因为是学习笔记,里面并没有很多注释和讲解,所有不太适合0基础的朋友看,只能说抱歉了. 这些笔记目前还存在很多的问题,不过我相信再今后的学习过程中会把这些问题挨个的解决. 除了前面3节后面的都不分前后顺 ...

  10. 为什么MVC不是一种设计模式

    http://damoqiongqiu.iteye.com/blog/1949256 ---比较Backbone和Ext4.x在MVC实现上的差异 大漠穷秋 前言 圣人云:不想做妈咪的小姐不是好码农. ...