Javascript 为什么每次我的精灵移动时我的地图都消失了？_Javascript_Html_Canvas

Javascript 为什么每次我的精灵移动时我的地图都消失了？

javascript html canvas

Javascript 为什么每次我的精灵移动时我的地图都消失了？,javascript,html,canvas,Javascript,Html,Canvas,这周末我想打我的第一场比赛。我终于让我的矩形与我的地图同时出现。我的矩形可以移动！但只要我点击一个按钮移动它，地图就会消失。这是不是我需要做一些游戏循环来不断更新地图上的每一个按钮点击或设置一个定时器呢？还是我有其他的错误？谢谢大家 var canvas = <HTMLCanvasElement>document.getElementById('myCanvas'); var context = canvas.getContext("2d"); var img = new Im

这周末我想打我的第一场比赛。我终于让我的矩形与我的地图同时出现。我的矩形可以移动！但只要我点击一个按钮移动它，地图就会消失。这是不是我需要做一些游戏循环来不断更新地图上的每一个按钮点击或设置一个定时器呢？还是我有其他的错误？谢谢大家

   var canvas = <HTMLCanvasElement>document.getElementById('myCanvas');
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
    context.drawImage(img, 0, 0);
}
img.src = "";



var mapArray =
       ["############################",
        "#      #    #      o      ##",
        "#                          #",
        "#   ####   #####    ##     #",
        "##         #   #    ##     #",
        "###           ##     #     #",
        "#           ###      #     #",
        "#   ####          ###      #",
        "#   ##    #  o             #",
        "# o  #    #    o ###   ### #",
        "#    #    #                #",
        "############################"];

//need to add wall.scource =  and grass.source =
var wall = new Image();
var grass = new Image();
grass.src = "http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_(Tile).gif/revision/latest?cb=20080817072800&path-prefix=en";
wall.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJyofLT0tMSw3QTo6LC87RD84Nzc5OjcBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIACAAIAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAACAwQFAP/EACkQAAEDAwIDCQEAAAAAAAAAAAECAxEABCESEyMxURQyM0Fhc4GT0QX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/oXDzT2ltZSJxAHKp27242yC5nPxQ3Qm5dVqzOMelI7vNMdYoKm718Jw4c85ApN5cXIbWvdUTtk48qBKkGcgEdaFRT2e4AIPCVQaF+1tvuawAVEQKlVBM8ulHfPoXeunfaKQqJ1ilrW0UnjNfYP2gVoCoURIpdwhoMuhKTG2ZNODiJI3miPcFddvMm1cSHGvDIEKBJoP//Z";


var posX = 0;
var posY = 0;




//for loops set images at given coordinates according to position on mapArray
for (var y = 0; y < mapArray.length; y++) {
    for (var x = 0; x < mapArray[0].length; x++) {

        if (mapArray[y][x] == "") {
            context.drawImage(grass, (32 * x), (32 * y), 32, 32)//last two are size of image )
        }
        if (mapArray[y][x] == "#") {
            context.drawImage(wall, (32 * x), (32 * y), 32, 32)//last two are size of image )
        }
 }
}

context.rect(posX, posY, 32, 32)
context.stroke();//traces path, might not need this


//moves character
function move(e) {//next five lines are newly added. Final line of function is drawimage function that is new as well
    var ctx = canvas.getContext('2d');// create backing canvas
    var backCanvas = document.createElement('canvas');
    backCanvas.width = canvas.width;
    backCanvas.height = canvas.height;
    var backCtx = backCanvas.getContext('2d');

    //alert(e.keyCode);//gives feedback to what each keyCode is
    if (e.keyCode == 39) {
        posX += 5;
    }
    if (e.keyCode == 37) {
        posX -= 5;
    }
    if (e.keyCode == 40) {
        posY += 5;
    }
    if (e.keyCode == 38) {
        posY -= 5;

    }
    canvas.width = canvas.width;//clears the board after each move
    context.rect(posX, posY, 32, 32)
    context.stroke();
    ctx.drawImage(backCanvas, 0, 0);
}    
document.onkeydown = move;

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（“2d”）；
var img=新图像（）；
img.onload=函数（）{
drawImage（img，0,0）；
}
img.src=“”；
var映射数组=
["############################",
“########”，
"#                          #",
"#   ####   #####    ##     #",
"##         #   #    ##     #",
"###           ##     #     #",
"#           ###      #     #",
"#   ####          ###      #",
“#####o#”，
“############”，
"#    #    #                #",
"############################"];
//需要添加wall.scource=和grass.source=
var wall=新图像（）；
var grass=新图像（）；
grass.src=”http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_（Tile）.gif/revision/latest？cb=20080817072800&路径前缀=en”；
wall.src=“数据：图像/jpeg；base64，/9j/4AAQSKZJRGABAQAAAQAAAD/2WCEAKGBWGHBGKKKKKKKKKLDRYPDQWMDRSUFRAWIB0IIIADHX8KKKDQSJCYXJYYOUFLT0TMSW3QTO6LC87RD84NZC5OJCCBCGOKBQUFDGEFDISZEXKKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/OXDZ2LTZJXAHKP272YC5NPXQQQM5DVQZOMELI7VNMDYKM718JW4C85APN5XIBWVDUTK48QBKKKKGCGEDAFRT24AIPCVQAF+1VuWAVEQKLVBM8ULHFPOXUNFAKQJ1ILRW0UNJ2NGYP22VOCURIPDWHOMMUHKTG2ZNODIJ2IPCFDMMM1CSHGVDIEKJOP//“；
var-posX=0；
var-posY=0；
//对于循环，根据mapArray上的位置在给定坐标处设置图像
对于（变量y=0；y

