jobar
- 浏览: 347340 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
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 1090构建自定义ExtJs时间日期组件 1 代码 Ext.defin ... -
ExtJs强制re-render整个grid
2014-06-17 12:01 3010ExtJs强制re-render整个grid 有时候我们在gr ... -
子panel居中小技巧
2014-06-16 11:19 686子panel居中小技巧 { xtype: 'contain ... -
集成bootstrap-datetimepicker插件到ExtJs中
2014-06-11 10:49 1459系统有一个需求：查询 ... -
ExtJs下拉菜单对齐
2014-04-24 14:39 757ExtJs下拉菜单对齐 通过设置plain:true可以将下 ... -
在JavaScript中测试代码执行时间
2014-04-24 13:25 722可以用console.time以及console.timeEn ... -
ExtJs4中给Grid增加右键菜单功能
2014-04-08 17:32 13481 首先定义右键时所要显示菜单组件 Ext.define('Q ... -
ExtJs4实现CheckBox Tree以及文件预览功能
2014-04-04 16:28 1672需求： 服务器上有一个文件夹（根文件夹），其下面有可能是文件也 ... -
encodeURIComponent() 与 encodeURI()的区别
2014-03-13 21:29 795项目中用到了这两个js原生态的方法，查了些资料，做个笔记： ... -
ExtJs中根据后台数据动态创建表格列及其数据
2014-02-18 16:57 10803renderDynamicTable: functio ... -
给ExtJs树节点添加提示
2014-01-20 17:48 27331 给树treeview增加事件监听 "#filet ... -
在TreeGrid上增加键盘监听事件
2014-01-15 16:12 13751 首先定义gridview id viewConfig: { ... -
在Grid上增加键盘监听事件
2014-01-08 14:31 25311 首先定义gridview id viewConfig : ... -
自定义最大化最小化ExtJs插件
2013-11-25 14:41 4770由于ExtJs的panle组件本身是不可以处理最大化最小化事件 ... -
如何利用Spring的redirectStrategy进行url hash tag的重定向
2013-11-25 13:55 8550我们都知道url的hash部分是不能传到服务器端的，例如 ht ... -
在ExtJS中给表格中某列的行值添加tool-tips
2013-01-15 16:22 1353{ ...
相关推荐
通过以上分析可以看出，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编写...