写在最前
本次的分享是一个基于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