Question

我想将旧的动作游戏转换为HTML5。我喜欢AS3为您提供的方法，因为您在画布上绘制的每个元素都是一个对象，您可以对其进行操作，例如执行动作和动画。

Straight canvas似乎没有给你这种能力，但我希望有一个框架可以抽象出HTML5画布，并赋予它额外的力量。

Answer 1

您可以创建构造函数来构造您需要创建的元素，并且可以在构造函数中创建操作方法，这样您就可以根据元素及其操作获得各种可能性。

Ball构造函数的示例：

// Ball constructor
var Ball = function(x, y) {
    this.x = x;
    this.y = y;

    this.radius = 10;
    this.color = '#fff';

    // Direction and min, max x,y
    this.dX = 15;
    this.dY = -15;

    this.minX = this.minY = 20 + this.radius;
    this.maxX = this.radius - (canvasWidth - 20);
    this.maxY = this.radius + canvasHeight;

    this.draw = function(ctx) {
        ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, twoPI, true);
        ctx.closePath();
        ctx.save();
            ctx.fillStyle = this.color;
            ctx.fill();
        ctx.restore();
    };
};

使用它像：

// CREATE THE BALL
ball = new Ball(centerX, canvasHeight - paddle.height - 30);
ball.draw(ctx);

HTML5画布元素作为对象

1 个答案: