让飞机按航线飞行，JS飞行类网页游戏特效代码

发布时间：2018-09-08 19:19:50 所属栏目：语言来源：站长网

导读：让飞机按航线飞行，JS飞行类网页游戏特效代码，本文给出的仅仅是一个雏形，如果你恰巧正在开发飞行类游戏，而又缺少这方面的资料，不妨参照一下本文中的JS脚本代码。小提示：不要以为特效中的飞机是图片哦！演示代码： htmlheadtitle编写飞行游戏时候能

　　让飞机按航线飞行，JS飞行类网页游戏特效代码，本文给出的仅仅是一个雏形，如果你恰巧正在开发飞行类游戏，而又缺少这方面的资料，不妨参照一下本文中的JS脚本代码。

　　小提示：不要以为特效中的飞机是图片哦！

　　演示代码：

<html> <head> <title>编写飞行游戏时候能用到的JS效果 - 烈火学院 Liehuo.Net</title> <style> .5{font-size:25;} .30pt{font-size:50;color:#ff66cc} </style> </head> <body> <div id=Item1 style="position: absolute; left: 0; top: 0;"><font face=wingdings class=5 color=red>Q</font></div> <div id=Item2 style="position: absolute; left: 0; top: 0;"><font face=wingdings class=5 color=#0099CC>Q</font></div> <div id=Item3 style="position: absolute; left: 0; top: 0;"><font face=wingdings class=5 color=#CC0099>Q</font></div> <div id=Item4 style="position: absolute; left: 0; top: 0;"><font face=wingdings class=5 color=#BBB7F4>Q</font></div> <div id=Item5 style="position: absolute; left: 0; top: 0;"><font face=wingdings class=5 color=#003084>Q</font></div> <div id=Item6 style="position: absolute; left: 0; top: 0;"><font face=wingdings class=5 color=#9999ff>Q</font></div> <input type=button value="开始" onclick="runWaypoint(Item1, 0, 1); runWaypoint(Item2, 0, 1);"> <div id=Debug></div> <div style="position: absolute; left: 0; top:300;"><font class=30pt>按开始按钮,页面上会有飞机按着固定的航线飞行.....</font></div> <script src="htmlpath.js"> </script> <script> var tickDuration; tickDuration = 50; var activeObjectCount; var activeObjects; var itemDeactivated; var tickGeneration; activeObjects = new Array(); activeObjectCount = 0; timerRefcount = 0; itemDeactivated = false; tickGeneration = 0; function initializePath(e) { e.waypointX = new Array(); e.waypointY = new Array(); e.duration = new Array(); } function addWaypoint(e, number, x, y, duration) { e.waypointX[number] = x; e.waypointY[number] = y; e.duration[number] = duration; } function compact() { var i, n, c; n = new Array(); c = 0; itemDeactivated = false; for (i=0; i<activeObjectCount; i++) { if (activeObjects[i].active == true) { n[c] = activeObjects[i]; c++; } } activeObjects = n; activeObjectCount = c; } function tick(generation) { if (generation < tickGeneration) { return; } if (itemDeactivated) compact(); if (activeObjectCount == 0) { return; } else { for (i=0; i<activeObjectCount; i++) { moveElement(activeObjects[i]); } window.setTimeout("tick("+generation+");", tickDuration); } } function start(e) { if (itemDeactivated) compact(); activeObjects[activeObjectCount] = e; activeObjectCount++; if (activeObjectCount == 1) { tickGeneration++; tick(tickGeneration); } } function runWaypoint(e, startPoint, endPoint) { var startX, startY, endX, endY, duration; if (e.waypointX == null) return; startX = e.waypointX[startPoint]; startY = e.waypointY[startPoint]; endX = e.waypointX[endPoint]; endY = e.waypointY[endPoint]; duration = e.duration[endPoint]; e.ticks = duration / tickDuration; e.endPoint = endPoint; e.active = true; e.currTick = 0; e.dx = (endX - startX) / e.ticks; e.dy = (endY - startY) / e.ticks; e.style.posLeft = startX; e.style.posTop = startY; start(e); } function moveElement(e) //飞机移动 { e.style.posLeft += e.dx; e.style.posTop += e.dy; e.currTick++; if (e.currTick > e.ticks) { e.active = false; itemDeactivated = true; if (e.onpathcomplete != null) { window.pathElement = e; e.onpathcomplete() } } } initializePath(Item1); initializePath(Item2); initializePath(Item3); initializePath(Item4); initializePath(Item5); initializePath(Item6); addWaypoint(Item1, 0, 0, 0, 0); addWaypoint(Item1, 1, 200, 200, 2000); addWaypoint(Item2, 0, 100, 100, 0); addWaypoint(Item2, 1, 400, 100, 4000); addWaypoint(Item3, 0, 400, 400, 0); addWaypoint(Item3, 1, 200, 100, 1000); addWaypoint(Item4, 0, 0, 0, 0); addWaypoint(Item4, 1, 200, 200, 2000); addWaypoint(Item5, 0, 100, 100, 0); addWaypoint(Item5, 1, 400, 100, 4000); addWaypoint(Item6, 0, 400, 400, 0); addWaypoint(Item6, 1, 200, 100, 1000); function endfunction() { runWaypoint(Item3, 0, 1); runWaypoint(Item4, 0, 1); runWaypoint(Item5, 0, 1); runWaypoint(Item6, 0, 1); } function endfunction2() { runWaypoint(Item1, 0, 1); } Item1.onpathcomplete = endfunction; Item6.onpathcomplete = endfunction2; </script> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

JS怎样完成移动端的拖	css3渐变背景的兼容问
css3的focus-within选	CSS属性之字体文本列