如何按时间顺序使用Javascript代码更改图像大小

Question

我目前正在做一个小的HTML5游戏。现在，我正忙于使小型车缩小，当它到达地平线(在路上)，回到原来的大小，当它回到‘我们’。

我对javascript非常陌生，这就是我开始做这个小游戏的原因，我想有什么更好的学习方法，对吗？

这就是我所拥有的(在画布中)：

var render = function () {
    if (bgReady) {
        ctx.drawImage(bgImage, 0, 0);
    }

    if (carReady) {
        //ctx.drawImage(carImage, car.x, car.y);

         ctx.drawImage(carImage, car.x, car.y, (carImage.width /100 * 50),(carImage.height / 100 * 50));

    }
    };

我想说的是，只有当车变小的时候，尺寸才能改变。然而，我不太确定该把它放在哪里，为了不得到一个时间顺序的错误。

我想得到的是：

ctx.drawImage(carImage, car.x, car.y, (carImage.width /100 * 50),(carImage.height / 100 * 50));

if(car.y++){
car.Image.width /i * 50  && carImage.height /i * 50}

随着变量'i‘随着car.y的增加而增加。

我希望有人能指引我走向正确的方向。

迈尔

编辑

// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
    delete keysDown[e.keyCode];
}, false);

// Reset the game when the player catches a fuel
    var reset = function () {
    car.x = canvas.width / 3;
    car.y = canvas.height / 1.2;


    // Throw the fuel somewhere on the screen randomly [lengte(math random) keer breedte voor een random plaat in de oppervlakte)]
    //fuel.x = 300 + (Math.random() * (canvas.width - 700));   -old

    fuel.y = 500 + (Math.random() * (canvas.height - 550));


    //The left-most x coordinate for each y coordinate,
    //The road-width for each y coordinate.

    var left_most_x = 10 + ((500-10)/1000) * fuel.y
    var road_width = 500 - ((500-30)/1000) * fuel.y

    fuel.x = left_most_x + (Math.random() * road_width)

};

// Update game objects
var update = function (modifier) {
    if (38 in keysDown) { // Player holding up
        car.y -= car.speed * modifier;
    }
    if (40 in keysDown) { // Player holding down
        car.y += car.speed * modifier;
    }
    if (37 in keysDown) { // Player holding left
        car.x -= car.speed * modifier;
    }
    if (39 in keysDown) { // Player holding right
        car.x += car.speed * modifier;
    }

    // Are they touching?
    if (
        car.x <= (fuel.x + 32)
        && fuel.x <= (car.x + 32)
        && car.y <= (fuel.y + 32)
        && fuel.y <= (car.y + 32)
    ) {
        ++fuelsCaught;
        reset();
    }
};

Answer 1

尝试跟踪最后一个y值：

var lastY = 0;

var render = function () {

    if (bgReady) 
        ctx.drawImage(bgImage, 0, 0);    

    if (carReady) 
        ctx.drawImage(carImage, car.x, car.y, (carImage.width / 100 * 50), (carImage.height / 100 * 50));    

    var deltaY = car.y - lastY;

    carImage.width = carImage.width - deltaY;
    carImage.height = carImage.height - deltaY;

    lastY = car.y;
};