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

Question

我目前正在开发一款小型 HTML5 游戏。现在我正忙着让小汽车在到达地平线(在路上)时缩小尺寸，并在它驶回“我们”时恢复到原始尺寸。

我对 javascript 还很陌生，这就是我开始制作这个小游戏的原因，我想还有什么更好的学习方法，对吧？

这就是我所拥有的(在 Canvas 内):

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));

    }
    };

我想说的是，只有当 car.y 变小时才应该改变大小。但是我不太确定将其放置在哪里，以免出现时间顺序错误。

我想要得到的是:

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}

With the variable 'i' increasing as car.y increases.

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

米尔

编辑:

// 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;
};