html5掷骰子的小demo

最新推荐文章于 2023-08-03 20:46:54 发布

weixin_34267123

最新推荐文章于 2023-08-03 20:46:54 发布

阅读量77

点赞数

代码如下：

  1 <!DOCTYPE>
  2 <html>
  3     <title>柯乐义</title>
  4     <head>
  5         <script>
  6             var leftX = 150;
  7             var topY = 100;
  8             var diceX = 80;
  9             var diceY = 80;
 10             var dotR = 4;
 11             var count = 0;
 12             var lastNum = 0;
 13             var flag = false;
 14             
 15             function clickMe() {
 16                 count = 0;
 17                 if(flag) {
 18                     return false;
 19                 }
 20                 flag = true;
 21                 var ctx = document.getElementById("canvas").getContext('2d');
 22                 ctx.beginPath();
 23                 //ctx.arc(100,100,50,0,Math.PI,false);
 24                 ctx.strokeRect(leftX,topY,diceX,diceY);
 25                 
 26                setTimeout(function(){
 27                     random(ctx);
 28                },200);
 29                 
 30             }
 31             
 32             function drawDice(ctx,randomNum) {
 33                 ctx.clearRect(leftX,topY,diceX,diceY);
 34                     switch(randomNum) {
 35                         case 1:
 36                             draw1();
 37                             break;
 38                         case 2:
 39                             draw2();
 40                             break;
 41                         case 3:
 42                             draw3();
 43                             break;
 44                         case 4:
 45                             draw4();
 46                             break;
 47                         case 5:
 48                             draw5();
 49                             break;
 50                         case 6:
 51                             draw6();
 52                             break;
 53                     }
 54                     count++;
 55                     if(count>=20) {
 56                         if(randomNum==6) {
 57                             alert("哇！你走狗屎运啦，今天可以去买彩票啦");
 58                         } else if(randomNum <=3) {
 59                             alert("今天运气不太好哦！再试一把");
 60                         } else {
 61                             alert("请再接再厉，在来一把");
 62                         }
 63                         flag = false;
 64                         return false;
 65                     } else {
 66                         setTimeout(function(){
 67                             random(ctx);
 68                        },200-count);
 69                     }
 70             }
 71             
 72             function random(ctx) {
 73                 var randomNum = Math.floor(Math.random()*6)+1;
 74                 if(randomNum == lastNum) {
 75                     random(ctx)
 76                 } else {
 77                     lastNum = randomNum;
 78                     drawDice(ctx,randomNum);
 79                 }
 80                 
 81             }
 82             
 83             function commonDraw(ctx,dotX,dotY) {
 84                 ctx.beginPath();
 85                 ctx.arc(dotX,dotY,dotR,0,2*Math.PI,false);
 86                 ctx.stroke();
 87                 ctx.fill(); 
 88             }
 89             
 90             function draw1() {
 91                 var ctx = document.getElementById("canvas").getContext('2d');
 92                 ctx.fillStyle="#0000ff";
 93                 var dotX = leftX+diceX/2;
 94                 var dotY = topY+diceY/2;
 95                 commonDraw(ctx,dotX,dotY);
 96             }
 97             
 98             function draw2() {
 99                 var ctx = document.getElementById("canvas").getContext('2d');
100                 ctx.fillStyle="#99FF66";
101                 var dotX = leftX+4*dotR;
102                 var dotY = topY+4*dotR;
103                 commonDraw(ctx,dotX,dotY);
104                 var dotX = leftX+diceX-4*dotR;
105                 var dotY = topY+diceY-4*dotR;
106                 commonDraw(ctx,dotX,dotY);
107             }
108             
109             function draw3() {
110                 draw1();
111                 draw2();
112             }
113             
114             function draw4() {
115                 draw2();
116                 var ctx = document.getElementById("canvas").getContext('2d');
117                 ctx.fillStyle="#99CC00";
118                 var dotX = leftX+diceX-4*dotR;
119                 var dotY = topY+4*dotR;
120                 commonDraw(ctx,dotX,dotY);
121                 var dotX = leftX+4*dotR;
122                 var dotY = topY+diceY-4*dotR;
123                 commonDraw(ctx,dotX,dotY);
124             }
125             
126             function draw5(){
127                 draw1();
128                 draw4();
129             }
130             //http://www.cnblogs.com/sosoft/
131             function draw6(){
132                 var ctx = document.getElementById("canvas").getContext('2d');
133                 ctx.fillStyle="#996633";
134                 var dotX = leftX+4*dotR;
135                 var dotY = topY+diceY/2
136                 commonDraw(ctx,dotX,dotY);
137                 var dotX = leftX+diceY-4*dotR;
138                 commonDraw(ctx,dotX,dotY);
139                 draw4();
140             }
141             
142             function  init() {
143                 var ctx = document.getElementById("canvas").getContext('2d');
144                 ctx.beginPath();
145                 ctx.strokeRect(leftX,topY,diceX,diceY);
146                 ctx.stroke();
147                 draw6();
148                 
149             }
150         </script>
151     </head>
152     
153     <body onload="init();">
154         <canvas id="canvas" width="400" height="300" style="background-color:#CCFFCC">
155             your brower is not support html5
156         </canvas>
157         
158         <input type="button" value="掷骰子" onclick="clickMe();"/>
159     </body>
160 </html>

weixin_34267123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5掷骰子的小demo

代码如下： 1 &lt;!DOCTYPE&gt; 2 &lt;html&gt; 3 &lt;title&gt;柯乐义&lt;/title&gt; 4 &lt;head&gt; 5 &lt;script&gt; 6 var leftX = 150; 7 var top...
复制链接

扫一扫