Question

我正在尝试制作用于教育目的的马里奥游戏（没有phaserjs或任何其他引擎）。

我现在基本上想要做的是拥有一些跟随马里奥的相机。

此时马里奥可以单向行走并从屏幕上消失。我正在寻找一种方法来实现跟随马里奥的某种相机。

我的画布看起来像这样

var w = 720, h = 480;

var canvas: HTMLCanvasElement;
var ctx: CanvasRenderingContext2D; 
var downForce = 2;

HTML

<canvas id="canvas" width="720" height="480" style="border:1px solid #c3c3c3;"></canvas>

我的GameLoop目前看起来像这样。

    function gameLoop() {

    requestAnimationFrame(gameLoop);
    ctx.clearRect(0, 0, w, h);
    ctx.fillStyle = "rgb(174,238,238)";
    ctx.fillRect(0, 0, w, h);
    ctx.fillStyle = "rgb(14,253,1)";
    var floor = ctx.fillRect(0, h - 45, w, 45);
    mario.drawSprite();
    pipe.drawSprite();
    mario.addGravity();
}

我制作了一个Camera.ts文件

    class Camera {

    x: number;
    y: number;
    width: number;
    height: number;

    constructor(){}

    View(input: any):any {
        this.x = 0;
        this.y = 0;
        this.width = canvas.width;
        this.height = canvas.height;
    }
}

如果我是正确的，相机应该与正在运行的马里奥一起移动。看起来像这样

function keyboardInput(event: KeyboardEvent) {


switch (event.keyCode) {
    case 65: case 37: //a
        mario.setSpriteUrl("graphics/mario/small/Running-mario-left.gif");
        mario.numberOfFrames = 4;
        mario.position.x -= 10;

        Camera.View = Math.floor(mario.position.x + (mario.frameWidth/2) - (Camera.prototype.View.width / 2))
        break;

我不确定这是否是正确的计算以便移动＆＃39;相机。但Visual Studio显示属性视图不会激发。

我坚持使用相机功能。如果somone可以帮助我，我将非常感激。我怀疑我也应该改变游戏循环以使相机工作＆＃39;

Answer 1

表达式Camera.prototype.View.width没有意义，因为View是Camera的方法。换句话说，以下代码编译：

var c = new Camera();
c.View(null);

鉴于这个错误，您似乎对类和实例以及方法感到困惑，您应该了解类在TypeScript here中的工作方式。如果您想要Camera.View，您应该从文章中了解静态属性。

如果您打算创建画布宽度和高度的默认视图，则应执行以下操作：

var view = new Camera();
view.x = 0; view.y = 0;
view.width = canvas.width; view.height = canvas.height;

但是，代码Camera.View = Math.floor(...)完全没有意义，因为Camera.View未定义为任何内容。您可能打算设置视图的x位置。如果是这种情况，给定view变量，您可以执行以下操作：

view.x = Math.floor(mario.position.x + (mario.frameWidth/2) - (view.width / 2));

用于马里奥游戏的打字稿相机

1 个答案: