`
jobar
  • 浏览: 346914 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用Sencha Touch写2048游戏

 
阅读更多
1 UI部分
Ext.define('mobile2048.view.maincontainer', {
    extend: 'Ext.Container',

    requires: [
        'Ext.Panel',
        'Ext.field.Text',
        'Ext.Button'
    ],

    config: {
        height: 400,
        itemId: 'maincontainer',
        style: 'background:#bbada0',
        width: 326,
        layout: 'fit',
        items: [
            {
                xtype: 'container',
                layout: 'vbox',
                items: [
                    {
                        xtype: 'panel',
                        height: 80,
                        style: '',
                        layout: 'hbox',
                        items: [
                            {
                                xtype: 'container',
                                border: 2,
                                centered: false,
                                height: 68,
                                itemId: 'g11',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            },
                            {
                                xtype: 'container',
                                baseCls: '',
                                border: 2,
                                centered: false,
                                cls: 'backgroud-color:blue',
                                height: 68,
                                itemId: 'g12',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            },
                            {
                                xtype: 'container',
                                baseCls: '',
                                border: 2,
                                centered: false,
                                cls: 'backgroud-color:blue',
                                height: 68,
                                itemId: 'g13',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            },
                            {
                                xtype: 'container',
                                baseCls: '',
                                border: 2,
                                centered: false,
                                cls: 'backgroud-color:blue',
                                height: 68,
                                itemId: 'g14',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        height: 80,
                        layout: 'hbox',
                        items: [
                            {
                                xtype: 'container',
                                border: 2,
                                centered: false,
                                height: 68,
                                itemId: 'g21',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            },
                            {
                                xtype: 'container',
                                baseCls: '',
                                border: 2,
                                centered: false,
                                cls: 'backgroud-color:blue',
                                height: 68,
                                itemId: 'g22',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            },
                            {
                                xtype: 'container',
                                baseCls: '',
                                border: 2,
                                centered: false,
                                cls: 'backgroud-color:blue',
                                height: 68,
                                itemId: 'g23',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            },
                            {
                                xtype: 'container',
                                baseCls: '',
                                border: 2,
                                centered: false,
                                cls: 'backgroud-color:blue',
                                height: 68,
                                itemId: 'g24',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        height: 80,
                        layout: 'hbox',
                        items: [
                            {
                                xtype: 'container',
                                border: 2,
                                centered: false,
                                height: 68,
                                itemId: 'g31',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            },
                            {
                                xtype: 'container',
                                baseCls: '',
                                border: 2,
                                centered: false,
                                cls: 'backgroud-color:blue',
                                height: 68,
                                itemId: 'g32',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            },
                            {
                                xtype: 'container',
                                baseCls: '',
                                border: 2,
                                centered: false,
                                height: 68,
                                itemId: 'g33',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            },
                            {
                                xtype: 'container',
                                baseCls: '',
                                border: 2,
                                centered: false,
                                cls: 'backgroud-color:blue',
                                height: 68,
                                itemId: 'g34',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        height: 80,
                        layout: 'hbox',
                        items: [
                            {
                                xtype: 'container',
                                border: 2,
                                centered: false,
                                height: 68,
                                itemId: 'g41',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            },
                            {
                                xtype: 'container',
                                baseCls: '',
                                border: 2,
                                centered: false,
                                cls: 'backgroud-color:blue',
                                height: 68,
                                itemId: 'g42',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            },
                            {
                                xtype: 'container',
                                baseCls: '',
                                border: 2,
                                centered: false,
                                cls: 'backgroud-color:blue',
                                height: 68,
                                itemId: 'g43',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            },
                            {
                                xtype: 'container',
                                baseCls: '',
                                border: 2,
                                centered: false,
                                cls: 'backgroud-color:blue',
                                height: 68,
                                itemId: 'g44',
                                margin: 5,
                                padding: 28,
                                style: 'background:rgba(238, 228, 218, 0.35)',
                                width: 71
                            }
                        ]
                    },
                    {
                        xtype: 'textfield',
                        itemId: 'score',
                        label: '分数',
                        value: 100,
                        readOnly: true
                    },
                    {
                        xtype: 'button',
                        itemId: 'reset',
                        width: 121,
                        text: '重新开始'
                    }
                ]
            }
        ]
    }

});


2 控制器
Ext.define('mobile2048.controller.main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            main: '#maincontainer'
        },

        control: {
            "container#maincontainer": {
                initialize: 'onMaincontainerInitialize'
            },
            "button#reset": {
                tap: 'onResetTap'
            }
        }
    },

    onMaincontainerInitialize: function(component, eOpts) {
        var com = component;
        this.initGrid(com);
        com.renderElement.addListener('swipe',this.handleSwipe,this);
        return false;
    },

    onResetTap: function(button, e, eOpts) {
        this.initGrid();
        return false;
    },

    initGrid: function(com) {
        // console.log('initGrid');
        this.resetGame();
        this.generateRandomNum();
        return false;
    },

    handleSwipe: function(e,node,options) {
        if(this.gameOver()){
            Ext.Msg.show({
                title: '游戏结束,请重新开始',
                buttons: Ext.Msg.OK
            });
            return;
        }
        var direc = e.direction;
        switch(direc){
            case 'up':
                this.processUp();
                break;
            case 'down':
                this.processDown();
                break;
            case 'left':
                this.processLeft();
                break;
            case 'right':
                this.processRight();
                break;
        }
        return false;
    },

    processUp: function() {
        console.log('up');
        for(var i=1;i<=4;i++){
            var row = this.fetchRow(i,1);
            this.reArrange(i,row,'UP');
        }
        this.generateRandomNum();
        return false;
    },

    processDown: function() {
        console.log('down');
        for(var i=1;i<=4;i++){
            var row = this.fetchRow(i,1).reverse();
            this.reArrange(i,row,'DOWN');
        }
        this.generateRandomNum();
        return false;
    },

    processLeft: function() {
        console.log('left');
        for(var i=1;i<=4;i++){
            var row = this.fetchRow(i,0);
            this.reArrange(i,row,'LEFT');
        }
        this.generateRandomNum();
        return false;
    },

    processRight: function() {
        console.log('right');
        for(var i=1;i<=4;i++){
            var row = this.fetchRow(i,0).reverse();
            this.reArrange(i,row,'RIGHT');
        }
        this.generateRandomNum();
        return false;
    },

    generateRandomNum: function(num) {
        var main = this.getMain();
        var randomNum = Math.floor((Math.random() * 2) + 2);
        var count = 0;
        var roundNum = Math.min(randomNum, this.getEmptyCellNum());
        while(count<roundNum){
            var col = Math.floor((Math.random() * 4) + 1);
            var row = Math.floor((Math.random() * 4) + 1);
            var cub = main.down('#g'+row+col);

            if(Ext.isEmpty(cub.get('html'))){
                randomNum = Math.floor((Math.random() * 2)) * 2 + 2;
                cub.set('html',randomNum);
                this.totalScore += randomNum;
        //         console.log(row,col,randomNum,count);
                cub.set('style',mobile2048.Color[randomNum]);
                count++;
            }
        }
        this.updateScore();
        return false;
    },

    gameOver: function() {
        var main = this.getMain(),cell_a,a_v,cell_b,b_v, over = true;
        if(this.getEmptyCellNum() !== 0){
            return false;
        }
        for(var i=1;i<=4;i++){
            var k=1;
            for(var j=1;j<=4 && k<=4;j++){
                var k = j+1;
                cell_a = main.down('#g' + i + j);
                cell_b = main.down('#g' + i + k);
                a_v = (cell_a && cell_a.get('html')) ? cell_a.get('html') : null;
                b_v = cell_b && cell_b.get('html') ? cell_b.get('html') : null;
                if(a_v === b_v){
                    over = false;
                    break;
                }
            }
            if(!over) break;
        }
        if(over){
            for(var i=1;i<=4;i++){
                var k=1;
                for(var j=1;j<=4 && k<=4;j++){
                    var k = j+1;
                    cell_a = main.down('#g' + j + i);
                    cell_b = main.down('#g' + k + i);
                    a_v = (cell_a && cell_a.get('html')) ? cell_a.get('html') : null;
                    b_v = cell_b && cell_b.get('html') ? cell_b.get('html') : null;
                    if(a_v === b_v){
                        over = false;
                        break;
                    }
                }
                if(!over) break;
            }
        }
        return over;
    },

    fetchRow: function(rowNum, flag) {
        var row = [], main = this.getMain(),cube;
        for(var i=1;i<5;i++){
            if(flag === 0){
                cube = main.down('#g' + rowNum + i);
            }else{
                cube = main.down('#g' + i + rowNum);
            }
            var val = cube.get('html');
            val = val?val:0;
            row.push(val);
        }
        // console.log('fetched '+row);
        return row;
    },

    updateScore: function() {
        var main = this.getMain();
        main.down('#score').setValue(this.totalScore);
    },

    reArrange: function(rownum,row,direction) {
        var main = this.getMain();
        if(row){
            switch(direction){
                case 'LEFT':
                    row = this.merge(row);
                    break;
                case 'RIGHT':
                    row = this.merge(row).reverse();
                    break;
                case 'UP':
                    row = this.merge(row);
                    break;
                case 'DOWN':
                    row = this.merge(row).reverse();
                    break;
            }
        //     console.log('rearrange ' + row);
            var len = row.length,cell;
            for(var i=1;i<=len;i++){
                if(direction === 'LEFT' || direction === 'RIGHT'){
                    cel = main.down('#g'+rownum+i);
                }else{
                    cel = main.down('#g'+i+rownum);
                }
                var val = row[i-1];
                cel.set('html',val !== 0 ? val : null);
                cel.set('style',val !== 0 ? mobile2048.Color[val] : mobile2048.Color.defaultStyle);
            }
        }
    },

    merge: function(row) {
        for(var i=0;i<row.length;i++){
            if(row[i] === 0)
                continue;
            for(var j = i+1;j<row.length;j++){
                if(row[i] === row[j] && j === i+1){
                    row[i] += row[j];
                    row[j] = 0;
                    i++;
                }
            }
        }
        var count = 0;
        var len = row.length;
        var arr = [];
        for(var i=0; i<len;i++){
            if(row[i] !== 0){
                arr.push(row[i]);
            }
        }
        while(arr.length<len){
            arr.push(0);
        }
        return arr;
    },

    getEmptyCellNum: function() {
        var row,num = 0;
        for(var i=1;i<=4;i++){
            row = this.fetchRow(i);
            for(var j = 0;j<row.length;j++){
                if(row[j] === 0)
                    num++;
            }
        }
        console.log('Empty num of cell:' + num);
        return num;
    },

    resetGame: function() {
        var main = this.getMain();
        this.totalScore = 0;
        for(var i=1;i<5;i++){
            for(j=1;j<5;j++){
                cell = main.down('#g' + i + j);
                cell.set('html',null);
                cell.set('style',mobile2048.Color.defaultStyle);
            }
        }
    },

    getScore: function(row) {
        var score = 0;
        for(var i=0;i<row.length;i++){
            score += row[i];
        }
        return score;
    },

    init: function(application) {

    },

    launch: function() {
        this.totalScore = 0;
    }

});

3 application
// @require @packageOverrides
Ext.Loader.setConfig({

});


Ext.application({
    views: [
        'maincontainer'
    ],
    controllers: [
        'main'
    ],
    name: 'mobile2048',

    launch: function() {
        Ext.define('mobile2048.Color', {
            singleton: true,
            'defaultStyle': 'background:rgba(238, 228, 218, 0.35)',
            '2': 'background:#eee4da',
            '4':'background:#ede0c8',
            '8':'background:#f2b179',
            '16':'background:#f59563',
            '32':'background:#f67c5f',
            '64':'background:#f65e3b',
            '128':'background:#edcf72',
            '256':'background:#edcc61',
            '512': 'background:#edc850',
            '1024': 'background:#edc53f',
            '2048':'background:edc22e'
        });
        Ext.create('mobile2048.view.maincontainer', {fullscreen: true});
    }

});


4 效果:





  • 大小: 7.3 KB
  • 大小: 15.1 KB
分享到:
评论
3 楼 jobar 2014-06-10  
修正merge算法
    merge: function(row) {
        for(var i=0;i<row.length;i++){
            if(row[i] === 0)
                continue;
            for(var j = i+1;j<row.length;j++){
                if(row[j] === 0) continue;
                if(row[i] === row[j]){
                    row[i] += row[j];
                    row[j] = 0;
                    i++;
                }else{
                    break;
                }
            }
        }
        var count = 0;
        var len = row.length;
        var arr = [];
        for(var i=0; i<len;i++){
            if(row[i] !== 0){
                arr.push(row[i]);
            }
        }
        while(arr.length<len){
            arr.push(0);
        }
        return arr;
    }
2 楼 jobar 2014-06-10  
修正初始化函数:
    initGrid: function(com) {
        // console.log('initGrid');
        this.resetGame();
        this.generateRandomNum(true);
        return false;
    },
1 楼 jobar 2014-06-10  
修改随机数生产函数:

    generateRandomNum: function(init) {
        var main = this.getMain();
        var randomNum = Math.floor((Math.random() * 2) + 2);
        var count = 0;
        var roundNum = init ? randomNum : 1;
        while(count<roundNum){
            var col = Math.floor((Math.random() * 4) + 1);
            var row = Math.floor((Math.random() * 4) + 1);
            var cub = main.down('#g'+row+col);

            if(Ext.isEmpty(cub.get('html'))){
                randomNum = Math.floor((Math.random() * 2)) * 2 + 2;
                cub.set('html',randomNum);
                this.totalScore += randomNum;
                cub.set('style',mobile2048.Color[randomNum]);
                count++;
            }else if(this.getEmptyCellNum() === 0){
                count++;
            }
        }
        this.updateScore();
        return false;
    },

相关推荐

    Sencha Touch Mobile JavaScript Framework

    通过以上分析可以看出,Sencha Touch不仅在2012年时是一款极具影响力的移动Web应用开发框架,而且至今仍然具有很高的研究和使用价值。对于希望从事移动Web应用开发的技术人员来说,深入学习和掌握Sencha Touch将为其...

    sencha touch2.1简单相册(修正bug)

    总的来说,"sencha touch2.1简单相册(修正bug)"项目是一个综合性的学习资源,涵盖了移动应用开发中的关键概念,包括Sencha Touch框架的使用、MVC架构的应用、路由实现、用户认证以及性能优化。通过研究这个项目,...

    html5开发指南

    2. **示例与案例分析**:通过实际的开发示例,学习如何使用Sencha Touch构建新闻阅读器、社交应用、电子商务网站等。 3. **性能优化技巧**:了解如何通过合理的架构设计和代码优化,提升Sencha Touch应用的性能。 ...

    Android开发实战中常用安卓开发框架.docx

    例如,如果希望使用Web技术跨平台开发,PhoneGap和Sencha Touch可能是不错的选择;而如果团队熟悉C#,则Xamarin可能更合适。对于追求高效简洁的开发流程,Basic4Android可能是一个理想选择。理解并熟练掌握这些框架...

    ChessUnbound

    sencha touch作为移动客户端服务器:用于网络服务的sinatra bdd:含SeleniumCucumberTDD:茉莉花单元测试和Ruby迷你测试服务器设置 $ bundle install$ rake db:create_indexes[production]服务器API 通过发送有效的...

    使用HTML5和CSS3构建基于webkit的Web-PageApp.doc

    3. 使用Mobile UI库,如jquery mobile, sencha touch, iui等。 4. 使用隐藏标题栏的技巧,如addEventListener(“load”, function() { setTimeout(function (){ window.scrollTo(0,1);}, 0); }, false)。 5. 使用...

    HTML5在移动互联网开发中的运用.pdf

    JO框架能构建类似本地应用的程序,LimeJS专注于游戏开发,而SenchaTouch则是第一应用HTML5开发的框架体系,支持利用Javascript和CSS3构建APP程序,并使其运行效果接近本地应用。 HTML5在移动互联网开发中的应用体现...

    html5工具介绍

    - **Sencha Touch**: `http://www.sencha.com/products/touch` 和 `http://framework.joshfire.com/` 以及其他框架如 `http://the-m-project.net/` 和 `http://joapp.com/`,都提供了丰富的UI组件和模板,加速移动...

    wwrh培训心得.docx

    这包括对各种 Web 前端框架如 jQuerymobile、Sencha Touch 和 PhoneGap 的应用,以及 Cocos2d-HTML 游戏引擎的使用,这些都极大地拓宽了学员的技能范围。 总的来说,WWRH 培训通过全面覆盖 HTML5、CSS3 和 ...

    GameThrive-PhoneGap-SDK:适用于 PhoneGap 的推送通知 SDK。 由 https 提供支持

    这个插件可以轻松地将您的 PhoneGap CLI、PhoneGap Build、Cordova 或 Sencha Touch 应用程序或游戏与 GameThrive 集成。 支持 Android、iOS 和亚马逊的 Fire OS 平台。 有关设置文档,请参阅 。

    wwrh培训心得.pdf

    实训项目可能涵盖各种Web前端框架,如JQuerymobile、Sencha Touch和PhoneGap,以及Cocos2d-HTML这样的游戏引擎,这不仅锻炼了开发技能,也为未来的职业发展打下了坚实基础。 总的来说,这个培训深入浅出地介绍了...

    RBAC权限控制模型简介.docx

    - 针对特定需求,还可以选择专门的JavaScript库,如用于游戏开发的LimeJs和GameJs,或者为移动设备设计的UI库如jQuery Mobile和Sencha Touch。 综上所述,RBAC模型提供了一种高效管理用户权限的方式,而构建基于...

    百度Web App开发技术介绍_黎科峰

    2. **Sencha Touch**:这是另一个强大的框架,专注于触摸设备,提供了高性能的UI组件和数据绑定功能。 3. **PhoneGap/Cordova**:这是一套开源的移动Web App开发框架,允许开发者使用HTML5、CSS3和JavaScript编写...

Global site tag (gtag.js) - Google Analytics