簡體   English   中英

HTML5 Canvas游戲渲染地圖

[英]HTML5 Canvas Game Rendering Map

首先,我甚至不想把它放在這里,因為我知道人們會嘗試重寫它並說“這種更復雜的方式更好,因為它節省了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循環呈現它但我真的不知道。 我已經嘗試過數百種東西,但沒有一種能夠起作用。 不是一個。 請有人幫忙,真的很討厭我。

編輯:玩家總是應該留在同一個地方並且地形移動到它會給玩家跟隨玩家的幻覺。

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,請注意。

繪制播放器時,始終使用起始坐標。

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

使用x和y代替startX和startY。

祝你的項目好運!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM