javascript - HTML5游戏-行走边界问题

我在做一个自上而下的射手，基本上角色从屏幕中间开始，在一个矩形（安全区域）内。角色不是静止的，场景是。他可以在安全区内走动。角色一走出这个区域，静力学就会转换。。。角色是静态的，场景在他周围移动。
唯一的问题是我不能回到安全区，让我的静力学再次转换。
所以我永远被困在禁区之外。我所做的就是检查我的角色位置是否在某个值（即rect）内，如果他不在，那么我的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!");
    }

这是我的钥匙检查器：

//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个属性：x、y、widht和height，其中widht和height最有可能是您的画布大小。
如果游戏从屏幕中间的地图点（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

然后用一些值（可能是character.width/2）递增view.x，将view向右移动。
--更新--
我看到你在游戏中没有使用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是什么的时候，你会让它对你自己更好。

View

javascript - HTML5游戏-行走边界问题