HTML5游戏实战之160代码实现黄金矿工
黄金矿工是一款在flash时代红极一时的游戏，变种非常多，今天介绍它的html5版本制作过程。
这是一款结合了商业元素的游戏，在游戏的某些页面上有企业的品牌露出，这也是html5游戏盈利的一种方式，您可以根据需要替换成需要的品牌。
首先show一下最终成果，PC玩家点这里
手机玩家扫描二维码： 
如果您需要在本游戏的基础上加以改进点这里。
在开始介绍游戏开发步骤前，先打个广告，对html5游戏开发，TangIDE 或者Cantk 感兴趣的朋友请扫描下方二维码，加入七巧板官方QQ交流群，一起交流做html5游戏的乐趣，群主正是Cantk作者李先静老师。 
准备工作
使用tangide开发游戏的准备步骤不再赘述，在之前的文章 TangIDE游戏开发之70行代码实现打地鼠中有详细介绍。这里之介绍本游戏包含三个场景。
开始场景
新建一个场景，将场景名命名为”开始场景”，替换一下背景，放两个图片作为品牌露出，一个图片做按钮进入下一场景。如下图所示 
游戏场景
游戏场景里面的元素比较多，挨个介绍。
开场动画提示
首先是开场有个动画提示，用一个颜色块来实现，拖一个文本控件和一个颜色按钮做为子控件。设置一下背景透明度和颜色等属性。
如图所示： 
颜色块的动画，用动画编辑器来编辑一下，如下图： 
钩子
钩子需要抓取金块，也就是碰撞事件，因此用刚体来做。拖一个方块刚体（不要静态刚体）进来，将背景图片设置为钩子，并居中显示，然后拖一个图片控件做为它的子控件，用来显示抓取到的金块图片。将所有的金块种类的图片链接设置图片控件中去： 
金块
同样的，金块也需要用到刚体来实现，背景图片设置为透明，同样的要放一个图片控件，并且设置所有的金块种类的图片。
绳子
绳子我没有用具体的控件，而是选择用canvas的stroke方法来实现，当然也可以drawImage，这样更逼真。
其他
其他的一些控件，比如时钟控件用来控制时间，分数文本控件和时间文本控件等不再赘述。
最终的完成图如下所示： 
结果页面
结果页面，需要一个图片控件，拖一个文本控件作为子控件，用来显示游戏结果。另外还需要一个按钮重新开始游戏。
如下图所示： 
代码
现在需要写一些代码了，场景切换的代码可以自动生成，这里主要贴重要的逻辑代码：
绳子类：
function MinerLine(x, y) {
this.points = [];
this.points[0] = {x:x, y:y};
this.rotation = 0;
this.rotateInc = true;
var self = this;
this.lineLength = MIN_LINE_LENGTH;
this.rotating = true;
this.minState = STATE_FREE;
this.setState = function(state) {
if(this.minState === state) {
return;
}
this.minState = state;
switch (this.minState) {
case STATE_FREE:
var pic = win.hook.getChild(0);
var value = pic.getValue();
if(value && value.length > 0) {
pic.setValue("");
var bonus = win.find("bonus");
bonus.setText(pic.bonus);
bonus.animate("dismiss");
win.score += pic.bonus;
win.find("score").setText(win.score);
}
if(win.goldenNum <= MIN_GOLDEN_NUM) {
var num = MAX_COLDEN_NUM - MIN_GOLDEN_NUM;
win.makeGloden(num);
win.goldenNum += num;
}
this.resume();
break;
case STATE_SHORTEN:
this.lineShorten();
break;
case STATE_EXTENDING:
this.lineExtend();
break;
default:
// code
}
};
this.lineExtend = function() {
if(self.minState === STATE_EXTENDING) {
self.lineLength += 4;
var points = self.getPoints();
if(points[1].x < 0 || points[1].x > win.w
|| points[1].y > win.h) {
self.setState(STATE_SHORTEN);
}
setTimeout(self.lineExtend, 20);
}
};
this.lineShorten = function() {
if(self.minState === STATE_SHORTEN) {
self.lineLength -= 4;
if(self.lineLength < MIN_LINE_LENGTH) {
self.resume();
self.setState(STATE_FREE);
}
setTimeout(self.lineShorten, 20);
}
};
this.pause = function() {
this.rotating = false;
};
this.resume = function() {
this.rotating = true;
};
this.rotate = function() {
if(self.rotating) {
if(self.rotateInc) {
self.rotation += DELTA_ROTATION;
if(self.rotation >= MAX_ROTATION) {
self.rotateInc = false;
}
} else {
self.rotation -= DELTA_ROTATION;
if(self.rotation <= MIN_ROTATION) {
self.rotateInc = true;
}
}
}
setTimeout(self.rotate, 20);
};
this.getPoints = function() {
this.points[1] = {x:this.points[0].x + this.lineLength * Math.sin(this.rotation),
y:this.points[0].y + this.lineLength * Math.cos(this.rotation)};
win.hook.setPosition(this.points[1].x - win.hook.w / 2 + 20 * Math.sin(this.rotation), this.points[1].y - win.hook.h / 2 + 20 * Math.cos(this.rotation));
win.hook.setRotation(-this.rotation);
return this.points;
};
}
绳子的绘制
重写场景的paintSelfOnly方法：
win.paintSelfOnly =function(canvas) {
this.clearBackground(canvas);
this.drawBgImage(canvas);
var points = win.minerLine.getPoints();
canvas.lineWidth = 5;
canvas.strokeStyle = "yellow";
canvas.moveTo(points[0].x, points[0].y);
canvas.lineTo(points[1].x, points[1].y);
canvas.stroke();
return;
};
碰撞
钩子和金块发生碰撞的处理代码：
win.onGoldenMinded = function(body, hook) {
var value = body.element.getChild(0).getValue();
hook.getChild(0).setValue(value);
hook.getChild(0).bonus = body.element.getChild(0).bonus;
win.minerLine.setState(STATE_SHORTEN);
win.goldenNum--;
body.element.remove(true);
};屏幕点击事件
win.handleClick = function(point) {
win.minerLine.pause();
win.minerLine.setState(STATE_EXTENDING);
};总的代码加起来160行左右，可以说非常的精简了。如果增加可玩性，可以加一些障碍物如石块之类的。
如果您想在我的基础上进行改进，加入您的创意，点这里。
如果在开发过程中有任何疑问，请扫描二维码加入官方QQ群：
本系列介绍的tangide游戏开发的所有的代码和资源都是开源的，你可以免费试用。
——TangIDE，让H5开发变简单！