javascript - 马里奥游戏的 Typescript 相机

Question

我正在尝试制作一款用于教育目的的马里奥游戏(没有 Phaserjs 或任何其他引擎)。

我现在想做的是拥有某种可以跟随马里奥的相机。

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

我有一个像这样的 Canvas

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;

我不确定这是否是“移动”相机的正确计算。但 Visual Studio 显示属性 View 不存在。

我一直在实现相机功能。如果有人能帮助我，我将非常感激。我怀疑我还应该更改游戏循环以使相机“正常工作”

Answer 1

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

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

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

如果您打算创建 Canvas 宽度和高度的默认 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 未定义为任何事物。您可能打算设置 View 的 x 位置。如果是这种情况，给定 view 变量，您可以执行以下操作:

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