在以下项目中：https://github.com/pc-magas/faster
我生成一个类似的网格：
<div ng-repeat="(i,row) in grid.value" class="row">
<div ng-repeat="(j,item) in row" class="col">
<img on-swipe-up="swipeup({{i}},{{j}})" on-swipe-down="swipeDown({{i}},{{j}})" on-swipe-left="swipeLeft({{i}},{{j}})" on-swipe-right="swipeRight({{i}},{{j}})" src="{{item.icon}}"/>
</div>
</div>
他是我控制器上的代码：
.controller('Game',function($scope,$state,$ionicModal,Game,MenuItem)
{
/*###################### Modal Area ######################*/
$ionicModal.fromTemplateUrl('gameOverModal.html',
{
scope: $scope,
animation: 'slide-in-up'
})
.then(function(modal)
{
$scope.gameOverModal = modal;
});
$scope.$on('$destroy', function()
{
$scope.gameOverModal.remove();
});
$scope.closeGameOverModal=function()
{
$scope.gameOverModal.hide();
$state.go("menu");
}
/*###############################################################*/
/*################### Controller Initialization ####################*/
var GameItem=Game.item;
var GameClass=Game.game;
/*##################### End Controller Initialization ##############*/
/**
*Function That does all the dirty job for initialization
*/
var init_game=function()
{
console.log(Game.current_game);
if(typeof Game.current_game === 'undefined' || Game.current_game === null)
{
/**
*Items for the Game
*/
var items=[
new GameItem('img/icon1.jpg','img/icon1.jpg','img/icon1.jpg','trolley'),
new GameItem('img/icon2.jpg','img/icon2.jpg','img/icon2.jpg','metro'),
new GameItem('img/icon3.jpg','img/icon3.jpg','img/icon3.jpg','bus'),
new GameItem('img/icon4.jpg','img/icon4.jpg','img/icon4.jpg','tram'),
];
/**
*Callbacks for Game
*/
var callbacks={
'pause':function(time)
{
console.log("Game Paused");
$state.go('menu');
},
'afterInit':function(game)
{
MenuItem.items.play.name_="Continue Game";
MenuItem.items.play.clickFunction=function()
{
console.log("clicked");
$state.go('game');
Game.current_game.play();//Do not comment unlsess game will not resume
};
/*Making An Option For saving*/
var saveItem=new MenuItem.MenuItem("Save Game",'regular-btn',"",false,function()
{
game.save();
});
//Add on the top an Option to save the game
MenuItem.items.others.unshift(saveItem);
console.log(MenuItem.items.others);
},
'over':function()
{
ionic.EventController.trigger('gameOver',{});
}
};
Game.current_game=new GameClass(items,60,5,5,callbacks,$scope);
Game.current_game.init();
}
else // We may need to go to another page and return Therefore we must need a way to resume
{
console.log("Here resuming the game");
Game.current_game.play();
}
$scope.timer = Game.current_game.timer;
$scope.points=Game.current_game.getScore();
$scope.grid=Game.current_game.grid;
/*Functions that do all the swipe*/
$scope.swipeup=function(i,j)
{
Game.current_game.swap(i,j,'up');
$scope.grid=Game.current_game.grid;
};
$scope.swipeDown=function(i,j)
{
Game.current_game.swap(i,j,'down');
};
$scope.swipeLeft=function(i,j)
{
Game.current_game.swap(i,j,'left');
};
$scope.swipeRight=function(i,j)
{
Game.current_game.swap(i,j,'right');
};
/*End of: "Functions that do all the swap"*/
};
ionic.EventController.on('gameOver',function()
{
console.log("GameOver Event");
MenuItem.items.play.name_="New Game";
MenuItem.items.others.shift();
Game.current_game=null;
$scope.gameOverModal.show();
});
init_game();
$scope.pause=function()
{
console.log("Pausing Game");
Game.current_game.pause();
}
});
正如您所见，交换的行是：
/*Functions that do all the swipe*/
$scope.swipeup=function(i,j)
{
Game.current_game.swap(i,j,'up');
$scope.grid=Game.current_game.grid;
};
$scope.swipeDown=function(i,j)
{
Game.current_game.swap(i,j,'down');
};
$scope.swipeLeft=function(i,j)
{
Game.current_game.swap(i,j,'left');
};
$scope.swipeRight=function(i,j)
{
Game.current_game.swap(i,j,'right');
};
/*End of: "Functions that do all the swap"*/
};
在我的服务上，执行交换的功能是：
game.swap=function(i,j,direction)
{
console.log("i: "+i,"j: "+j)
switch(direction)
{
case 'up':
if(i!==0) //Cannot swap first line elements
{
console.log("Can swap Up");
swapAction(i,j,i-1,j);
}
break;
case 'down':
if(i!==game.grid.value.length-1) //cannot swap last line elements
{
console.log("Can swap Down");
swapAction(i,j,i+1,j);
}
break;
case 'left':
if(j!==0) //Cannot swap first column elements
{
console.log("Can swap Left");
swapAction(i,j,i,j-1);
}
break;
case 'right':
if(j!==game.grid.value[i].length-1) //Cannot swap last column elements
{
console.log("Can swap Right");
swapAction(i,j,i,j+1);
}
break;
}
};
var swapAction=function(i,j,newi,newj)
{
var temp=game.grid.value[i][j];
game.grid.value[i][j]=game.grid.value[newi][newj];
game.grid.value[newi][newj]=temp;
}
正如我在几次交换后注意到的那样，交换的元素不正确。例如。如果一个元素在位置4,3并且我与位置4,4中的元素交换，那么在初始交换中但是我不能交换它。
发生这种情况是因为作为参数传递的{{i}}和{{j}}不正确。您是否知道刷卡每次都会获得正确的{{i}}和{{j}}？
我认为的一个原因是如果＆＃34;受洗＆＃34;每个元素都有一个唯一的数字，并在循环中查找每个元素的位置，但我认为这不是最好的表现 - wize。
我认为另一种解决方案是每个可交换对象都有一个swipe（）方法，但我仍然需要在网格上找到Object的坐标。同样，我不太确定它是否可能。
答案 0 :(得分：0)
最后我通过这样做解决了这个问题：
我像这样追逐GameItem：
function GameItem(icon,icon_destroyed,icon_marked,name,unique)
{
item.unique=(unique)?unique:0;//A unique number for new items
...
item.uniqueId=function()
{
return item.name+item.unique;
}
....
item.clone=function()
{
var newClone=new GameItem(item.icon,item.icon_destroyed,item.icon_marked,item.name,item.unique);
item.unique++;//After a clone refresh the unique number in order the next clones to have new name
return newClone;
}
}
现在，我在游戏服务上设置了一种新方法：
game.swapById=function(unique,direction)
{
for(var i=0;i<game.grid.value.length;i++)
{
for(var j=0;j<game.grid.value[i].length;j++)
{
var item=game.grid.value[i][j];
console.log(item.uniqueId(),unique);
if(item.uniqueId()===unique)
{
game.swap(i,j,direction);
return;
}
}
}
}
因此我寻找一个uniqie Id;）
所以我的HTML是：
<div ng-repeat="(i,row) in grid.value" class="row">
<div ng-repeat="(j,item) in row" class="col">
<img on-swipe-up="swipeup('{{item.uniqueId()}}')" on-swipe-down="swipeDown('{{item.uniqueId()}}')" on-swipe-left="swipeLeft('{{item.uniqueId()}}')" on-swipe-right="swipeRight('{{item.uniqueId()}}')" src="{{item.icon}}"/>
</div>
</div>
我从控制器调用以下方法：
$scope.swipeup=function(unique)
{
Game.current_game.swapById(unique,'up');
};
$scope.swipeDown=function(unique)
{
Game.current_game.swapById(unique,'down');
};
$scope.swipeLeft=function(unique)
{
Game.current_game.swapById(unique,'left');
};
$scope.swipeRight=function(unique)
{
Game.current_game.swapById(unique,'right');
};
我认为这是一个有用的解决方案;）