js+canvas仿微信《弹一弹》小游戏

前言

半年前用js和canvas仿了热血传奇网游（地址），基本功能写完之后，剩下的都是堆数据、堆时间才能完成的任务了，没什么新鲜感，因此进度极慢。这次看到微信《弹一弹》比较火，因为涉及到物理引擎（为了真实），于是动手试了一下。一共用了10个小时，不仅完成了这个demo，<删除线>并且打上了弹一弹好友排行榜的第一页</删除线>。

资料汇总

在线demo：点击即玩
代码：400行带注释
canvas渲染库：支持物理引擎及chrome调试工具，这里

准备工作

微信这个小游戏的游戏规则很简单，看图就能看明白，这里不再赘述。涉及到的几个开发难度：

1.物理引擎

当然不用也可以，无非就是改改图片的位置，可以自己模拟掉落和碰撞效果。不过由于我追(wu)求(li)体(hen)验(cha)，因此开始寻找第三方的物理引擎。

最后我使用的是chipmunk的js版（这个库是底层计算库，因此star不多，但是比较有名气的hilo和cocos2d的物理引擎用到了这个库）。主要原因之一是，这个库的功能只是进行了物理运算，并且支持重力、弹性、摩擦、浮力等功能。当然体积也比较小。毕竟我们只是写一个小demo，引入一个游戏框架的话很可能徒增成本。

不过我使用的时候遇到了几个罕见的bug，应该是作者的疏漏，在issue中也有人反馈。看作者更新频率很低，我拿来用的时候有一些修改。如果其它人使用的时候遇到js报错，可以试试这里

2.UI渲染

我选择的是canvas，因为涉及到频繁的样式更新，每帧都去改写style的话太占性能。而且用canvas写的话，以后还可以迭代一些碰撞产生的画效。

之前封装了一个easycanvas库，可以将树形数据结构“翻译”成“canvas画布中的一个个对象”。这次又顺手补充了一个支持chipmunk的插件，这样整个“弹一弹”的开发就完全只需要管理数据即可，渲染工作很少。

开始开发

html及背景

由于项目较小，我把html、css、js堆在了一个文件（最后写完之后，发现一共连同注释才400行）。

首先创建一个空html，为了看起来高大上，我搜了一张天空主题的背景图。

