Question

在我的暑假期间，无聊接手了，所以我决定开始学习html5游戏。在使这个非常简单的游戏在功能上更好的过程中（逻辑上，如果你愿意的话）我遇到了一个我无法弄明白的问题。我希望你能相应地指导我。

所以我有race.html（它只有Canvas在我的webbrowser中显示给游戏）我有game.js

这是一款简单的2D汽车游戏。汽车沿着道路行驶，为了不耗尽燃料，它必须尽可能多地捕获燃料箱才能获胜。

我的问题在于让“油箱图像”仅在“道路”的x和y坐标之间进行渲染和重置。目前它重置和渲染所有地方，但不是专门在汽车行驶的“道路”上。

这是我的game.js代码：

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 1024;
canvas.height = 768;
document.body.appendChild(canvas);

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
    bgReady = true;
};
bgImage.src = "img/map.png";

// car image
var carReady = false;
var carImage = new Image();
carImage.onload = function () {
    carReady = true;
};
carImage.src = "img/car.png";

// fuel image
var fuelReady = false;
var fuelImage = new Image();
fuelImage.onload = function () {
    fuelReady = true;
};
fuelImage.src = "img/fuel.jpg";

// Game objects
var car = {
    speed: 500 // movement in pixels per second
};
var fuel = {};
var fuelsCaught = 0;

// 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.3;

    // 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));
    fuel.y = 400 + (Math.random() * (canvas.height - 550));
};

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

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

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

    if (fuelReady) {
        ctx.drawImage(fuelImage, fuel.x, fuel.y);
    }

    // Score
    ctx.fillStyle = "rgb(250, 250, 250)";
    ctx.font = "14px Helvetica";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillText("Fuel Tanks caught: " + fuelsCaught + "/100", 32, 32);
};

// The main game loop
var main = function () {
    var now = Date.now();
    var delta = now - then;

    update(delta / 1000);
    render();

    then = now;

    // Request to do this again ASAP
    requestAnimationFrame(main);
};

// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

// Let's play this game!
var then = Date.now();
reset();
main();

重点在于这篇文章：

// 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));
    fuel.y = 400 + (Math.random() * (canvas.height - 550));

我经常改变300和700，以便清楚地了解相关性。但无济于事，因为重置不合逻辑。

这是道路的图片（其res为：1024x768）：

这是车：

这就是油箱：

并且race.html代码是这样的：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Race</title>
    </head>
    <body>

        <script src="js/game.js"></script>

    </body>
</html>

这个想法是在道路两侧之间和汽车正上方渲染/重置燃料箱。

Answer 1

这很有趣。所以我们先说我们从定义Y坐标开始。 Y可以位于道路的顶部和底部或画布之间（或者400，如您所示）。您的代码执行此操作：

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

道路变得越来越薄，越往右边开始，我们需要定义这是如何发生的。我们可以说，在屏幕底部，它向右10px开始，最大y，y=1000px向右开始600px。（我已经明确地提出了这些数字，你必须根据自己的情况对其进行优化）。

我们还要说屏幕底部的宽度为600px，顶部为30px。我们需要定义两个公式来描述：

每个x坐标的最左侧y坐标
每个y坐标的道路宽度。

下面：

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

然后您可以将x位置定义为：

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

HTML5游戏 - 如何使图像仅在特定的x-y坐标之间渲染？

1 个答案: