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
26setTimeout(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>
1、微信 公众号里面没有自带的游戏，只有类似刮刮乐，大转盘、掷骰子这些与粉丝互动的小游戏；2、如果想让自己的微信公众里面有其它的游戏，可以通过微信服务号或认证的订阅号，以外链的方式接入；
3、通过外链跳转进入游戏界面，就可以正常玩游戏了；
4、也可由第三方专业公司对微信公众号进行开发，置入游戏。
