HTML5 Canvas游戏渲染图

首先，我什至不想放在这里，因为我知道人们会尝试重写它，并说“这种更复杂的方法会更好，因为它可以节省1毫秒”，所以请不要重写或告诉它我做事的更好方法。我只想知道我被困扰了三个星期的问题的答案。这是我的代码：

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循环渲染它，但我真的不知道。我已经尝试了数百种方法，但是都没有用。不是一个。请有人帮忙，这真让我讨厌。

编辑：玩家总是应该停留在同一地点，并且地形向其移动会给摄像机带来跟随玩家的错觉。