JS代码实现飞行游戏飞机按路径飞行

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<title>按路径飞行的飞机，jS实现</title>
<style>
.5{font-size:25;}
.30pt{font-size:50;font-family:文鼎行楷碑体;color:#ff66cc}
</style>
</head>
<body>
<div id=Item1 style="position: absolute; left: 0; top: 0;"><font face=wingdings class=5 color=red>&#81</font></div>
<div id=Item2 style="position: absolute; left: 0; top: 0;"><font face=wingdings class=5 color=#0099CC>&#81</font></div>
<div id=Item3 style="position: absolute; left: 0; top: 0;"><font face=wingdings class=5 color=#CC0099>&#81</font></div>
<div id=Item4 style="position: absolute; left: 0; top: 0;"><font face=wingdings class=5 color=#BBB7F4>&#81</font></div>
<div id=Item5 style="position: absolute; left: 0; top: 0;"><font face=wingdings class=5 color=#003084>&#81</font></div>
<div id=Item6 style="position: absolute; left: 0; top: 0;"><font face=wingdings class=5 color=#9999ff>&#81</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>
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) {
    // alert("Error "+generation);
     return;
  }
  //alert("tick: "+generation);
  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()
    }
  }
}
</script>
<script>
// need to call initializePath on all objects that will be moved with this mechanism
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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JS代码实现飞行游戏飞机按路径飞行

分类

网站常用

描述

按开始按钮,页面上会有飞机按着固定的航线飞行....用JS实现的效果，开发网页游戏时候用得上的技术，每个飞机飞行的路径都是不一样的，有的是直线飞行，有的是斜线飞行，飞机是用一个特殊符号来代替的，也挺漂亮，页面内的JavaScript代码...