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

[Aaaaaaaty]

写在最前

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

效果预览

点我查看源码仓库。

主要结构规划

...
//基础属性
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，欢迎指正。