前言
半年前用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个边界。
扫一扫
969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
