HTML5 Canvas Game Rendering Map

Question

First of all, I didn't even want to put this on here because I knew people would try to rewrite it and say "This more complicated way is way better because it saves 1 milliseconds" so please, don't rewrite it or tell me better ways to do things. I just want to know the answer to a question I've been stumped on for 3 weeks. Here is my code:

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

When I try to move the player it doesn't work. The terrain just stays in the same spot. I think the problem is with the two for loops rendering it but I really don't know. I've tried hundreds of things but none of them work. Not one. Please someone help, It's REALLY annoying me.

EDIT: The player is always supposed to stay in the same spot and the terrain moves to it gives the illusion of a camera following the player.

Answer 1

LeFex is right, but considering your comment: in your loop you draw the map to the static coordinates:

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

which should be something like

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

Also you seem to be mixing xs and ys in your movement code, beware.

Answer 2

When you draw the player, you always use the start coordinates.

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

Use x and y instead of startX and startY.

Good luck with your project!