网站建设软件开发的新闻,孵化器网站建设,淘宝优惠券网站建设教程,久久建筑网怎样小时候大家应该都玩过飞机大战吧#xff0c;这就是仿的一个飞机大战#xff0c;但是没有写的很全#xff0c;只能玩一次#xff0c;死掉之后需要刷新页面玩第二次#xff0c;话不说多#xff0c;上代码#xff1a; 初始页面#xff1a; 整个的html代码还是很少#xf… 小时候大家应该都玩过飞机大战吧这就是仿的一个飞机大战但是没有写的很全只能玩一次死掉之后需要刷新页面玩第二次话不说多上代码 初始页面 整个的html代码还是很少如下 div idbox!--存难度--div idlevelh1飞机大战 1.0/h1p简单/pp中等/pp困难/pp stylecolor:#f00WM 难度/p/div!--放地图每个难度的地图都是不同的--div idmap!--统一管理敌军--div idBiuAll/div/div
/div 困难点 代码的重点就是判断飞机之间的距离从而来确定是否碰撞到了敌军与子弹的距离判断是否击落敌军 上代码 //碰撞检测function coll(obj1,obj2) {//物体 1 的边界var T1obj1.offsetTop,B1T1obj1.clientHeight,L1obj1.offsetLeft,R1L1obj1.clientWidth;//物体 2 的边界var T2obj2.offsetTop,B2T2obj2.clientHeight,L2obj2.offsetLeft,R2L2obj2.clientWidth;if(B1T2 ||R1L2 ||T1B2 || L1R2){//没有撞到的情况return false;}else{//撞到了的情况return true;}} 子弹的碰撞检测需要倒着遍历就像遍历数组去重一样如果你从第一个开始遍历若数组第一个就重复的话删除第一个原先的第二个会顶替到第一个的位置会造成漏网之鱼。 1 //子弹碰撞 倒着遍历2 for(var iallBiu.length-1;i0;i--){3 var objBiuallBiu[i];4 if(coll(oEnemy,objBiu)){5 boom(oEnemy.offsetLeft,oEnemy.offsetTop,0);6 BiuAll.removeChild(objBiu);7 oMap.removeChild(oEnemy);8 return;9 }
10 } 飞机的移动是用拖拽实现的拖拽需要注意的一点就是不要把飞机拖出屏幕需要有一个临界值如图 代码 leftMath.max(-oImg.clientWidth/2,left);leftMath.min(oBox.clientWidth-oImg.clientWidth/2,left);topMath.min(oBox.clientHeight-oImg.clientHeight/2,top);topMath.max(0,top);oImg.style.leftleftpx;oImg.style.toptoppx; 选择的难度不同子弹速度不同 附上全部代码 1 !DOCTYPE html2 html langen onselectstartreturn false3 head4 meta charsetUTF-85 meta nameAuthor content6 titledemo1/title7 style8 * {9 margin: 0;10 padding: 0;11 font-family: Microsoft YaHei, serif;12 }13 14 li {15 list-style: none;16 }17 18 body {19 overflow: hidden;20 user-select: none;21 -moz-user-select: none;22 -ms-user-select: none;23 }24 25 #box {26 position: relative;27 width: 512px;28 height: 768px;29 margin: 20px auto;30 }31 32 #map {33 position: absolute;34 top: 0;35 left: 0;36 width: 100%;37 height: 100%;38 background: url(../img/bg_1.jpg);39 }40 41 #level {42 position: absolute;43 top: 0;44 left: 0;45 width: 100%;46 height: 100%;47 z-index: 1;48 }49 50 #level.hid {51 display: none;52 }53 54 #level h1 {55 font-size: 40px;56 padding-top: 60px;57 padding-bottom: 30px;58 line-height: 60px;59 text-align: center;60 color: white;61 }62 63 #level p:hover {64 background: #ee4411;65 color: #fff;66 }67 68 #level p {69 margin: 100px auto;70 width: 200px;71 height: 35px;72 line-height: 35px;73 text-align: center;74 background: #fff;75 font-weight: bolder;76 cursor: pointer;77 }78 79 #map .plane ,#map .biu , #map .enemy,#map .boom1 ,#map .boom2{80 position: absolute;81 }82 #map .biu{83 z-index: 10;84 }85 #map .plane{86 z-index: 8;87 }88 #map .boom1{89 z-index: 7;90 animation: fade 1s 2;91 animation-fill-mode: forwards;92 }93 keyframes fade{94 from{opacity: 1}95 to{opacity: 0}96 }97 #map .enemy{98 z-index: 9;99 }
100 #map .boom2{
101 z-index: 11;
102 animation: bling 2s 1;
103 }
104 keyframes bling {
105 0%{opacity: 1}
106 50%{opacity: 0}
107 75%{opacity: 1}
108 100%{opacity: 0}
109 }
110
111 /style
112 /head
113 body
114 div idbox
115 !--存难度--
116 div idlevel
117 h1飞机大战 1.0/h1
118 p简单/p
119 p中等/p
120 p困难/p
121 p stylecolor:#f00WM 难度/p
122 /div
123 !--放地图每个难度的地图都是不同的--
124 div idmap
125 !--统一管理敌军--
126 div idBiuAll/div
127 /div
128 /div
129 script
130 ~function () {
131 //动画兼容
132 window.requestAnimationFramewindow.requestAnimationFrame || function (fn) {
133 return setTimeout(fn,1000/60)
134 };
135 window.cancelAnimationFrame window.cancelAnimationFrame || clearTimeout;
136 //获取局部的全局变量
137 var oLevel document.getElementById(level),
138 BiuAlldocument.getElementById(BiuAll),
139 allBiuBiuAll.children,
140 oBox document.getElementById(box),
141 oMap document.getElementById(map),
142 boxOffsetTop oBox.offsetTop,
143 boxOffsetLeft oBox.offsetLeft;
144
145 //启动游戏
146 exe();
147
148 //选择关卡 难度的点击事件
149 function exe() {
150 var aP oLevel.getElementsByTagName(p);
151 for (var i 0, len aP.length; i len; i) {
152 !function (i) {
153 aP[i].onclick function (e) {
154 e e || window.event;
155 //第一个实参为关卡难度序号
156 //第二个存储鼠标距离map边缘距离的jn
157 startGame(i, {
158 x: e.clientX - boxOffsetLeft,
159 y: e.clientY - boxOffsetTop
160 });
161 }
162 }(i);
163 }
164
165
166 }
167
168 //开始游戏
169 function startGame(level, pos) {
170 //执行清理
171 clearMap();
172 //执行创建我军
173 var rImgplane(level, pos);
174 //执行敌军
175 enemy(level, rImg);
176
177
178 }
179
180 //隐藏与清理地图
181 function clearMap() {
182 //隐藏选择关卡的选择框
183 oLevel.classList.add(hid);
184 }
185
186 //创建我军
187 function plane(level,pos) {
188 //创建飞机的我军图片
189 var oImg new Image();
190 oImg.src ../img/plane_0.png;
191 oImg.width 70;
192 oImg.height 70;
193 oImg.className plane;
194 oImg.style.leftpos.x-oImg.width/2px;
195 oImg.style.toppos.y-oImg.height/2px;
196 oMap.appendChild(oImg);
197
198
199 //加入mousemove事件
200 document.οnmοusemοvefunction (e) {
201 e e || window.event;
202 //获取飞机的实时坐标
203 var lefte.clientX-boxOffsetLeft-oImg.width/2,
204 tope.clientY-boxOffsetTop-oImg.height/2;
205 //控制飞机的边界值
206 leftMath.max(-oImg.clientWidth/2,left);
207 leftMath.min(oBox.clientWidth-oImg.clientWidth/2,left);
208 topMath.min(oBox.clientHeight-oImg.clientHeight/2,top);
209 topMath.max(0,top);
210 oImg.style.leftleftpx;
211 oImg.style.toptoppx;
212
213 }
214 //等级不同子弹速度不同
215 fire(oImg,level);
216 //返回出去便于敌军里面接收到这个函数
217 return oImg;
218 }
219 //我军子弹
220 function fire(oImg,level) {
221 //选择创建子弹的速率
222 var time[100,200,200,20][level];
223 oBox.timersetInterval(function () {
224 //创建子弹
225 var oBiunew Image();
226 oBiu.src../img/fire.png;
227 oBiu.width30;
228 oBiu.height30;
229 oBiu.classNamebiu;
230 oBiu.style.leftoImg.offsetLeftoImg.width/2-oBiu.width/2 px;
231 oBiu.style.topoImg.offsetTop-oBiu.height5px;
232 BiuAll.appendChild(oBiu);
233 //子弹运动
234 function move() {
235 if(oBiu.parentNode){
236 var topoBiu.offsetTop-30;
237 if(top-oBiu.height){
238 top-oBiu.height
239 BiuAll.removeChild(oBiu);
240 }else{
241 oBiu.style.toptoppx;
242
243 requestAnimationFrame(move);
244 }
245 }
246 }
247 //用定时器把队列往后拖一下,让top不会重复计算一次
248 setTimeout(function () {
249 requestAnimationFrame(move)
250 },20);
251
252
253 },time);
254 }
255 //创建敌军
256 function enemy(level,rImg) {
257 //敌军下落速度;
258 var speed[5,6,8,10][level];
259 oBox.eTimersetInterval(function () {
260 //生成敌军
261 var oEnemynew Image();
262 oEnemy.src../img/enemy_small.png;
263 oEnemy.classNameenemy;
264 oEnemy.width54;
265 oEnemy.height40;
266 oEnemy.style.leftMath.random()*oMap.clientWidth-oEnemy.width/2 px;
267 oEnemy.style.top-oEnemy.heightpx;
268 oMap.appendChild(oEnemy);
269 //敌方运动
270 function move () {
271 //检测下在不在页面中;
272 if(oEnemy.parentNode){
273 var topoEnemy.offsetTop;
274 topspeed;
275 if(topoMap.clientHeight){
276 oMap.removeChild(oEnemy);
277 }else{
278 oEnemy.style.toptoppx;
279 //子弹碰撞 倒着遍历
280 for(var iallBiu.length-1;i0;i--){
281 var objBiuallBiu[i];
282 if(coll(oEnemy,objBiu)){
283 boom(oEnemy.offsetLeft,oEnemy.offsetTop,0);
284 BiuAll.removeChild(objBiu);
285 oMap.removeChild(oEnemy);
286 return;
287 }
288 }
289 //我军碰撞检测
290 if(rImg.parentNodecoll(oEnemy,rImg)){
291 //敌军爆炸图
292 boom(oEnemy.offsetLeft,oEnemy.offsetTop,0);
293 //我军爆炸图
294 boom(rImg.offsetLeft,rImg.offsetTop,1);
295 //移除敌军 我军;
296 oMap.removeChild(oEnemy);
297 oMap.removeChild(rImg);
298 //游戏结束
299 gameover();
300 return;
301 }
302 requestAnimationFrame(move);
303 }
304 }
305
306
307 }
308 requestAnimationFrame(move)
309 },[350,250,120,80][level]);
310 }
311 //爆炸函数
312 function boom(l,t,i) {
313 var oBoomnew Image();
314 oBoom.src../img/[boom_small,plane_0][i].png;
315 oBoom.width[54,70][i];
316 oBoom.height[40,70][i];
317 oBoom.className[boom1,boom2][i];
318 oBoom.style.leftlpx;
319 oBoom.style.toptpx;
320 oMap.appendChild(oBoom);
321 setTimeout(function () {
322 oMap.removeChild(oBoom);
323 },[1200,2500][i])
324 }
325
326
327 //碰撞检测
328 function coll(obj1,obj2) {
329 //物体 1 的边界
330 var T1obj1.offsetTop,
331 B1T1obj1.clientHeight,
332 L1obj1.offsetLeft,
333 R1L1obj1.clientWidth;
334 //物体 2 的边界
335 var T2obj2.offsetTop,
336 B2T2obj2.clientHeight,
337 L2obj2.offsetLeft,
338 R2L2obj2.clientWidth;
339
340 if(B1T2 ||R1L2 ||T1B2 || L1R2){
341 //没有撞到的情况
342 return false;
343 }else{
344 //撞到了的情况
345 return true;
346 }
347 }
348 //游戏结束
349 function gameover() {
350 //清除移动事件
351 document.οnmοusemοvenull;
352 //停止创建子弹
353 clearInterval(oBox.timer);
354 //停止创建敌军
355 clearInterval(oBox.eTimer);
356 }
357 }();
358
359 /script
360 /body
361 /html 这是1.0版本后期我会把功能完善下加上计分等。 上述代码有问题请各位大佬们指出谢谢啦。如果觉得有意思的麻烦点个赞哦。 转载于:https://www.cnblogs.com/allenxia/p/9211122.html
