想做这个游戏已久,今天终于初步完成,先解释下,这是一个模拟机场塔台管制指挥的游戏,飞机从不同的方向飞入管制空域,有不同的目的地,飞机名称最后一个字母表示飞机要到达的目的地,分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<=maX&&y>=p.y&&y<=maY){
p.selected=true;
taget=p;
console.log("选中",p.flightId,p.x,p.y)
airspace.filter(n=>n.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<(p1.width/2+p2.width/2)&&dy<(p1.height/2+p2.height/2)
}

三种情况的判断主要依靠上面这个方法,然后再有区分,飞机飞入跑道,首先是坐标矩形会与跑道矩形相交,然后y1,y2在跑道的y轴范围之内即可。

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.height&&y2>runway.y&&y2<runway.y+runway.height
&&plane.D==destination[4]&&plane.speed==airspeed[2])
{
plane.state=states.landing;
score+=5;
info(plane.flightId+"正确降落跑道");
showPlaneNum();
plane.state=states.stop;
removePlane(plane.flightId);
}else{
plane.state=states.crash;
info(plane.flightId+"坠毁,航向"+plane.h+",速度"+plane.speed);
removePlane(plane.flightId);
}

判断进入入口的道理一样。右下角几个按钮分别表示四个方向和三种速度。

不足:

1.飞机用了四张图片还是有点笨,因为当初旋转移动没有搞定,后续继续研究。

2.飞机碰撞的算法还不够准确,离场的判断只判断了一个点。这里是考虑到离场判断和入场飞机有冲突,这里需要再优化下。

3.还可以增加一些效果。

PS:这其实是当时入学时一个测试程序,当时就记住了,今天用前端实现一回。来玩一玩吧,喜欢就给个赞,欢迎拍砖。

git:https://github.com/stoneniqiu/ATC

演示地址:https://stoneniqiu.github.io/tower.html

【Html5】-- 塔台管制的更多相关文章

  1. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

  2. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  3. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  4. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  5. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  6. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  7. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  8. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  9. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

随机推荐

  1. Nginx各种配置

    日志 日志中属性 $remote_addr,$http_x_forwarded_for 记录客户端IP地址 $remote_user 记录客户端用户名称 $request 记录请求的URL和HTTP协 ...

  2. acffo的开源项目汇总

    1. XWaveView, 流动波浪效果                      2.LogRecordHelper, logcat日志记录存储到文件 可以指定TAG , 将logcat日志写入文件 ...

  3. C# 委托与事件详解(二)

    什么是事件?EVENT?点击事件?加载事件?一连串的模糊的概念冲击着我们弱小的脑袋 那我们首先来看一下比较正统的感念吧: 事件是类在发生其关注的事情时用来提供通知的一种方式. 事件的发生一般都牵扯2个 ...

  4. PL/SQL Developer使用技巧(部分)

    PL/SQL Developer使用技巧(部分) 关键字自动大写 在sql命令窗口中输入SQL语句时,想要关键字自动大写,引人注目该怎么办呢? 一步设置就可以达成了.点击Tools->Prefe ...

  5. js获取图片的EXIF,解决图片旋转问题

    相信大家在做项目的时候会遇到在canvas里加入图片时,图片发生90°,180°的旋转.当时的你肯定时懵逼的,为毛. 其实这就是图片的EXIF搞的鬼. 什么是EXIF 简单来说,Exif 信息就是由数 ...

  6. ArcGIS API for JavaScript 4.2学习笔记[28] 可视域分析【使用Geoprocessor类】

    想知道可视域分析是什么,就得知道可视域是什么 我们站在某个地方,原地不动转一圈能看到的所有事物就叫可视域.当然平地就没什么所谓的可视域. 如果在山区呢?可视范围就会被山体挡住了.这个分析对军事上有十分 ...

  7. Cat 客户端采用什么策略上报消息树

    策略分类 目前搞清楚两种 第一种(蓝色):默认服务器列表中选一个,算法核心是根据应用名的哈希值取模.也就是说同一个应用始终打到同一台服务器上,如果这台服务器挂了,另选一台服务器. 第二种(红色):应用 ...

  8. Spring任务调度之Quartz集成

    推荐一个博客:http://blog.csdn.net/column/details/14251.html 基本概念 Job:是一个接口,只有一个方法void execute(JobExecution ...

  9. Docker入门书籍

    https://yuedu.baidu.com/ebook/d817967416fc700abb68fca1 精细讲解,入门使用极佳.

  10. 使用trim_galore软件遇到的问题

    我的原始测序数据是双端测序,在用trim_galore软件去接头的这一步,使用的命令行是 time nohup trim_galore R17002628-SKOV3-m6A_combined_R1. ...