代码如下：
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>
