GameBuilder开发游戏应用系列之100行代码实现别踩白块

在线预览:http://osgames.duapp.com/apprun.html?appid=osgames1-961421749977376
在线编辑:http://osgames.duapp.com/gamebuilder.php?appid=osgames1-961421749977376
微信扫描:这里写图片描述
游戏截图:
这里写图片描述
别踩白块是一款非常流行的游戏,该游戏于2014年4月16日上线App Store。并在全球40多个国家、地区免费游戏榜登顶榜首[4] ,超过一百个国家或地区排名前十 ,5月份荣登全球游戏下载总榜(iOS + Android)第一宝座,游戏上线3个月累计下载达1亿。

别踩白块的实现方法在GameBuilder种的实现方式,主要靠一个UICanvas的控件,这里的UICanvas不同于Cantk本身基于的html5 canvas,它继承自Cantk将UIElement,只是将canvas的2d context接口暴露出来,由用户来决定需要绘制的内容和方式。

UICanvas有一个绘制事件借口onPaint,大部分的逻辑在此接口里面完成。主要逻辑如下:

  1. 生成黑块列表(一行中四格种只有一个黑快)
  2. 绘制黑白块方格
  3. 判断点击事件

生成黑块列表

用一个随机数表示黑块位置,保存在行数组里面。

win.prepareBlock = function() {
    for(var raw = 0; raw < 1001; raw++) {
        var col = Math.floor(Math.random() * 4);
        win.blockList[raw] = col;
        //console.log("raw:" + raw + " col:" + col);
    }
};

绘制黑白块方格

代码写在UICanvas的onPaint事件里面。
这里写图片描述

  1. 判断当前行是否已经点击过
  2. 递增偏移量,根据偏移量,重新绘制游戏区域内的方块。这样做是为了有动画效果。

判断点击事件

  1. 根据点换算成行列值
  2. 在数组里查询当前行黑块所在列
  3. 比较二者是否一致。
win.doOnClick = function(point) {
    var x = point.x;
    var y = point.y;
    var raw = Math.floor(win.curRaw + 1 - (this.h - y) / win.bsl);
    var col = Math.floor(x / win.bsl);
    if(win.blockList[raw] === col) {
        win.blockList[raw] = -1;
        win.score += 100;
        win.find("score").setValue(win.score);
    } else if(win.blockList[raw] === -1) {
        //do nothing;
    } else {
        this.gameover = true;
        this.openWindow("win-dlg-confirm", function(ret) { 
            this.score = 0;
            win.find("score").setValue(win.score);}, 
            false, this.score
        );
        this.score = 0;
        this.replay();
    }
};

别踩白块有很多玩法,经典/街机/禅/极速,这里只实现经典模式,其他模式只需要控制一下白块产生的方式应该可以很快实现。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值