html5骰子游戏实验报告,html5掷骰子的小demo

1

2

3

柯乐义

4

5

6 varleftX= 150;7 vartopY= 100;8 vardiceX= 80;9 vardiceY= 80;10 vardotR= 4;11 varcount= 0;12 varlastNum= 0;13 varflag= false;14

15 functionclickMe() {16 count= 0;17 if(flag) {18 return false;19 }20 flag= true;21 varctx=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 functiondrawDice(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 functionrandom(ctx) {73 varrandomNum=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 functioncommonDraw(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 functiondraw1() {91 varctx=document.getElementById("canvas").getContext('2d');92 ctx.fillStyle="#0000ff";93 vardotX=leftX+diceX/2;

94 vardotY=topY+diceY/2;

95 commonDraw(ctx,dotX,dotY);96 }97

98 functiondraw2() {99 varctx=document.getElementById("canvas").getContext('2d');100 ctx.fillStyle="#99FF66";101 vardotX=leftX+4*dotR;102 vardotY=topY+4*dotR;103 commonDraw(ctx,dotX,dotY);104 vardotX=leftX+diceX-4*dotR;105 vardotY=topY+diceY-4*dotR;106 commonDraw(ctx,dotX,dotY);107 }108

109 functiondraw3() {110 draw1();111 draw2();112 }113

114 functiondraw4() {115 draw2();116 varctx=document.getElementById("canvas").getContext('2d');117 ctx.fillStyle="#99CC00";118 vardotX=leftX+diceX-4*dotR;119 vardotY=topY+4*dotR;120 commonDraw(ctx,dotX,dotY);121 vardotX=leftX+4*dotR;122 vardotY=topY+diceY-4*dotR;123 commonDraw(ctx,dotX,dotY);124 }125

126 functiondraw5(){127 draw1();128 draw4();129 }130 //http://www.cnblogs.com/sosoft/

131 functiondraw6(){132 varctx=document.getElementById("canvas").getContext('2d');133 ctx.fillStyle="#996633";134 vardotX=leftX+4*dotR;135 vardotY=topY+diceY/2

136 commonDraw(ctx,dotX,dotY);137 vardotX=leftX+diceY-4*dotR;138 commonDraw(ctx,dotX,dotY);139 draw4();140 }141

142 functioninit() {143 varctx=document.getElementById("canvas").getContext('2d');144 ctx.beginPath();145 ctx.strokeRect(leftX,topY,diceX,diceY);146 ctx.stroke();147 draw6();148

149 }150

151

152

153

154

155 your brower is not support html5156

157

158

159

160