- 浏览: 346914 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hanmiao:
如果接口里的方法声明会抛出某些异常,那么在使用lambda 表 ...
Java8中Lambda表达式的10个例子 -
彭成林:
我试了一下,,虽然配置这个插件简单,,但是验证码的效果真是不咋 ...
一个Struts2验证码生成插件JCaptcha4Struts2的使用经历 -
桃汁天天:
非常感谢 为我们剩下了许多研究时间
ExtJs中根据后台数据动态创建表格列及其数据 -
jobar:
mistake 写道var resultSetId = typ ...
ExtJs中根据后台数据动态创建表格列及其数据 -
mistake:
var resultSetId = type === 'con ...
ExtJs中根据后台数据动态创建表格列及其数据
1 UI部分
2 控制器
3 application
4 效果:
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 效果:
评论
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; },
发表评论
-
用nodejs和IgniteUI监控cpu和内存变化
2015-06-15 17:05 3744css代码 #chart { width: 7 ... -
构建自定义ExtJs时间日期组件
2014-06-18 18:00 1088构建自定义ExtJs时间日期组件 1 代码 Ext.defin ... -
ExtJs强制re-render整个grid
2014-06-17 12:01 3005ExtJs强制re-render整个grid 有时候我们在gr ... -
子panel居中小技巧
2014-06-16 11:19 685子panel居中小技巧 { xtype: 'contain ... -
集成bootstrap-datetimepicker插件到ExtJs中
2014-06-11 10:49 1456系统有一个需求:查询 ... -
ExtJs下拉菜单对齐
2014-04-24 14:39 752ExtJs下拉菜单对齐 通过设置plain:true可以将下 ... -
在JavaScript中测试代码执行时间
2014-04-24 13:25 722可以用console.time以及console.timeEn ... -
ExtJs4中给Grid增加右键菜单功能
2014-04-08 17:32 13461 首先定义右键时所要显示菜单组件 Ext.define('Q ... -
ExtJs4实现CheckBox Tree以及文件预览功能
2014-04-04 16:28 1669需求: 服务器上有一个文件夹(根文件夹),其下面有可能是文件也 ... -
encodeURIComponent() 与 encodeURI()的区别
2014-03-13 21:29 794项目中用到了这两个js原生态的方法,查了些资料,做个笔记: ... -
ExtJs中根据后台数据动态创建表格列及其数据
2014-02-18 16:57 10799renderDynamicTable: functio ... -
给ExtJs树节点添加提示
2014-01-20 17:48 27311 给树treeview增加事件监听 "#filet ... -
在TreeGrid上增加键盘监听事件
2014-01-15 16:12 13731 首先定义gridview id viewConfig: { ... -
在Grid上增加键盘监听事件
2014-01-08 14:31 25291 首先定义gridview id viewConfig : ... -
自定义最大化最小化ExtJs插件
2013-11-25 14:41 4767由于ExtJs的panle组件本身是不可以处理最大化最小化事件 ... -
如何利用Spring的redirectStrategy进行url hash tag的重定向
2013-11-25 13:55 8548我们都知道url的hash部分是不能传到服务器端的,例如 ht ... -
在ExtJS中给表格中某列的行值添加tool-tips
2013-01-15 16:22 1349{ ...
相关推荐
通过以上分析可以看出,Sencha Touch不仅在2012年时是一款极具影响力的移动Web应用开发框架,而且至今仍然具有很高的研究和使用价值。对于希望从事移动Web应用开发的技术人员来说,深入学习和掌握Sencha Touch将为其...
总的来说,"sencha touch2.1简单相册(修正bug)"项目是一个综合性的学习资源,涵盖了移动应用开发中的关键概念,包括Sencha Touch框架的使用、MVC架构的应用、路由实现、用户认证以及性能优化。通过研究这个项目,...
2. **示例与案例分析**:通过实际的开发示例,学习如何使用Sencha Touch构建新闻阅读器、社交应用、电子商务网站等。 3. **性能优化技巧**:了解如何通过合理的架构设计和代码优化,提升Sencha Touch应用的性能。 ...
例如,如果希望使用Web技术跨平台开发,PhoneGap和Sencha Touch可能是不错的选择;而如果团队熟悉C#,则Xamarin可能更合适。对于追求高效简洁的开发流程,Basic4Android可能是一个理想选择。理解并熟练掌握这些框架...
sencha touch作为移动客户端服务器:用于网络服务的sinatra bdd:含SeleniumCucumberTDD:茉莉花单元测试和Ruby迷你测试服务器设置 $ bundle install$ rake db:create_indexes[production]服务器API 通过发送有效的...
3. 使用Mobile UI库,如jquery mobile, sencha touch, iui等。 4. 使用隐藏标题栏的技巧,如addEventListener(“load”, function() { setTimeout(function (){ window.scrollTo(0,1);}, 0); }, false)。 5. 使用...
JO框架能构建类似本地应用的程序,LimeJS专注于游戏开发,而SenchaTouch则是第一应用HTML5开发的框架体系,支持利用Javascript和CSS3构建APP程序,并使其运行效果接近本地应用。 HTML5在移动互联网开发中的应用体现...
- **Sencha Touch**: `http://www.sencha.com/products/touch` 和 `http://framework.joshfire.com/` 以及其他框架如 `http://the-m-project.net/` 和 `http://joapp.com/`,都提供了丰富的UI组件和模板,加速移动...
这包括对各种 Web 前端框架如 jQuerymobile、Sencha Touch 和 PhoneGap 的应用,以及 Cocos2d-HTML 游戏引擎的使用,这些都极大地拓宽了学员的技能范围。 总的来说,WWRH 培训通过全面覆盖 HTML5、CSS3 和 ...
这个插件可以轻松地将您的 PhoneGap CLI、PhoneGap Build、Cordova 或 Sencha Touch 应用程序或游戏与 GameThrive 集成。 支持 Android、iOS 和亚马逊的 Fire OS 平台。 有关设置文档,请参阅 。
实训项目可能涵盖各种Web前端框架,如JQuerymobile、Sencha Touch和PhoneGap,以及Cocos2d-HTML这样的游戏引擎,这不仅锻炼了开发技能,也为未来的职业发展打下了坚实基础。 总的来说,这个培训深入浅出地介绍了...
- 针对特定需求,还可以选择专门的JavaScript库,如用于游戏开发的LimeJs和GameJs,或者为移动设备设计的UI库如jQuery Mobile和Sencha Touch。 综上所述,RBAC模型提供了一种高效管理用户权限的方式,而构建基于...
2. **Sencha Touch**:这是另一个强大的框架,专注于触摸设备,提供了高性能的UI组件和数据绑定功能。 3. **PhoneGap/Cordova**:这是一套开源的移动Web App开发框架,允许开发者使用HTML5、CSS3和JavaScript编写...