您的位置：首页 > Web前端 > HTML5
html5掷骰子的小demo

2014-01-04 23:15 190 查看
原文 html5掷骰子的小demo

代码如下：
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航