H5塔台管制飞机大战

这次给大家带来H5塔台管制飞机大战，做出H5塔台管制飞机大战的注意事项有哪些，下面就是实战案例，一起来看一下。

 想做这个游戏已久，今天终于初步完成，先解释下，这是一个模拟机场塔台管制指挥的游戏，飞机从不同的方向飞入管制空域，有不同的目的地，飞机名称最后一个字母表示飞机要到达的目的地，分ABCD和R。A-D表示四个方向，R表示到本场的跑道降落。飞机有H,M,S三种速度，离场必须不能是最快的速度(H)，降落必须是S的速度这样才能得分。默认设置是20架飞机，最多容量默认是10架飞机。当然实际的指挥比这个要复杂。

基本原理

整个游戏是基于canvas的，纯JavaScript，四种朝向的飞机是用四张图片实现的，所有要不断渲染的对象都在airspace这个数组里面。有Plane，Runway和Exit三个对象。正确指挥一架飞机到目的地有5分。

function Plane(id,sx,sy,heading,url){    this.x=sx;    this.y=sy;    this.flightId=id;    this.h=heading||"down";//up down left right
    this.img=url||"down.png";    this.draw=drawPlane    this.move=movePlane    this.speed=airspeed[getRandom(3)];    this.D=destination[getRandom(5)];    this.state="cruise";    this.width=size;    this.height=size;    this.getCenter=getCenter;
}

function Runway(name,x,y,w,h){    this.name=name;    this.x=y;    this.y=y;    this.width=w;    this.height=h;    this.draw=drawRunway;    this.getCenter=getCenter;
}

点击捕获

到canvas上选中一架飞机之后会用红色边框，表示当前正在指挥的飞机。canvas本身没有提供对象的click事件

 所以要根据鼠标的位置来判断是否选中了目标：

function eventDispature(canvas){
  canvas.onclick=function(e){
     console.log(e.offsetX,e.offsetY,e.type)
     detectEvent(e.offsetX,e.offsetY,e.type)
  }
}function detectEvent(x,y,type){  //判断是否击中
  airspace.forEach(function(p){      //范围 x,x+size y,y+size
      var maX=p.x+p.width;      var maY=p.y+p.height;      if(x>=p.x&&x=p.y&&yn.flightId!=p.flightId).forEach(n=>n.selected=false);
      }
  })
}

根据e.offsetX和e.offsetY获得事件的位置，判断是否在某个飞机的坐标范围里，然后标记选中，并去除其他被标记selected的飞机。当然这个地方还可以完善成一个事件系统，并支持其他的事件。

碰撞检测

碰撞有四种情况，首先是飞机与飞机相撞，飞机飞出边界（是否正确飞向入口），飞机飞入跑道(是否对准入口进入)。错误操作的飞机将会被移除airspace数组。

function isIntersect(p1,p2){    var center=p1.getCenter();    var c1=p2.getCenter();     var dx=Math.abs(center.x-c1.x);     var dy=Math.abs(center.y-c1.y);     return dx<p style="text-align: left;">三种情况的判断主要依靠上面这个方法，然后再有区分，飞机飞入跑道，首先是坐标矩形会与跑道矩形相交，然后y1，y2在跑道的y轴范围之内即可。</p><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/bd4607964712ad08195de08ba8ecc0bf-2.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p><pre class="brush:php;toolbar:false">if(isIntersect(plane,runway)&&plane.state==states.cruise){
    console.warn(plane.flightId+"进入跑道");    //进入跑道的条件是 左边的两个点 和右边的两个点
    var y1=plane.y;    var y2=plane.y+plane.height;        //速度最慢，方向是跑道才能得分
    if(y1>runway.y&&y1<runway.y>runway.y&&y2<runway.y><p style="text-align: left;">判断进入入口的道理一样。右下角几个<a href="http://www.php.cn/code/5991.html" target="_blank">按钮</a>分别表示四个方向和三种速度。</p>
<h3 id="不足">不足：</h3>
<p style="text-align: left;">1.飞机用了四张图片还是有点笨，因为当初旋转移动没有搞定，后续继续研究。</p>
<p style="text-align: left;">2.飞机碰撞的算法还不够准确，离场的判断只判断了一个点。这里是考虑到离场判断和入场飞机有冲突，这里需要再优化下。</p>
<p style="text-align: left;">3.还可以增加一些效果。</p>
<p>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！</p>
<p>推荐阅读：</p>
<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388747.html" target="_blank">用JQ怎么实现右键点击收藏网页</a><br></p>
<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388745.html" target="_blank">jQuery必须掌握的API</a></p>
<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388743.html" target="_blank">怎样实现文件上传带进度条动画</a><br></p>
<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388742.html" target="_blank">jQuery实现多层验证后的表单验证</a><br></p></runway.y></runway.y>

以上是H5塔台管制飞机大战的详细内容。更多信息请关注PHP中文网其他相关文章！