Почему моя карта исчезает каждый раз, когда мой спрайт движется?

Question

Попытка сделать мою первую игру в эти выходные. Я, наконец, получил свой прямоугольник, чтобы появляться одновременно с моей картой. И мой прямоугольник может двигаться! Но как только я нажимаю кнопку для перемещения, карта исчезает. Это где мне нужно сделать какой-то цикл игрового процесса, чтобы постоянно обновлять карту при каждом нажатии кнопки или устанавливать на ней таймер? Или у меня есть какая-то другая ошибка? Спасибо всем!

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; 

Answer 1

jsFiddle: https://jsfiddle.net/j353agny/3/

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

Что вы можете сделать, это просто использовать setInterval, который будет выполняться каждые 3 милисекунды. В основном каждые 3 милисекунды я получаю холст, чтобы перерисовать ваши стены, а затем перерисовать ваш плеер. Это остановит любые странные проблемы с рисованием, которые у вас есть.

P.S. вы можете использовать requestAnimationFrame вместо setInterval, чтобы вы знали

Answer 2

Да ваш canvas.width = canvas.width; будет очистить холст, и вы будете в конечном итоге с только rect после переезда. Либо сделайте весь код рендеринга в своей функции перемещения, либо создайте резервный холст для карты, чтобы вы могли эффективно отображать его в верхней части своей функции перемещения, не переходя через mapArray каждый раз. Здесь они используют резервный холст: html5: copy a canvas to image and back

---

код, основанный на идее резервного холста:

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;