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

<HTML>

<body>

<script>

var number

function showImg(url){

var img = document.getElementById("img1")

img.src = url

}

function hideImg(){

document.getElementById("img1").src = ""

}

function clicke(){

number = 1+ Math.floor(Math.random()*6)

hideImg()

if(number==1)

showImg("C:\\Users\\lalala\\Desktop\\1.jpg")

if(number==2)

alert("等于2")

if(number==3)

alert("等于3")

if(number==4)

alert("等于4")

if(number==5)

alert("等于5")

if(number==6)

alert("等于6")

}

</script>

<div><img id="img1" /></div>

<div><input type="button" onClick="clicke()" value="Click"/></div>

</body>

</HTML>

步骤一、在3dmax顶视图建模一个长方体一个圆体,

步骤二、把圆体拉进长方体内,露出一半的园,然后在3dmax软件中的左、顶、上视图调节好位置,

步骤三、几何体下面的下拉菜单中,选择3dmax“复合对象”

步骤四、点击长方体,把长方体设为"A",点击3dmax布尔运算,

步骤五、以A为长方体,点击3dmax拾取 *** 作对象B圆体,

步骤六、OK,我们这就用3dmax布尔运算做完一个骰子点了,至于其它,其它面以此类推。

3dmax布尔运算制作骰子模型的效果如图:

对于初学者来说,通过实例教程来理解3dmax建模无疑是一种不错的选择,这将大大地提高学习的效率。3dmax布尔运算可以让简单的几何体组合产生新的模型,以上为大家分享3dmax中布尔运算使用及方法。我们以制作骰子模型为例,教大家灵活运用3dmax布尔运算制作骰子模型。

主要是靠CPU进行渲染工作,渲染时CPU占满100%,普通的电脑只有双核四线程或四核八线程。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存