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开发变简单！