前言
半年前用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個邊界。