数组跳过对方 - 基于平铺的算法游戏

Question

我在游戏中遇到困难我试图使用Javascript进行编程，如下所示：

var Game = {
stage: new createjs.Stage($("#stage")),
tileSrcs : ["img/green-mushroom.png" , "img/red-mushroom.png" , "img/blue-mushroom.png"],
tiles : [],
level : [1,1,1,0,2,2,2],
winState: [2,2,2,0,1,1,1],

我希望你能够得到这个，所以当用户将所有蓝色蘑菇放到左侧并且红色蘑菇位于右侧时，游戏结束。

1 1 1 0 2 2 2 - > Starting point
1 1 0 1 2 2 2 - > Red mushroom moves one to the right
1 1 2 1 0 2 2 - > Blue can then jump over red and land on the other side of it.

到目前为止我的代码看起来像这样：

Game.Tile = function (myX, myY, myType) {
var my = new createjs.Bitmap(Game.tileSrcs[myType]);
my.type = myType;
my.posX = myX;
my.posY = myY;

my.update = function () {
    my.image.src = Game.tileSrcs[my.type];
};

my.addEventListener("mousedown", function () {
    var nextX;
    if (my.type === 1) {
        my.type = 0;
        nextX = my.posX + 1;
        Game.tiles[nextX].type = 1;
    }   else if (my.type === 2){
        my.type = 0;
        nextX = my.posX - 1;
        Game.tiles[nextX].type = 2;}
    Game.update();
});
return my;
};

我把游戏放在一个免费的网络主机上，这样你就可以看到我目前正在处理的问题。蓝色朝向正确的方向，但它们没有跳过红色，它们更多地覆盖它们，当它们向右移动时，红色蘑菇也是如此。

我希望我已经足够彻底，如果没有，请告诉我。

该网站是： http://smallisax.net16.net/MovingMushrooms/index.html

（如果最初没有显示任何内容，您可能需要刷新一次页面）

非常感谢，