HTML5画布游戏渲染地图

Question

首先，我本来并不想把这个放在这里，因为我知道人们会试图重写它并说“这种更复杂的方式更好，因为它可以节省1毫秒”，所以请不要重写它或告诉我更好的方法。我只想知道一个问题的答案，这个问题困扰了我3周。以下是我的代码：

var usr = prompt("Please enter your username");

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Player images
var characterRight = new Image();
characterRight.src = "player-right.png";
var characterLeft = new Image();
characterLeft.src = "player-left.png";
var characterUp = new Image();
characterUp.src = "player-up.png";
var characterDown = new Image();
characterDown.src = "player-down.png";

// Tile images
var grass = new Image();
grass.src = "grass.png";
var dirt = new Image();
dirt.src = "dirt.png";

// Defines the player object
var player = {
    startX: canvas.width / 2 - 15,
    startY: canvas.height / 2 - 15,
    x: 0,
    y: 0,
    width: 30,
    height: 30,
    pic: characterDown,
    username: usr
};



// Defines the frame function
function frame() {
    // Clears the screen
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draws the terrain
    var map = [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    ];
    // Here is where the problem is
    for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[i].length; j++) {
            if (map[i][j] === 1) ctx.drawImage(grass, j * 30, i * 30, 30, 30);
            if (map[i][j] === 2) ctx.drawImage(dirt, j * 30, i * 30, 30, 30);
        }
    }

    // Draws the username
    ctx.fillStyle = "white";
    ctx.strokeStyle = "red";
    ctx.lineWidth = 3;
    ctx.textAlign = "center";
    ctx.font = "12px Verdana";
    ctx.strokeText(player.username, player.startX + 15, player.startY - 5);
    ctx.fillText(player.username, player.startX + 15, player.startY - 5);

    // Draws the player
    ctx.drawImage(player.pic, player.startX, player.startY, player.width, player.height);

    // Controls the input
    document.onkeydown = function(e) {
        switch (e.keyCode) {
            case 13: // Enter
                chat();
                break;
            case 65:
            case 37: // Left
                player.x += 10;
                player.pic = characterLeft;
                break;
            case 87:
            case 38: // Up
                player.x -= 10;
                player.pic = characterUp;
                break;
            case 68:
            case 39: // Right
                player.y += 10;
                player.pic = characterRight;
                break;
            case 83:
            case 40: // Down
                player.y -= 10;
                player.pic = characterDown;
                break;
        }
    };

    // Sets boundaries
    if (player.x >= 395.5) player.x -= 10;
    if (player.x <= -204.5) player.x += 10;
    if (player.y >= 342.5) player.y -= 10;
    if (player.y <= -267.5) player.y += 10;

    // Prints the players x and y coords
    console.log("X: " + player.x);
    console.log("Y: " + player.y);
}

function chat() {
    var input = document.getElementById("input");
    var output = document.getElementById("output");

    output.innerHTML += input.value + "<br>";
    var cmd = input.value.split(" ");
    if (cmd[0] == "hi") output.innerHTML += "hello" + "<br>";
    if (cmd[0] == "/loc") output.innerHTML += "X: " + player.x + "<br>" + "Y: " + player.y + "<br>";
    if (cmd[0] == "/tp") {
        output.innerHTML += "Teleported to " + cmd[1] + ", " + cmd[2] + "<br>";
        player.x = cmd[1];
        player.y = cmd[2];
    }

    input.value = "";
}

// Game loop
setInterval(function() {frame()}, 16);

当我试图移动玩家时，它不起作用。 地形仍然停留在原地。 我认为问题出在两个for循环上，但我真的不知道。 我尝试了数百种方法，但没有一种方法有效。没有一种。 请有人帮忙，这让我非常恼火。

编辑： 玩家始终应该保持在同一位置，地形移动以产生摄像机跟随玩家的幻觉。

- Prince

Answer 1

LeFex是正确的，但考虑到您的评论：在循环中，您将地图绘制到静态坐标上。

 // Here is where the problem is
    for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[i].length; j++) {
            if (map[i][j] === 1) ctx.drawImage(grass, j * 30, i * 30, 30, 30);
            if (map[i][j] === 2) ctx.drawImage(dirt, j * 30, i * 30, 30, 30);
        }
    }

应该是类似于以下内容：

float x = player.x;
float y = player.y;

 // Here is where the problem is
    for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[i].length; j++) {
            if (map[i][j] === 1) ctx.drawImage(grass, j * 30 - x, i * 30 - y, 30, 30);
            if (map[i][j] === 2) ctx.drawImage(dirt, j * 30 - x, i * 30 - y, 30, 30);
        }
    }

您的移动代码中似乎混淆了x和y，请注意。

- noncom

Answer 2

当您绘制玩家时，始终使用起始坐标。

ctx.drawImage(player.pic, player.startX, player.startY, player.width, player.height);

使用x和y代替startX和startY。

祝您项目顺利！

- LeFex

---

谢谢，我忘了说我是要一种玩家始终位于中心，地形相应滚动的类型。 - Prince