用Sencha Touch写2048游戏

最新推荐文章于 2024-07-23 10:36:46 发布
最新推荐文章于 2024-07-23 10:36:46 发布
阅读量76 收藏
点赞数
分类专栏： ExtJS JS 文章标签： ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_3843/article/details/82581739
版权
ExtJS 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
JS
4 篇文章 0 订阅
订阅专栏
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 效果：

[img]http://dl2.iteye.com/upload/attachment/0097/8129/7cdf7286-ebbe-31a7-8e1f-25f206c07db3.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0097/8131/c6bddcc7-0606-3787-be5e-6a8912919e3e.png[/img]
iteye_3843
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
sencha touch2.1简单相册(修正bug)
05-30
总的来说，"sencha touch2.1简单相册(修正bug)"项目是一个综合性的学习资源，涵盖了移动应用开发中的关键概念，包括Sencha Touch框架的使用、MVC架构的应用、路由实现、用户认证以及性能优化。通过研究这个项目，...
Sencha Touch Mobile JavaScript Framework
07-18
通过以上分析可以看出，Sencha Touch不仅在2012年时是一款极具影响力的移动Web应用开发框架，而且至今仍然具有很高的研究和使用价值。对于希望从事移动Web应用开发的技术人员来说，深入学习和掌握Sencha Touch将为其...
Sencha Touch 和 jQuery Mobile 的比较
孤竹的博客
11-16 514
英文原文：Sencha Touch vs jQuery Mobile 很多人问我Sencha Touch (百度百科Sencha Touch译者加) 和jQuery Mobile哪个更好。事实上，它两的区别就像是Web后台编程，PHP和Java。它们都能完成同样的功能，但其实它们是为不同的目的而创造的。 Sencha Touch基于web-kit浏览器并
Html5 移动应用软件开发框架 JqueryMobile SenchaTouch 介绍
dbp5156的博客
06-11 140
一、JqueryMobile 介绍 　　jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。 　　jQuery Mobile 不仅会给主流移动平台带来 jQuery 核心库，而且会发布一个完整统一的 jQuery 移动 UI 框架。 　　支持全球主流的移动平台。此框架简单 易用。页面开发主要使用标记，无需或仅需很少 JavaScript。 此框架简单易用。页...
(转)Sencha Touch和jQuery Mobile的比较
dianxinxi3996的博客
05-23 115
原文：http://extjs.org.cn/node/664 Sencha Touch和jQuery Mobile的比较 Posted 周三, 08/07/2013 - 10:07 byadmin 很多人问我Sencha Touch 和jQuery Mobile哪个更好。事实上，它两的区别就像是Web后台编程，PHP和Java。它们都能完成同样的功能，但其实它们是为...
【翻译】使用Sencha Touch开发Google Glass应用程序
黄灯桥的专栏
01-25 3684
在过去一年，可穿戴式设备可谓是蓬勃发展。通过先进的手表就可以做从应答电话到玩游戏等任何事情。谷歌认为他们的可穿戴式技术是下一项要做的重大事情，而今天，我们来看看这会如何影响到我们这些开发人员。 谷歌眼镜目前正处于预览状态，也许beta测试是一种更好的说法，还远未实现大规模使用。而这正是探讨如何使用这种技术最佳时机，这涉及能够以及如何塑造穿戴式设备的未来。谁都知道谷歌眼镜爆炸会是一个大事情，但我认为它是很安全的，这完全不同于我们现在所拥有的东西。如何去使用它，可以解决什么问题，可以让人们的生活更好、更安全和
Sencha Touch和jQuery Mobile的比较
bookzhaopin的专栏
08-21 793
第一组-行销和平台支持 　　Sencha Touch和jQuery Mobile都以HTML5框架著称。jQuery Mobile谦虚的说自己只是内建于所有流行的移动设备平台，而Sencha Touch则说自己是唯一能让为开发者在iOS，Android，BlachBerry，Windows Phone等更多的OS上开发漂亮应用的框架。老实说，这种夸大其词的广告让我失望。我还没有发现它说的
Sencha Touch2 JavaScript 移动框架（四）
最新发布
龙哥盟
07-23 871
在本章中，我们向有抱负的 Sencha Touch 开发者介绍了一些高级主题。我们首先讨论了如何创建自己的 API 以与数据库服务器进行通信。我们介绍了与服务器发送和接收数据的 REST 通信方法，并讨论了构建自己的 API 的一些选项。
jquerymobile与sencha touch两者比较
Thunderfox
08-06 149
很多人问我Sencha Touch (百度百科Sencha Touch译者加) 和jQuery Mobile哪个更好。事实上，它两的区别就像是Web后台编程，PHP和Java。它们都能完成同样的功能，但其实它们是为不同的目的而创造的。 　　Sencha Touch基于web-kit浏览器并做了优化，而jQuery Mobile适用于一般浏览器。因为Sencha Touch做了优化，很多人觉...
[Sencha Touch/ExtJS] (函数节流)阻止用户快速频繁点击，导致多次触发点击事件
小桥流水丿小溪
05-25 2660
一、前言以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。 window对象的resize、scroll事件 拖拽时的mousemove事件 射击游戏中的mousedown、keydown事件 文字输入、自动完成的keyup事件 实际上对于window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的
使用HTML5和CSS3构建基于webkit的Web-PageApp.doc
11-29
3. 使用Mobile UI库，如jquery mobile, sencha touch, iui等。 4. 使用隐藏标题栏的技巧，如addEventListener(“load”, function() { setTimeout(function (){ window.scrollTo(0,1);}, 0); }, false)。 5. 使用...
html5开发指南
09-02
2. **示例与案例分析**：通过实际的开发示例，学习如何使用Sencha Touch构建新闻阅读器、社交应用、电子商务网站等。 3. **性能优化技巧**：了解如何通过合理的架构设计和代码优化，提升Sencha Touch应用的性能。 ...
如何利用Spring的redirectStrategy进行url hash tag的重定向
Jobar's life
11-25 1570
我们都知道url的hash部分是不能传到服务器端的，例如 http://projectname/#M_FACTORY:ci,其中url里面的“#M_FACTORY:ci”是hash部分，在前台可以用location.hash取得，在传到后台的时候这部分是被忽略掉的。如果我们想实现登录后自动跳转到这个url，普通的重定向是没法实现的。 1. 配置Spring登录成功的重定向策略 主意这里不能...
在Grid上增加键盘监听事件
Jobar's life
01-08 598
1 首先定义gridview id [code="java"]viewConfig : { itemId: 'listsgridview', },[/code] 2 在Controller里面增加监听函数 [...
ExtJs4中给Grid增加右键菜单功能
Jobar's life
04-08 479
1 首先定义右键时所要显示菜单组件 [code="java"]Ext.define('Qui.view.MonitoringMenu', { extend: 'Ext.menu.Menu', alias: 'widget.MonitoringMenu', requires: [ 'Ext.menu.Item' ], in...
子panel居中小技巧
Jobar's life
06-16 446
子panel居中小技巧 [code="java"]{ xtype: 'container', layout: {//layout设置关键地方 [color=red]type: 'hbox', align: 'middle', pack: 'center'[/color] }, items: [ { xtype: 'container', i...
给ExtJs树节点添加提示
Jobar's life
01-20 357
1 给树treeview增加事件监听 [code="java"]"#filetreeview": { itemmouseenter: this.onFiletreeviewItemMouseEnter }[/code] 2 实现监听函数 [code="java"]onFiletreeviewItemMouseEnter: function(dataview, record, ite...
使用 Sencha Touch 2 构建移动应用程序实践指南
* 学会使用 Sencha Touch 2 的数据绑定和存储功能 * 掌握 Sencha Touch 2 的事件处理和动画效果 《Creating Mobile Apps with Sencha Touch 2》是一本非常实用的书籍，适合所有想学习 Sencha Touch 2 并构建移动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值