jobar
- 浏览: 340924 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
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 3707css代码 #chart { width: 7 ... -
构建自定义ExtJs时间日期组件
2014-06-18 18:00 1044构建自定义ExtJs时间日期组件 1 代码 Ext.defin ... -
ExtJs强制re-render整个grid
2014-06-17 12:01 2957ExtJs强制re-render整个grid 有时候我们在gr ... -
子panel居中小技巧
2014-06-16 11:19 651子panel居中小技巧 { xtype: 'contain ... -
集成bootstrap-datetimepicker插件到ExtJs中
2014-06-11 10:49 1427系统有一个需求：查询 ... -
ExtJs下拉菜单对齐
2014-04-24 14:39 695ExtJs下拉菜单对齐 通过设置plain:true可以将下 ... -
在JavaScript中测试代码执行时间
2014-04-24 13:25 664可以用console.time以及console.timeEn ... -
ExtJs4中给Grid增加右键菜单功能
2014-04-08 17:32 13061 首先定义右键时所要显示菜单组件 Ext.define('Q ... -
ExtJs4实现CheckBox Tree以及文件预览功能
2014-04-04 16:28 1641需求： 服务器上有一个文件夹（根文件夹），其下面有可能是文件也 ... -
encodeURIComponent() 与 encodeURI()的区别
2014-03-13 21:29 758项目中用到了这两个js原生态的方法，查了些资料，做个笔记： ... -
ExtJs中根据后台数据动态创建表格列及其数据
2014-02-18 16:57 10746renderDynamicTable: functio ... -
给ExtJs树节点添加提示
2014-01-20 17:48 27001 给树treeview增加事件监听 "#filet ... -
在TreeGrid上增加键盘监听事件
2014-01-15 16:12 13321 首先定义gridview id viewConfig: { ... -
在Grid上增加键盘监听事件
2014-01-08 14:31 25011 首先定义gridview id viewConfig : ... -
自定义最大化最小化ExtJs插件
2013-11-25 14:41 4732由于ExtJs的panle组件本身是不可以处理最大化最小化事件 ... -
如何利用Spring的redirectStrategy进行url hash tag的重定向
2013-11-25 13:55 8478我们都知道url的hash部分是不能传到服务器端的，例如 ht ... -
在ExtJS中给表格中某列的行值添加tool-tips
2013-01-15 16:22 1282{ ...
相关推荐
本文通过对 Sencha Touch 框架的介绍，使读者对该框架有一定的了解，并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...
sencha touch 折叠list
sencha touch 应用案例 sencha touch 案例 一个完整的sencha touch 应用案例 移动WEB社区开发的日志案例 非常不错！
Sencha Touch开发的项目《般若人生》源码
sencha touch中文翻译文档，包含sencha touch入门基础和一些控件的使用说明
sencha touch 2.4.0最新版 原版包下载
sencha touch list demo
MAC OS 下sencha touch +cordova 开发环境配置。可以将H5 hybird 应用打包成IOS 应用。
Sencha Touch 2入门教程之MVC 讲解如何使用 Sencha Touch 2 mvc模式来开发一个登录界面
sencha touch 是一个移动平台UI开发框架，可以实现各种绚丽的页面效果
这是我做的一个sencha touch 的项目，测试并能运行，希望对大家有帮助
sencha touch cookbook 英文高清文字版 ！
sencha touch grid
sencha touch sdk工具
Sencha Touch是专门用于移动...使用Sencha Touch，开发者可以构建在iPhone、Android和BlackBerry touch等设备上运行的移动web应用，其效果看起来如同本地应用。目前Sencha Touch已经成为构建移动HTML5应用的领先框架。
《Sencha Touch 权威指南》陆凌牛著的源码包
sencha touch 2 实现的贪吃蛇 希望对大家有所帮助
sencha touch2移动开发框架，ajax获取数据