Question

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

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

对于这个Snake，我想得到摄像头......所以我实现了跟随蛇的摄像头（蛇在中间）。当摄像机到达“世界”的边缘时，允许蛇继续前进直到它到达世界边缘。

通常，我只需通过获取数组中的最后一个元素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);
}

enter image description here

Answer 1

我为你感到有点遗憾，你已经投入了大量精力去制作一个“相机”（但从积极的一面来看，你确实学到了很多东西）

所以，基本上：你不需要任何cam - 变量（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）。

此方法的另一个积极方面是，您可以随时旋转舞台，它将自动围绕当前居中的对象旋转，与缩放相同。

我希望这对你有所帮助，而不是让你感到困惑;）

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

enter image description here

蛇身体部分没有正确附加蛇

1 个答案: