0

我正在尝试将我的工作 java Snake 游戏移植到 JavaScript，以便人们可以在我的网站上玩它。

DEMO TO GAME HERE ... 按箭头键并尝试越过精灵。

对于这条蛇，我想掌握相机的窍门……所以我实现了一个跟随蛇的相机（蛇在中间）。当相机到达“世界”边缘时，允许蛇继续前进，直到到达世界边缘。

通常，我只需通过获取x,y数组中的最后一个元素将新段附加到蛇的末尾，然后在最后一个段移动后将新段设置为那个。要将所有段作为尾部移动，我将存储预先移动的段x,y，然后将所有段设置为它之前的段。

就像是：

function getPrevCoords()  {
for (i = 1; i < players.length; i++) {
    prevX[i] = players[i-1].x;
    prevY[i] = players[i-1].y;
}   
}

function moveTail() {
//just need to move head, and set rest of player containers to the last position of head..
for (j = 1; j < players.length; j++) {
    players[j].x = prevX[j];
    players[j].y = prevY[j];
}
}

我的问题：相机并将所有物体相对于相机坐标与世界坐标相关联，这让我很失望。

为了让相机移动到世界的边缘，然后玩家继续移动，我使用以下逻辑：

    if (direction == "right") {
        if (camX < (world.w - camW) && (players[0].x == camW/2)) {
            camX+=velocity;
        }
        else {
            if (players[0].x < (camW-15)) {
                players[0].x += velocity;   
                moveTail();
            }
            else {
                console.log("HIT RIGHT WALL. GAME OVER.");
                reset();
            }
        }   
    }

这样做的问题是，当您添加一个新段时，您x,y在它们移动后将其设置为之前的段。正如您在上面看到的，当我移动相机时，我只想移动凸轮坐标并将玩家x,y设置为相机中间。我只x,y在相机到达世界边缘并且玩家需要继续移动时更改玩家的。因此，您会注意到，额外的身体部分只会在玩家x,y更新时交错排列……当凸轮移动时，玩家的x,y身体不会改变，因此所有身体部分x,y彼此相等。

关于如何解决这个问题的任何想法？

更新代码：

我已经更新为包括centerViewTo...从图片中可以看出，它只是将所有内容都放在了左上角。

function createPlayers() {
    playerBMP = new createjs.Bitmap("Images/cat_sit.png");      
    playerContainer = new createjs.Container(); 

    playerContainer.addChild(playerBMP);
    centerViewTo(stage.canvas, stage, playerContainer, {x:0, y:0, width:bg.image.width, height:bg.image.height});

    stage.addChild(playerContainer);    
}

function createNPCs() {
    npcBMP = new createjs.Bitmap("Images/myBmp.png");
    npcBMP2 = new createjs.Bitmap("Images/myBmp.png");

    npcContainer = new createjs.Container();
    npcContainer2 = new createjs.Container();   

    npcContainer.addChild(npcBMP);
    npcContainer2.addChild(npcBMP2);

    centerViewTo(stage.canvas, stage, npcContainer, {x:0, y:0, width:bg.image.width, height:bg.image.height});
    centerViewTo(stage.canvas, stage, npcContainer2, {x:0, y:0, width:bg.image.width, height:bg.image.height});

    stage.addChild(npcContainer);
    stage.addChild(npcContainer2);
}

在此处输入图像描述

4

1 回答 1

1

我为你感到有点抱歉，你投入了这么多精力来尝试制作“相机”（但从积极的方面来说，我猜你确实学到了很多东西）

所以，基本上：你不需要任何cam-variables ( camX, camY, ect...)

这是一个小方法，我总是用它来使舞台中的物体居中：（解释它的工作原理可以在下面找到）

function centerViewTo(viewPort,container,object,bounds) {
    var containerPosition = object.localToLocal(0,0,container),
        pw = viewPort.width || 0,
        ph = viewPort.height || 0;

    if ( bounds ) {
        var minX = bounds.x + pw / 2,
            maxX = bounds.x + bounds.width - pw / 2,
            minY = bounds.y + ph / 2,
            maxY = bounds.y + bounds.height - ph / 2;
        containerPosition.x = Math.max(minX, Math.min(containerPosition.x, maxX));
        containerPosition.y = Math.max(minY, Math.min(containerPosition.y, maxY));
    }

    container.regX = containerPosition.x;
    container.regY = containerPosition.y;
    container.x = pw / 2;
    container.y = ph / 2;
}

该方法的作用是将位置container（最有可能是舞台）置于object相对于视口（最有可能是画布）的位置 - 所以viewPort通常是canvas并且container通常是stage-非常我很少遇到其他情况。

在您的情况下，您可以按如下方式使用它： centerViewTo(stage.canvas,stage,playerBMP,{x:0,y:0,width:bg.image.width,height:bg.image.height});

但是您必须对您的代码进行一些更改：所有容器和对象的位置都应该基于 0，例如，您的 bg 应该位于 (0|0)，您的 playerContainer 应该位于 (0|0)。

这种方法的另一个好处是，您可以随时旋转舞台，它会自动围绕当前居中的对象旋转，与缩放相同。

我希望这确实对您有所帮助，而不是让您感到困惑；）

*编辑：我添加了一个图形，希望有助于可视化该方法的作用。该方法不会为您更改任何位置或放置任何对象，除了容纳对象的容器（在最简单的情况下是舞台）的位置。

在此处输入图像描述

于 2013-08-13T10:35:33.163 回答