【Html5】-- 塔台管制
想做这个游戏已久,今天终于初步完成,先解释下,这是一个模拟机场塔台管制指挥的游戏,飞机从不同的方向飞入管制空域,有不同的目的地,飞机名称最后一个字母表示飞机要到达的目的地,分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】-- 塔台管制的更多相关文章
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
[微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
- 戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
- nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
随机推荐
- EditText禁用系统键盘,光标可以继续使用
在项目中有时候需要使用到自己的键盘,那这个时候就不希望系统键盘在弹出,而且光标还要继续显示,其实一个方法就可以简单实现 /** * 禁止Edittext弹出软件盘,光标依然正常显示. */ publi ...
- 挂载mount、卸载umount、挂载光盘U盘
mount [root@localhost ~]# mount sysfs on /sys type sysfs (rw,nosuid,nodev,noexec,relatime,seclabel) ...
- KVO的内部实现以及使用
转载自:http://www.cocoachina.com/applenews/devnews/2014/0107/7667.html KVO是实现Cocoa Bindings的基础,它提供了一种 ...
- 遍历map的几种方式
1,平时开发中对map的使用很多,然后发现了很多map可能存在的各种问题:如HashMap 需要放置 1024 个元素,由于没有设置容量初始大小,随着元素不断增加,容量 7 次被迫扩大,resize ...
- [置顶]
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- 获取SpringMVC的映射路径
public String init(HttpServletRequest request, HttpServletResponse response){ List<String> uLi ...
- lesson - 13 Linux系统日常管理2
内容概要: 1. Linux抓包工具 tcpdump 系统自带抓包工具tcpdump -nn -i eth0 tcp and host 192.168.0.1 and port 80tcpdump - ...
- Linux第三节
三期第三讲1.ls --help:查看帮助(man 命令) :ls -l: 长格式形式: ls -i: 文件的inode节点: ls -t: 按修改时间排序: ls -a :显示隐藏文件: 2.文件管 ...
- 优化设计提高sql类数据库的性能
前言 在一个项目中,技术的统一性是最重要的,数据库的设计则是重点中的重点.NoSQL 是目前最流行的数据库,但是其实用性和功能性远不如sql数据库. 实际很多SQL数据库被诟病的性能问题大多是源于程序 ...
- Struts2-整理笔记(四)Action生命周期、如何获取参数(3种)、集合类型参数封装
一.Action生命周期 每次请求到来时,都会创建一个新的Action实例 Action是线程安全的,可以使用成员变量接收参数 二.获取参数的方式(3种) 1.属性驱动获得参数 每次请求Action时 ...