怎么用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>

开始游戏时,各玩家需要摇骰,然后自己看骰盅里面的骰子,不让其他人看到。首局尊者先“叫”或者“女士优先”,按顺时针轮到下一家。

开骰后,要是叫骰者的点数个数不够实际全部玩家总数的一半,叫骰者惩罚翻倍。例如:叫骰者叫12个6点,但实际上只有5个6点,不够12个的一半,则叫骰者要再多喝一倍的码数。

反之,要是叫骰者的点数个数超过实际全部参加者总数的一倍,开骰者惩罚加倍。例如叫骰者叫5个5点,但实际上有11个5点,已经超5个的一倍,即10个,则开骰者要多喝一倍的码数。

相关术语:

1、不斋:通常骰子的“1”点是可以当任何数使用,但是叫了斋,即“1”点便不当任何数使用,所以不叫的话可以当任何数使用(标准叫法,例:“2个3斋”,“3个6斋”)。

2、劈:无视叫骰顺序直接“劈”指定的一名玩家。“劈”了,输方将会双倍惩罚。

3、飞斋:在“斋”的时候,可以通过“飞”去掉“斋”。需要“叫”双倍或者以上的骰子数。(例:上家叫了“2个1斋”,下家就可以叫“4个2飞”,就可以破斋)。

4、反劈:当被“劈”时,可以选择“反劈”,输者在“劈”的基础上再惩罚翻倍。

5、3、人头一:一种叫法,当场人数有几个人,就代表喊几个1。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存