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

Question

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

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

所以我永远被困在区域之外。我所做的只是检查我的 Angular 色位置是否在某个值(即矩形)内，如果他不在 - 然后我的 KeyControls 会影响 map ，而不是 Angular 色。

所以这是我的边界(安全区)检查器:

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

我的 Angular 色总是面对我的鼠标(旋转)。所以每次用户按下 W 或 Up - Angular 色总是会走向鼠标位置。

有什么办法可以让我回到状态吗？

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

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

Answer 1

只需分开两件事: map 和 View 。

map 是你的关卡，你在那里保存带有坐标的对象。 View 是您在屏幕上看到的 map 的一部分。 View 有 4 个属性:x、y、宽度和高度，其中宽度和高度最有可能是您的 Canvas 大小。

如果您的游戏从屏幕中间的 map 点 (0,0) 开始，那么您的 View (x,y) 坐标应该是 (-view.width/2, -view.height/2)。

如何在 View 中绘制 Angular 色和对象？

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

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

(您可能也应该考虑对象边界)。

如果对象在 View 区域中，则将其绘制在位置(object.x - view.x, object.y - view.y)。 这就是画画的全部内容。

和他一起移动 Angular 色和视野。

现在当你的 Angular 色与边界发生碰撞时，例如(与右边界发生碰撞)

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

然后通过将 view.x 增加一些值(可能是 character.width/2)来将 View 向右移动。

-- 更新 --

我看到你没有在你的游戏中使用 OOP(实际上你是因为 JS 中的一切都是对象，但你不是故意使用它)。

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

您可以使用 JSON 格式制作 Angular 色、 map 和 View 等对象。

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 是什么时，您将使其变得更适合您自己。