HTML5 游戏 - 行走边界问题

Question

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

唯一的问题是我无法回到安全区，让我的静态再次切换。

所以我永远被困在这个区域之外。我所做的只是检查我的角色位置是否在某个值（即矩形）内，如果他不在 - 那么我的 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 时，角色总是会走向鼠标位置。

有什么办法可以让我回到这个区域吗？

----- 更新-----

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

Answer 1

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

地图是您的关卡，您可以在其中保存带有坐标的对象。 视图是您在屏幕上看到的地图的一部分。 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

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

如果对象在视图区域中，则将其绘制在位置(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 是什么时，您自己就会变得更好。

Answer 2

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

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

//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;
    }

};

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

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