本文實(shí)例為大家分享了js實(shí)現(xiàn)移動(dòng)小球的具體代碼，供大家參考，具體內(nèi)容如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
</head><style> *{margin: 0; padding:0;} #main{margin: 0px auto;position: relative;} #main div{overflow: hidden;position: absolute;width: 50px;height: 50px;opacity: 0.5; -moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;}</style><body> <div id="main"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div> <script> var main = document.getElementById('main'); var circles = main.getElementsByTagName('div'); var st = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']; var json = [],arr=[],color = []; var maxW = 0; var maxH = 0; var cwidth = circles[0].offsetWidth; var cheight = circles[0].offsetHeight; //根據(jù)瀏覽器窗口的大小自動(dòng)調(diào)節(jié)小球的運(yùn)動(dòng)空間 window.onresize=function(){ var main = document.getElementById('main'); maxW=window.innerWidth-circles[0].clientWidth; maxH=window.innerHeight-circles[0].clientHeight; main.style.width = window.innerWidth+'px'; main.style.height = window.innerHeight+'px'; } onresize(); //數(shù)組對象的初始化 for(var i=0;i<circles.length;i++){ arr=[]; for(var j=0;j<6;j++){ color[j] = st[Math.floor(Math.random()*16)]; } arr.x = Math.floor(Math.random()*(maxW+1));//初始x坐標(biāo) arr.y = Math.floor(Math.random()*(maxH+1));//初始y坐標(biāo) arr.cx = arr.x + circles[0].offsetWidth/2; //圓心x坐標(biāo) arr.cy = arr.y + circles[0].offsetHeight/2;//圓心y坐標(biāo) arr.movex = Math.floor(Math.random()*2);//x軸移動(dòng)方向 arr.movey = Math.floor(Math.random()*2);//y軸移動(dòng)方向 arr.bgolor = '#'+ color.join('');//隨機(jī)生成一個(gè)6位字符串 arr.speed = 2+Math.floor(Math.random()*5); //隨機(jī)生成一個(gè)2~6之間的移動(dòng)速度（如果設(shè)置的改變速度太大，容易造成小球碰撞時(shí)兩個(gè)小球之間有重合，也有可能小球會(huì)出界） arr.timer = null;//計(jì)時(shí)器 arr.index = i;//索引值 json.push(arr); circles[i].style.left = arr.x + 'px';//小球位置初始化 circles[i].style.top = arr.y + 'px';//小球位置初始化 circles[i].style.backgroundColor = arr.bgolor;//小球背景顏色初始化 } //碰撞函數(shù) function crash(a){ var ball1x = json[a].cx; var ball1y = json[a].cy; for(var i= 0;i<json.length;i++){ if(i!=a){ var ball2x = json[i].cx; var ball2y = json[i].cy; //圓心距離的平方 var len = (ball1x-ball2x)*(ball1x-ball2x)+(ball1y-ball2y)*(ball1y-ball2y); if(len <= cwidth*cwidth){ //小球位置的判斷，發(fā)生碰撞反應(yīng) if(ball1x >ball2x){ if(ball1y > ball2y){ json[a].movex=1; json[a].movey=1; }else if(ball1y < ball2y){ json[a].movex=1; json[a].movey=0; }else{ json[a].movex=1; } }else if(ball1x < ball2x){ if(ball1y > ball2y){ json[a].movex=0; json[a].movey=0; }else if(ball1y < ball2y){ json[a].movex=0; json[a].movey=1; }else{ json[a].movex=0; } }else{ if(ball1y > ball2y){ json[a].movey=1; }else if(ball1y < ball2y){ json[a].movey=0; } } } } } } //移動(dòng)函數(shù) function move(circle){ circle.timer = setInterval(function () { if(circle.movex == 1){ circle.x+=circle.speed; if(circle.x+circle.speed >= maxW){//防止小球出界 circle.x = maxW; circle.movex=0;//小球運(yùn)動(dòng)方向發(fā)生改變 } }else{ circle.x-=circle.speed; if(circle.x-circle.speed <= 0){ circle.x = 0; circle.movex=1; } } if(circle.movey == 1){ circle.y += circle.speed; if(circle.y+circle.speed >= maxH){ circle.y = maxH; circle.movey=0; } }else{ circle.y-=circle.speed; if(circle.y-circle.speed <= 0){ circle.y = 0; circle.movey=1; } } circle.cx = circle.x + circles[0].offsetWidth/2;//小球每一次運(yùn)動(dòng)圓心都會(huì)發(fā)生改變 circle.cy = circle.y + circles[0].offsetHeight/2; circles[circle.index].style.left = circle.x + 'px';//小球位置重定位 circles[circle.index].style.top = circle.y + 'px'; /*console.log('x'+circle.cx+'y'+circle.cy);*/ crash(circle.index); },16); } //對每一個(gè)小球綁定計(jì)時(shí)器，讓小球動(dòng)起來 for(var i=0;i<circles.length;i++){ move(json[i]); }</script></body> |
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/qq_41864230/article/details/81458546
