基于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 //i