2

我正在开发一个自上而下的射击游戏，基本上角色从屏幕中间开始，在一个矩形（安全区）内。角色不是静止的，场景是静止的。他可以在安全区内四处走动。角色一走出这个区域，静态就会切换……角色是静止的，场景围绕着他移动。

唯一的问题是我不能走回安全区，让我的静力学再次切换。

所以我永远被困在这个区域之外。我所做的只是检查我的角色位置是否在某个值（即矩形）内，如果他不在 - 那么我的 KeyControls 会影响地图，而不是角色。

所以这是我的边界（安全区）检查器：

//Walking Window Boundaries
    var boundarySizeX = 400;
    var boundarySizeY = 200;

    ctxWalkBoundary.fillStyle = "grey";
    ctxWalkBoundary.fillRect(gameWidth/2 - boundarySizeX/2, gameHeight/2 - boundarySizeY/2, boundarySizeX, boundarySizeY);
    ctxWalkBoundary.clearRect((gameWidth/2 - boundarySizeX/2) + 2, (gameHeight/2 - boundarySizeY/2) + 2, (boundarySizeX) - 4, (boundarySizeY) -4 );

    var paddingLeft = (gameWidth - boundarySizeX) / 2;
    var paddingRight = gameWidth - ((gameWidth - boundarySizeX) / 2) - this.charWidth;
    var paddingTop = (gameHeight - boundarySizeY) / 2;
    var paddingBottom = gameHeight - ((gameHeight - boundarySizeY) / 2) - this.charHeight;

    var paddingY = (gameHeight - boundarySizeY) / 2;

    if(this.drawX > paddingLeft && this.drawX < paddingRight && this.drawY > paddingTop && this.drawY < paddingBottom){
        inBoundary = true;
    }
    else{
        inBoundary = false;
        console.debug("Out Of Boundary!");
    }

这是我的 KeyChecker：

//UP
    if(this.isUpKey){

        //Character movement
        if(inBoundary){
            this.drawX = this.drawX + this.speed * Math.cos((this.characterRotation));
            this.drawY = this.drawY + this.speed * Math.sin((this.characterRotation));
        }
        else{
            mapPositionX = mapPositionX - this.speed * Math.cos((this.characterRotation));
            mapPositionY = mapPositionY - this.speed * Math.sin((this.characterRotation));
        }

我的角色总是面对我的鼠标（旋转）。因此，每次用户按下 W 或 Up 时，角色总是会走向鼠标位置。

有什么想法可以让我回到该区域吗？

- - - 更新 - - -

我想我需要以某种方式检查我是否仍然面向安全区之外 - 如果不是，则反转他的静态。

4

2 回答 2

0

这里的问题是您正在等待角色越界，然后移动地图。但是旗子已经被触发了，现在无论你往哪个方向走，角色的移动都是静止的，因为你已经出界了。

您可以改为检测角色何时要越过边界并通过移动地图来阻止它：

//UP
if(this.isUpKey){

// save the x and y offset to prevent needless recalculation
var xOffset = this.speed * Math.cos(this.characterRotation),
    yOffset = this.speed * Math.sin(this.characterRotation);

    //Character movement
    if( boundaryCheck(xOffset, yOffset) ){
        this.drawX = this.drawX + xOffset;
        this.drawY = this.drawY + yOffset;
    }
    else{
        mapPositionX = mapPositionX - xOffset
        mapPositionY = mapPositionY - yOffset;
    }

然后boundaryCheck取 x 和 y 增量并确定它们是否仍在界限内。如果角色仍在边界内，return true则角色将移动，否则地图将移动。

function boundaryCheck(xOffset, yOffset){
// variables set and other stuff done...
    if(this.drawX + xOffset > paddingLeft && this.drawX + xOffset < paddingRight && this.drawY + yOffset > paddingTop && this.drawY + yOffset < paddingBottom){
       return true;
    }
    else{
        console.debug("Out Of Boundary!");
        return false;
    }

};

这样您就不必确定越界角色是否正在向边界移动。相反，你预先确定了角色的去向，并相应地进行调整，始终让他保持在边界内。

如果没有完整的代码，这当然是不可测试的，但我认为它应该适用于您提供的内容。

于 2013-01-23T00:27:41.053 回答
0

只需将两件事分开：地图和视图。

地图是您的关卡，您可以将带有坐标的对象保存在那里。视图是您在屏幕上看到的地图的一部分。View 有 4 个属性：x、y、宽度和高度，其中宽度和高度最有可能是您的画布大小。

如果您的游戏从屏幕中间的地图点 (0,0) 上的视图开始，那么您的视图 (x,y) 坐标应为 (-view.width/2, -view.height/2)。

如何在视图中绘制角色和对象？

首先，只绘制视图矩形中的东西。所以遍历所有对象并检查是否

object.x >= view.x && object.x <= view.x + view.width && object.y >= view.y && object.y <= view.y + view.height

（您可能也应该考虑对象边界）。

如果对象在视图区域中，则在 position 处绘制它(object.x - view.x, object.y - view.y)。这就是绘画的全部内容。

与他一起移动角色和视图区域。

现在当你的角色与边界碰撞时，例如（与右边界碰撞）

character.x >= view.x + view.width

然后通过将 view.x 增加一些值（可能是 character.width/2）将视图向右移动。

--更新--

我看到你没有在你的游戏中使用 OOP（实际上你是因为 JS 中的所有东西都是一个对象，但你不是故意使用它）。

JS 中的 OOP 有很多解释，所以我会尽量简短。

您可以使用 JSON 格式制作角色、地图和视图等对象。

character = {
    x: 0,
    y: 0,
    xspeed: 0,
    yspeed: 0,
    speed: 0,
    radius: 20,
}

map = {
    objects: [
        {sprite: 'tree.jpg', x: 100, y: 50},
        {sprite: 'stone.jpg', x: 20, y: 30},
    ],
}

view = {
    width: canvas.width,
    height: canvas.height,
    x: -this.width/2,
    y: -this.height/2,
}

这些是您可以在函数中使用的对象，如下所示：

for (var i=0; i++, i<map.objects.length) {
    if (map_obj.x >= view.x && map_obj.x <= view.x + view.width && map_obj.y >= view.y && map_obj.y <= view.y + view.height) {
        var map_obj = map.objects[i];
        draw_sprite(map_obj.sprite, map_obj.x - view.x, map_obj.y - view.y);
    }
}

这不是最好的方法，但它现在仍然比你的好得多。当您了解 OOP 是什么时，您会为自己做得更好。

于 2013-01-23T01:12:48.297 回答