基于jQuery的一个“射日”小游戏

写在最前

本次的分享是一个基于jQuery实现的一个移动端射箭类小游戏。主要实现了目标物、障碍物的随机渲染，以及中箭效果的断定等。
欢迎关注个人博客，不按期更新中——

效果预览

game.gif

点我查看源码仓库。

主要结构规划

...
//基础属性
defaultOption = {}

//绘制总体画面
function drawGame(defaultOption){}

//障碍物、目标物类
function Hinder(){} 
Hinder.prototype.xxx
function Target(){} 
Target.prototype.xxx

//循环渲染 
function eventLoopHinder(){} 
function eventLoopTarget(){} 

//过时去除障碍物、目标物
function clearHinder(){} 
function clearTarget(){} 

//触摸射箭事件监听
function touchEvent(){}
...复制代码

经过以上的结构划分及效果图的展现咱们能够大概了解到，这个游戏主要涉及的三个较为关键的地方就是：

• 目标物的渲染
• 障碍物的飞行
• 定时清除过时对象
• 中箭效果的断定
• 箭射到对象身上

故接下来做者会介绍下实现思路，至于具体细节有兴趣的同窗能够在issues下交流。

目标物的渲染

对于目标物做者用了下面的类来表示：

//如下代码只做为例子说明，与源码有较大删改
//为了方便表示 random 为一个假想的随机值
function Target(id, nowTime, width, score, x, y, time) {
    this.id = id //id即惟一标示
    this.nowTime = nowTime //当前时间
    this.score = score //表明分数
    this.width = width || random // 可随机一个宽度
    this.x = x || random //可随机一个x坐标
    this.y = y || random //可随机一个y坐标
    this.time = time || random //可随机一个过时时间
  }复制代码

在上面的示例代码中咱们能够知道，经过new Target()能够获得一个位置随机，大小随机，过时时间等等均为随机的一个目标物。固然这个随机做者在代码中作过限定，都是在一个特定的范围内随机出来的。那么在这期间惟一须要咱们控制的，应该就是出现的位置了，为何这么说呢，由于出现的位置不该该重合。而若是只凭这个类中的属性来部署目标物，势必会各类重合。

粗略判断目标物的重合

简单看下实现过程：

//targetArray为存放目标物对象的数组，每次new出实例后均会放入该数组
Target.prototype.draw = function(newTarget) {
    var img = new Image(),
    ...
    img.onload = function() {
    ...
        targetArray.forEach(function(obj, index) {
            var x = obj.x - newTarget.x,
                y = obj.y - newTarget.y,
                dis = Math.sqrt(x*x + y*y)
            if(dis < newTarget.width / 2 + obj.width / 2) {
              isOk = false //那么这个对象就不要渲染了
            }
            if(isOk) {
              //渲染该对象到dom
            }
        })
        ...
      }
    }
var newTarget = new Target(id, nowTime, width, scoreTarget)
newTarget.draw(newTarget)复制代码

当new出一个目标物后，在调用draw方法时将其传入到方法中。以后遍历存放目标物对象的数组，暂且将目标物想象成圆，经过两圆圆心距离与半径之和的比来断定要不要将其插入dom节点进行展现。若是童鞋们想要更精确的检测“碰撞”的方式，能够将游戏在canvas画布中进行实现。canvas中getImageData方法能够获取图像的像素点，经过两对象其像素点是否重合能够更为精准的判断。

障碍物的飞行

关于障碍物的飞行采用了css中的transition来进行控制：

function setTransition(property, timing, speed) {
    return {
        'transition-property': property,
        '-moz-transition-property': property, 
        '-webkit-transition-property': property, 
        '-o-transition-property': property, 
        'transition-timing-function': timing,
        '-moz-transition-timing-function': timing, 
        '-webkit-transition-timing-function': timing, 
        '-o-transition-timing-function': timing, 
        'transition-duration': speed + 's',
        '-moz-transition-duration': speed + 's', 
        '-webkit-transition-duration': speed + 's', 
        '-o-transition-duration': speed + 's', 
    }
  }
  Hinder.prototype.draw = function() {
    var img = new Image(),
    ...
    img.onload = function() {
        ...
        $(img).css(setTransition('left', 'linear', this.speed))
        ...
    }
  }复制代码

经过一个较通用的方法返回一个可配置的transition动画对象，在障碍物类的原型方法中动态改变其css样式，其中动画的持续时间设定为障碍物的速度属性。这样来达到每一个新生成的障碍物有着不一样的飞行速度。

定时清除过时对象

因为整个游戏会一直跑循环来快速的生成新的目标和障碍物。同时会维护一个存储目标和障碍物对象的数组，当有需求如碰撞检测时须要遍历整个数组。那么这么操做就意味着咱们的数组不能太大否则会极大地占用内存。同时当障碍物移出屏幕后理应清理掉这个节点，释放内存。故做者用两个定时器来跑两个检测对象过时的方法：

function clearTarget() { //清理过时目标
    var nowTime = new Date().getTime()
    targetArray.forEach(function(item, index) {
      if(item.time + item.now < nowTime) { 
      //当生成对象时间+持续时间 > 当前时间即为过时
        $('#' + item.id).remove()
        targetArray.splice(index, 1)
      }
    })
    targetTimer = setTimeout(clearTarget, xxx)
}
function clearHinder() { //清理过时障碍
    hinderArray.forEach(function(item, index) {
      if(item.shot) {
        if('障碍物移出屏幕') {
          $('#' + item.id).remove()
          hinderArray.splice(index, 1)
        }
      }
    })
    setTimeout(clearHinder, xxx)
}复制代码

中箭的效果断定

一样是采用粗略计算，采用弓箭的中心点和目标物/障碍物水平线两侧的点，以下图的(X2, Y2)的连线，与水平线的夹角来判断。

从图上能够看出按照上面的方法来判断的话。图中的α角是一个最小角。最大角应是目标对象水平线上左侧的点到弓箭中心点连线与水平线的夹角。故做者将计算当前对象与弓箭的夹角方法放到了对象原型中，以便射箭后遍历对象判断角度使用。

//yMax, yMin, xMax, xMin 为方便展现使用。具体数值从上图能够很快求出
Target.prototype.angle = function() {
    var anglemax = Math.atan2(yMax, xMax)
    var anglemin = Math.atan2(yMin, xMin)
    function angleCal(angle) { //转化为°数
      return (angle / Math.PI * 180) < 0 ? angle / Math.PI * 180 - 90 : angle / Math.PI * 180
    }
    var angleMax = angleCal(anglemax)
    var angleMmin = angleCal(anglemin)
    return {
      max: angleMax,
      min: angleMmin
    }
  }复制代码

需注意的是里面使用了Math.atan2(y, x)方法。注意里面参数顺序哦=。=

箭射到对象身上

不知道尝试了这个游戏的童鞋有没有注意到，当点击了某一个方向后，箭会顺着这个方向射出，而且会沿途判断有没有射中什么东西，若是射中了那么就要停在那个对象身上，没射中就无所谓了。那么这一点的实现咱们就不能是使用如目标物身上绑定监听事件来解决了。那么如今再来看这个图：

(X1, Y1)为点击的位置，沿着这个方向延伸就会延伸到(X2, Y2)，那么应该是射中了，这个时候须要渲染箭到(X2, Y2)这个点。如何实现呢，其实图中已经有告终果。X2为当前对象的left + width, X1为触摸点的client.X, Y1为画布高 - client.Y - 弓箭高/2;那么结果是否是已经很明了了呢。再加上以前的角度咱们已经有原型方法计算过，能够经过css中的rotate使得射出的箭改变方向，那么至此这个需求也算是基本完成。

小结

本次本来打算采用canvas来作这个游戏，可是初步尝试以后发现可能因为绘制得太频繁，手机显示出来效果实在是。。固然也由于做者对这种小游戏的实现经验不足。只借此分享一个小case，欢迎指正。

最后

惯例po做者的博客，不定时更新中——有问题欢迎在issues下交流，捂脸求star=。=