HTML5游戏实战：代码都不用敲几行，全图形界面制作弹珠台游戏！

使用absurd大神 的游戏引擎（GameBuilder: https://gamebuilder.duapp.com）做了一个简单的弹珠台游戏。

现在还没搞贴图，重置游戏和其他功能 看起来很丑请多包（吐）含（槽）。先自己玩儿玩儿 乐呵乐呵

全程拖模块和系统自动@L_618_4@代码，几乎不用自己敲

 。

附上大神的链接http://blog.csdn.net/absurd/article/details/41862357

由于有现成的物理引擎，所以打算用重力来模拟一个弹珠台。

以下是我的弹珠台的预览效果和制作方法。

0.先Show一下最终成果:

在线运行:http://osgames.duapp.com/apprun.html?appid=preview441422496160012

没做重来的功能 请F5手动重玩儿。

由于博客是做完了这个游戏才想着写  所以步骤是后期截图的。

（排版也沿（chao）袭（xi）一下大神的   请不要在意这些细节）

1，新建一个项目，按照自己想象的弹珠台  在物理引擎中拖入多个静态的方块作为场景的边缘，目的是让弹珠不会飞出界面外，再屏幕下方留一个开口作为弹珠落下的位置，静态方块都是有碰撞体积的 很好用。

2，继续拖入静态方块 作为场景中的障碍物和得分点，其中黑色的方块是想让弹球能在里面高速弹来弹去所以给他们加了一些方法。

一开始打算设置弹球碰到他们的时候获得或者增加一个速度。试了试 发现效果不太好调，而且比较复杂，干脆吧黑块的物理属性改一下 提高他们的弹力系数。

弹力系数设为1 意思就是 如果有个平面，你放个球自由落体 反弹起来的球会回到初始的位置然后再落下如此反复，通俗理解就是没有能量损失。

这样小球弹到那里的时候就能高速运转 疯狂加分！

红色方块是设置了碰撞事件 碰撞后给小球加速，最后会讲怎么设置。

3，加入了一些静态的三角形作为得分模块

4，是时候做打击棒了 就是用来打小球的，也是这个游戏中玩家唯一需要和能够控制的部分。

打击棒由方块和一个转动关节组成 直接吧转动关节拖到方块里面就可以里，方块实际上就是密度为1的 静态方块，是有质量的。

再把关键的弹球加入进来他是一个密度为1 的圆形。

5，再在空的地方加一些自己乱动的模块作为障碍物，场景布置就差不多了。

这里用到的是方块和马达关节。

6，再加入一个分数显示，显示游戏得分，这里我用的工具自带的“图片文字”。

7，再来一个检测小球落下后游戏结束的模块，为此我在屏幕下方看不见的位置加了一个方块。

8，接下来需要加程序了

在场景的onopen() 中加入

var me = this;
var win = this.getWindow();


win.initGame = function() {
    console.log("dd_pinball game init");
    win.sc = 0;
    win.gamePlaying = true;
    var hitball = win.find("ui-hit-ball");
    hitball.setPosition(439,83);
    hitball.setV(0,0);
    win.find("ui-point").setVisible(false);
    win.find("ui-restart").setVisible(false);
};

win.addPoint = function(point) {
    //console.log("wEIDi_addPoint"+point);
    win.sc += point;
    if (win.sc < 0) {
        win.gameOver();
    }
};

win.accelerate = function(x,y) {
   //console.log("wEIDi_accelerate x="+x+" y="+y);
    win.find("ui-hit-ball").addV(x,y);
};

win.gameOver = function() {
    if (win.gamePlaying) {
        win.gamePlaying = false;
    } else {
        console.log("pingball gameOver debug");
        return;
    }
    //console.log("pinball_gameOver palyer get "+sc+" point");
    win.find("ui-point").setVisible(true); 
    //setTimeout(win.showreplay,2000);
    win.showreplay();
};

win.showreplay = function() {
    win.find("ui-restart").setVisible(true);
};

win.gameRestart = function() {
    //console.log("You Losessssss      gameRestart");
    win.initGame();
};

this.initGame();

<span style="font-size: 14px; font-family: Arial,sans-serif; BACkground-color: rgb(255,255,255);">像设置速度，显示对象这种方法都可以直接点击程序@L_618_4@器自动@L_618_4@，自己改一下值就行了</span>

在场景的 onPointerDown事件中添加一下代码 作为打击棒的操作 

var me = this;
var win = this.getWindow();
//设置对象的速度
win.find("ui-hit-stick-1").addV(12,-18);
win.find("ui-hit-stick-2").addV(-15,-20);
win.find("ui-hit-stick-3").addV(25,-20);

在 各个得分模块的 onEndContact事件中添加得分或给弹球加速度。 不同的模块不同的得分，每个都要处理 。

var me = this;
var win = this.getWindow();
win.addPoint(10);
win.accelerate(3,-20);

在用来检测游戏结束的方块onEndContact事件中 添加

var me = this;
var win = this.getWindow();
//显示对象
win.gameOver();

//设置对象的数值
win.find("ui-point").SETVALue(sc);

这样基本功能就完成啦 以上代码大多都是系统@L_618_4@的 果断方便啊！ 

接下来就可以给场景 各个模块加入贴图 特效 背景和其他更多功能 让游戏看起来更顺眼点。

很简单吧 大家快来试试！

--20150202-1403--

更新

添加了重玩的按钮

在 Restart的 onClick中写入

var me = this;
var win = this.getWindow();
win.gameRestart();