怎么用html5模拟3d掷骰子效果

怎么用html5模拟3d掷骰子效果,第1张

html5模拟3d掷骰子代码如下:

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>

下面这个函数kkk,参数:

m: 几个骰子

n: 是投多少计统计

f: 多少面的骰子

返回的是数组:从小到大记录了,各点子出现的数量,

kkk=function(m=2,n=5000,f=6){

var i,j,t,no,to=[]

no=m*f-m+1

for(i=0i<noi++){

to[i]=0

}

for(i=0i<ni++){

t=0

for(j=0j<mj++){

t+=Math.floor(Math.random()*f)

}

to[t]+=1

}

for(i=0i<noi++){

console.log(m+'个骰子投'+n+'次,点数为'+(i+m)+'出现的次数为:'+to[i]+',出现概率为:'+(to[i]/n))

}

return to

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8230335.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-14
下一篇 2023-04-14

发表评论

登录后才能评论

评论列表(0条)

保存