是您的

canvas.width=canvas.width；

将清除画布，移动后您将只得到

rect

。也可以在移动函数中执行所有渲染代码，或者为贴图提供一个备份画布，这样您就可以在移动函数的顶部高效地渲染它，而无需通过t他每次都

mapArray

。在这里，他们使用备份画布：

基于备份画布思想的代码：

var canvas = <HTMLCanvasElement>document.getElementById('myCanvas');
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
    context.drawImage(img, 0, 0);
}
img.src = "";



var mapArray =
       ["############################",
        "#      #    #      o      ##",
        "#                          #",
        "#   ####   #####    ##     #",
        "##         #   #    ##     #",
        "###           ##     #     #",
        "#           ###      #     #",
        "#   ####          ###      #",
        "#   ##    #  o             #",
        "# o  #    #    o ###   ### #",
        "#    #    #                #",
        "############################"];

//need to add wall.scource =  and grass.source =
var wall = new Image();
var grass = new Image();
grass.src = "http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_(Tile).gif/revision/latest?cb=20080817072800&path-prefix=en";
wall.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJyofLT0tMSw3QTo6LC87RD84Nzc5OjcBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIACAAIAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAACAwQFAP/EACkQAAEDAwIDCQEAAAAAAAAAAAECAxEABCESEyMxURQyM0Fhc4GT0QX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/oXDzT2ltZSJxAHKp27242yC5nPxQ3Qm5dVqzOMelI7vNMdYoKm718Jw4c85ApN5cXIbWvdUTtk48qBKkGcgEdaFRT2e4AIPCVQaF+1tvuawAVEQKlVBM8ulHfPoXeunfaKQqJ1ilrW0UnjNfYP2gVoCoURIpdwhoMuhKTG2ZNODiJI3miPcFddvMm1cSHGvDIEKBJoP//Z";


var posX = 0;
var posY = 0;




//for loops set images at given coordinates according to position on mapArray
for (var y = 0; y < mapArray.length; y++) {
    for (var x = 0; x < mapArray[0].length; x++) {

        if (mapArray[y][x] == "") {
            context.drawImage(grass, (32 * x), (32 * y), 32, 32)//last two are size of image )
        }
        if (mapArray[y][x] == "#") {
            context.drawImage(wall, (32 * x), (32 * y), 32, 32)//last two are size of image )
        }
 }
}

// Here you've rendered the static content and you want to save the state of the canvas in a backup at this point:

// create backing canvas
var backCanvas = document.createElement('canvas');
backCanvas.width = canvas.width;
backCanvas.height = canvas.height;
var backCtx = backCanvas.getContext('2d');

// save main canvas contents
backCtx.drawImage(canvas, 0,0);

context.rect(posX, posY, 32, 32)
context.stroke();//traces path, might not need this


//moves character
function move(e) {

    canvas.width = canvas.width;//clears the board after each move (not really necessary since we'll draw the backCanvas over it...)

    // Render the backup canvas here
    context.drawImage(backCanvas, 0,0);

    //alert(e.keyCode);//gives feedback to what each keyCode is
    if (e.keyCode == 39) {
        posX += 5;
    }
    if (e.keyCode == 37) {
        posX -= 5;
    }
    if (e.keyCode == 40) {
        posY += 5;
    }
    if (e.keyCode == 38) {
        posY -= 5;

    }
    context.rect(posX, posY, 32, 32)
    context.stroke();
}    
document.onkeydown = move;

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（“2d”）；
var img=新图像（）；
img.onload=函数（）{
drawImage（img，0,0）；
}
img.src=“”；
var映射数组=
["############################",
“########”，
"#                          #",
"#   ####   #####    ##     #",
"##         #   #    ##     #",
"###           ##     #     #",
"#           ###      #     #",
"#   ####          ###      #",
“#####o#”，
“############”，
"#    #    #                #",
"############################"];
//需要添加wall.scource=和grass.source=
var wall=新图像（）；
var grass=新图像（）；
grass.src=”http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_（Tile）.gif/revision/latest？cb=20080817072800&路径前缀=en”；
wall.src=“数据：图像/jpeg；base64，/9j/4AAQSKZJRGABAQAAAQAAAD/2WCEAKGBWGHBGKKKKKKKKKLDRYPDQWMDRSUFRAWIB0IIIADHX8KKKDQSJCYXJYYOUFLT0TMSW3QTO6LC87RD84NZC5OJCCBCGOKBQUFDGEFDISZEXKKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKYSKAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/OXDZ2LTZJXAHKP272YC5NPXQQQM5DVQZOMELI7VNMDYKM718JW4C85APN5XIBWVDUTK48QBKKKKGCGEDAFRT24AIPCVQAF+1VuWAVEQKLVBM8ULHFPOXUNFAKQJ1ILRW0UNJ2NGYP22VOCURIPDWHOMMUHKTG2ZNODIJ2IPCFDMMM1CSHGVDIEKJOP//“；
var-posX=0；
var-posY=0；
//对于循环，根据mapArray上的位置在给定坐标处设置图像
对于（变量y=0；yvar canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");

var mapArray = ["############################",
    "#      #    #      o      ##",
    "#                          #",
    "#   ####   #####    ##     #",
    "##         #   #    ##     #",
    "###           ##     #     #",
    "#           ###      #     #",
    "#   ####          ###      #",
    "#   ##    #  o             #",
    "# o  #    #    o ###   ### #",
    "#    #    #                #",
    "############################"];

//need to add wall.scource =  and grass.source =
var wall = new Image();
var grass = new Image();
grass.src = "http://vignette2.wikia.nocookie.net/tibia/images/6/60/Grass_(Tile).gif/revision/latest?cb=20080817072800&path-prefix=en";
wall.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJyofLT0tMSw3QTo6LC87RD84Nzc5OjcBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIACAAIAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAACAwQFAP/EACkQAAEDAwIDCQEAAAAAAAAAAAECAxEABCESEyMxURQyM0Fhc4GT0QX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Au/oXDzT2ltZSJxAHKp27242yC5nPxQ3Qm5dVqzOMelI7vNMdYoKm718Jw4c85ApN5cXIbWvdUTtk48qBKkGcgEdaFRT2e4AIPCVQaF+1tvuawAVEQKlVBM8ulHfPoXeunfaKQqJ1ilrW0UnjNfYP2gVoCoURIpdwhoMuhKTG2ZNODiJI3miPcFddvMm1cSHGvDIEKBJoP//Z";

// Player position

var posX = 0;
var posY = 0;

//moves character
function move(e) {

    //alert(e.keyCode);//gives feedback to what each keyCode is
    if (e.keyCode == 39) {
        posX += 5;
    }
    if (e.keyCode == 37) {
        posX -= 5;
    }
    if (e.keyCode == 40) {
        posY += 5;
    }
    if (e.keyCode == 38) {
        posY -= 5;

    }
}

document.onkeydown = move;

// every 3 miliseconds re-draw the stage with the player
setInterval(function () {
    console.log("REDRAW");
    // Clear the canvas and redraw
    context.fillStyle = "#FFF";
    context.fillRect(0,0,800,600);

    //for loops set images at given coordinates according to position on mapArray
    for (var y = 0; y < mapArray.length; y++) {
        for (var x = 0; x < mapArray[0].length; x++) {

            if (mapArray[y][x] == "") {
                context.drawImage(grass, (32 * x), (32 * y), 32, 32) //last two are size of image )
            }
            if (mapArray[y][x] == "#") {
                context.drawImage(wall, (32 * x), (32 * y), 32, 32) //last two are size of image )
            }
        }
    }
    context.fillStyle = "#00F";
    context.fillRect(posX, posY, 32, 32)
}, 3);