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循环呈现它但我真的不知道。我已经尝试过数百种东西，但没有一种能够起作用。不是一个。请有人帮忙，这真让我烦恼。

编辑：玩家总是应该留在同一个地方并且地形移动到它会给玩家跟随玩家的幻觉。

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

此外，您似乎在移动代码中混合xs和ys，请注意。

Answer 2

绘制播放器时，始终使用起始坐标。

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

使用x和y代替startX和startY。

祝你的项目好运！

HTML5 Canvas游戏渲染地图

2 个答案: