Падающая карта с прямоугольником на холсте js vanilla - PullRequest
Новая
       76

Падающая карта с прямоугольником на холсте js vanilla

0 голосов
/ 30 октября 2019

Я хочу сделать прямоугольник с фоновым изображением с гравитацией, но я не могу. Я новичок в мире холста js. Как я могу преобразовать компонент холста в прямоугольник холста с такими же функциями, как это: 

    var img;

function startFall() {
    img = new component(270,520, "Trasera.png", 80, 75, "image");
    fall.start();
}

var fall = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 1000;
        this.canvas.height = 1000;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateFallArea, 20);
    },
    stop : function() {
        clearInterval(this.interval);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.speedX = 0;
    this.speedY = 0;
    this.gravity = 0.03;
    this.gravitySpeed = 0;
    this.update = function() {
        ctx = fall.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = fall.canvas.height - this.height;
        if (this.y > rockbottom) {
            this.y = rockbottom;
        }
    }
}

function updateFallArea() {
    fall.clear();
    img.newPos();
    img.update();
}

Некоторые примеры, которые я взял из интернета, такие:

https://www.w3schools.com/graphics/tryit.asp?filename=trygame_gravity_bottom

...