<style>body {margin: 0;text-align: center;background: black;}canvas {border: 1px solid grey;height: 100%;max-width: 100%;background-image: url(http://a3.topitme.com/2/d4/ff/1144306867e94ffd42o.jpg);background-size: auto 100%;}
</style>
<body><canvas id="el"></canvas>
</body>

可能用到的变量

接下来，准备一些我们需要用到的数据。例如游戏的宽高、小球的大小、当前游戏状态（是否可以射击）、每次可以射出的小球数、玩家的分数，blabla。

由于是直接在html里写码，为了兼容老浏览器，只能var来var去。

// 在html直接写代码，不编译、不构建，不然应该用const的
var width = 400, height = 600, ballSize = 20;// 游戏状态
var canShoot = true;
var score = 0, ballLeft = 0, ballCount = 5;
var blockArray = [];// 图片
var BALL = Easycanvas.imgLoader('./ball.png');
var BLOCK = Easycanvas.imgLoader('./block.jpg');
var TRIANGLE = Easycanvas.imgLoader('./triangle.png');// 给每个东西起一个type，后面会用来做碰撞检测
var BALL_TYPE = 1, BLOCK_TYPE = 2, BORDER_TYPE = 3, BOTTOM_TYPE = 4, BONUS_TYPE = 5;

顶部文本

接下来先将分数和小球个数写到canvas中。首先创建一个easycanvas实例，宽400，高600。然后add2个对象。一个以左上角(5,5)为顶点，向右下方写分数。一个以右上角(395, 5)为顶点，向左下角写当前小球个数。

// 初始化easycanvas实例
var $Painter = new Easycanvas.painter();
$Painter.register(el, {width: width,height: height,
});
$Painter.start();$Painter.add({content: {text: function () {return '得分:' + score;}},style: {tx: 5, ty: 5,textAlign: 'left', textVerticalAlign: 'top',color: 'black'}
});
$Painter.add({content: {text: function () {return '小球个数:' + ballCount;}},style: {tx: 395, ty: 5,textAlign: 'right', textVerticalAlign: 'top',color: 'black'}
});

添加方块

接下来，设置整个场景的重力，并且添加一些方块进去。每个方块对象含有一个child，用来展示数字（还可以撞几下）。为了避免方块重叠，我们让方块的x坐标在50、100、150、……、300、350循环。同时，为了避免看起来“太整齐”，每次添加一个小的随机数，让这些方块们错落有致。（“错落”指参差不齐，“致”指情趣。形容事物的布局虽然参差不齐，但却极有情趣，使人看了有好感。——某度）

每个方块的大小是30x30，因此shapes包括4条边，例如(0,0)到(30,0)是一条边。这些方块是失重的（不会掉下去），因此static设置为true。为了更加错落有致，我们给他一个随机的角度rotate。

每个方块含有一个child，写着一个数字。不需要给数字设置rotate，否则6和9可能就分不清了。

// 初始化easycanvas物理引擎，添加一个有物理树形的空容器
var $space = new Easycanvas.class.sprite({physics: {gravity: 2, // 重力默认为1，但是游戏进程有点慢，看着不够爽accuracy: 2,},
});
$Painter.add($space);var space = $space.launch();// 防止方块重叠，记录上一次方块的X坐标
var lastBlockPositionX = 50;
function addBlock (max, boolAddToBottom) {var deg = Math.floor(Math.random() * 360);var sprite = $space.add(new Easycanvas.class.sprite({name: 'block',content: {img: BLOCK,},physics: {shape: [[[0, 0], [0, 30]],[[0, 30], [30, 30]],[[30, 30], [30, 0]],[[30, 0], [0, 0]]],mass: 1,friction: 0.1,elasticity: 0.9,collisionType: BLOCK_TYPE,static: true,},style: {tw: 30, th: 30,tx: lastBlockPositionX + Math.floor(Math.random() * 20 - 10),ty: boolAddToBottom ? 500 : height - 100 - Math.floor(Math.random() * 100),locate: 'lt',rotate: deg,},children: [{content: {text: Math.floor(Math.random() * max) + 1,},style: {color: 'yellow',textAlign: 'center',textVerticalAlign: 'middle',textFont: '28px Arial',tx: 15, ty: 10}}]}));sprite.physicsOn();blockArray.push(sprite);lastBlockPositionX += 50;if (lastBlockPositionX > 350) {lastBlockPositionX = 50;}
}

接下来，我们做瞄准部分。大致功能是，有一排小圆点，会随着鼠标运动，并且有弹簧的感觉。

首先要记录鼠标的轨迹，我们给easycanvas实例$Painter加上事件监听。在“弹一弹”游戏中，小球不能向上发射。因此记录鼠标的Y坐标值的时候，我们让他至少为30。

// 记录鼠标轨迹
var mouse = {x: 300, y: 50};
var mouseRecord = function ($e) {mouse.x = $e.canvasX;mouse.y = Math.max(30, $e.canvasY);
};$Painter.register(el, {width: width,height: height,events: {mousemove: mouseRecord,touchmove: mouseRecord,mouseup: shoot,touchend: shoot,}
});

小球瞄准

接下来，我们添加7个小球，让他们排列在一条线上，从游戏正上方的(300, 20)点到鼠标位置均匀铺开。具体逻辑就是，我们将鼠标位置和(300, 20)的坐标差进行6等分，第一个球的坐标向鼠标位置偏移0/6、第二个球偏移1/6……，最后一个球偏移6/6（正好落在了鼠标位置）。这几个球我们给他们一个透明度，并且不启用物理规则（因为这个阶段小球不能掉下来）。我们在每个小球上设置一个shoot钩子，当玩家射出真实的小球时，删除这个瞄准用的小球。

// 显示瞄准轨迹
var startAim = function () {for (var i = 0; i < 7; i ++) {$Painter.add({content: {img: BALL,},data: {gap: i / 6,},style: {tx: function () {return 200 + (mouse.x - 200) * this.data.gap;},ty: function () {return 20 + (mouse.y - 20) * this.data.gap;},tw: 20, th: 20,opacity: 0.4,},hooks: {shoot: function () {this.remove();}}});}
};
startAim();

发射小球

接下来，我们添加真实的小球（受到物理规则影响的小球）。

当射击时，我们广播shoot事件，移除刚才瞄准用的小球。

之后，我们间隔100毫秒，连续调用addBall方法来创建小球。addBall方法中，我们为每个小球设置物理规则。包括形状、弹性、摩擦等。

这里有一个坑，就是一旦开始射击，不管鼠标怎么移动，射击的方向都不能变化。因此我们要先记录下当前的mouse值，这里用的是JSON.parse(JSON.stringify(mouse))来copy一个简单对象。

这里又有一个坑：“弹一弹”游戏中，刚射击出去的小球是不受重力影响的（不然瞄准还有什么意义）。因此，我们在每个小球上增加一个和重力相反的作用力，抵消重力。（在其它部分的代码中，有着“当小球发生一次碰撞后，取消这个作用力”的实现，这里为了清晰没有一起贴出来）。

同时，我们给小球加上初速度。

这里又又又又又有一个坑（好烦啊）：不管怎么射击，小球初始获得的速度是相同的。哪怕小球的瞄准位置距离射出位置很近，速度也不能慢。这里需要修正一下初始速度，这里用到了著名的Pythagoras theorem定理：直角三角形的两条直角边的平方和等于斜边的平方。

function shoot () {if (!canShoot) return;$Painter.broadcast('shoot');canShoot = false;var currentMouse = JSON.parse(JSON.stringify(mouse));for (var i = 0; i < ballCount; i++) {setTimeout(function () {addBall(currentMouse);}, i * 100);}
};function addBall (mouse) {ballLeft++;var $ball = new Easycanvas.class.sprite({name: 'ball',content: {img: BALL,},physics: {shape: [// 形状是一个以(ballSize / 2, ballSize / 2)为圆心的，半径也是ballSize / 2的圆// 改成位运算符吧，看着能高大上一点（其实在这里卵用没有）[ballSize >> 1, ballSize >> 1, ballSize >> 1]],mass: 1, // 质量friction: 0.1, // 摩擦（摩擦太大了会损失能量）elasticity: 0.8, // 弹性collisionType: BALL_TYPE,},style: {tw: ballSize, th: ballSize,sx: 0, sy: 0,tx: 200,ty: 20,zIndex: 1,},});$space.add($ball);$ball.physicsOn();// 抵消重力$ball.$physics.body.applyForce({x: 0, y: 1000}, {x: 0, y: 0});// 初速度var speed = {x: (mouse.x - 200) / (20 - mouse.y),y: 1};// 修正速度，确保从各个角度射出小球的速度差不多// 这里用到的著名的高等数学知识：勾股定理var muti = Math.sqrt(Math.pow(speed.x, 2) + Math.pow(speed.y, 2)) / 700;$ball.$physics.body.setVel({x: -speed.x / muti,y: -speed.y / muti,});
}

其它

轮廓已经有了，后面的部分不再是难点。不过做到最后，坑还是比较多的：

例如小球可能会停在方块上（就是这么巧），这是需要人为给予小球一个速度（“弹一弹”游戏里也是这样做的）。

例如小球撞到方块上，可能会触发2次碰撞，因为影响不大，我先搁置了。这个是因为时间精度没有太细，小球在上一帧没有发生碰撞，因为速度较快，下一帧同时撞到了2个边界。