Javascript Leinwand Spiel Reset Fehler, zeichnen gescheitert

Question

ich mache ein Spiel mit js und Leinwand, ich habe ein Problem, alles geht gut, bis der Spieler verliert und ich das Niveau neu starten. clearRect funktioniert, aber die Map wird nicht neu gezeichnet, so dass der Bildschirm schwarz bleibt, wenn ich den Goblin bewege, malt er, wie es soll. Was mache ich falsch?

Konsole Fehler

Uncaught Typeerror: Fehler 'drawImage' auf 'CanvasRenderingContext2D' auszuführen: Der angegebene Wert ist nicht vom Typ '(HTMLImageElement oder HTMLVideoElement oder HTMLCanvasElement oder ImageBitmap)'

meine js

Datei

var world1 = [  
["S",".","B","P"], 
["W","G","P","B"], 
["S",".","B","."], 
["I","B","P","B"]] 


var visited1 = [  
["f","f","f","f"], 
["f","f","f","f"], 
["f","f","f","f"], 
["d","f","f","f"]]   


var row=3; 
var col=0; 

var gold=false; 
var win=false; 
var state="estas a salvo"; 

var level = 0; 
var ActualWorld=world1; 
var ActualVisited=visited1; 

var canvas = document.getElementById('board'); 
context = canvas.getContext('2d'); 
var width = window.innerWidth; 
var height = window.innerHeight; 
context.canvas.width = window.innerWidth; 
context.canvas.height = window.innerHeight; 

unvisited = new Image(); 
unvisited.src = 'img/unvisited1.png'; 
visited = new Image(); 
visited.src = 'img/visited1.png'; 
duende = new Image(); 
duende.src= 'img/duendeb.png'; 
wind = new Image(); 
wind.src = 'img/wind.png'; 
smell = new Image(); 
smell.src = 'img/smell.jpg'; 

s1 = new Image(); 
s1.src = 'img/1.png'; 
s2 = new Image(); 
s2.src = 'img/2.png'; 
s3 = new Image(); 
s3.src = 'img/3.png'; 
s4 = new Image(); 
s4.src = 'img/4.png'; 
s5 = new Image(); 
s5.src = 'img/5.png'; 
s6 = new Image(); 
s6.src = 'img/6.png'; 
s7 = new Image(); 
s7.src = 'img/7.png'; 


var side = height/4; 
drawBoard(ActualWorld, ActualVisited); 
control(); 

function drawBoard(world, visited) 
{ 


    unvisited.onload = function(){ 

     updateScreen(ActualWorld, ActualVisited); 
    } 


} 
function updateScreen(world, visited){ 
    var tmp; 
    for (var i = 0; i<visited.length; i++) { 
     for (var j =0; j< visited.length; j++) { 
      tmp=visited[i][j]; 
      if (tmp=="f") { 
       context.drawImage(unvisited,side*j,side*i,side,side); 
      } 
      else if (tmp=="t") { 
       context.drawImage(visited, side*j,side*i,side,side);//here is the console error 
      } 
      else { 
       context.drawImage(duende, side*j, side*i, side, side); 

      } 
     } 
    } 

} 

function handleKeyDown(e){ 
    var k = e.keyCode; 
    if (k==40 && row<ActualVisited.length-1) { 
     ActualVisited[row][col]="t"; 
     context.drawImage(visited,side*col, side*row,side,side); 
     row++; 
     ActualVisited[row][col]="d"; 
     context.drawImage(duende, side*col, side*row, side, side); 
     console.log("down"); 
     check(); 
    } 
    else if (k==38 && row>0) { 
     ActualVisited[row][col]="t"; 
     context.drawImage(visited,side*col, side*row,side,side); 
     row--; 
     ActualVisited[row][col]="d"; 
     context.drawImage(duende, side*col, side*row, side, side); 
     console.log("up"); 
     check(); 
    } 
    else if (k==37 && col>0) { 
     ActualVisited[row][col]="t"; 
     context.drawImage(visited,side*col, side*row,side,side); 
     col--; 
     ActualVisited[row][col]="d"; 
     context.drawImage(duende, side*col, side*row, side, side); 
     console.log("left"); 
     check(); 
    } 
    else if (k==39 && col<ActualVisited.length-1) { 
     ActualVisited[row][col]="t"; 
     context.drawImage(visited,side*col, side*row,side,side); 
     col++; 
     ActualVisited[row][col]="d"; 
     context.drawImage(duende, side*col, side*row, side, side); 
     console.log("right"); 
     check(); 
    } 


} 

function control(){ 
    window.addEventListener('keydown',this.handleKeyDown,false); 
} 

function check(){ 
    if (ActualWorld[row][col]==".") { 
     console.log("estas a salvo"); 
     context.drawImage(s1, ActualWorld.length*side+side, 0); 
    } 
    else if (ActualWorld[row][col]=="B") { 
     console.log("sientes un viento fuerte"); 
     context.drawImage(s2, ActualWorld.length*side+side, 0); 
    } 
    else if (ActualWorld[row][col]=="S") { 
     console.log("sientes un terrible olor"); 
     context.drawImage(s3, ActualWorld.length*side+side, 0); 
    } 
    else if (ActualWorld[row][col]=="W") { 
     console.log("has perdido, el wumpus te ha atrapado"); 
     context.drawImage(s4, ActualWorld.length*side+side, 0); 
    } 
    else if (ActualWorld[row][col]=="P") { 
     console.log("has perdido, has caido en un abismo"); 
     context.drawImage(s5, ActualWorld.length*side+side, 0); 
     restart(); 
    } 
    else if (ActualWorld[row][col]=="G") { 
     console.log("has robado el oro, escapa!"); 
     context.drawImage(s6, ActualWorld.length*side+side, 0); 
     gold=true; 
    } 
    else if (ActualWorld[row][col]=="I" && gold==true) { 
     console.log("has ganado!"); 
     context.drawImage(s7, ActualWorld.length*side+side, 0); 
     win=true; 
     // nextLevel(); 
    } 

} 

/*function nextLevel(){ 

}*/ 

function restart(){ 
    //setTimeout(myFunction, 3000); 
    //window.location.reload(true); 
    level=0; 
    gold=false; 
    ActualWorld=world1; 
    ActualVisited=visited1; 
    win=false; 
    row=3; 
    col=0; 
    //context.fillRect(0,0,width,height); 
    context.clearRect(0, 0, width, height); 
    updateScreen(ActualWorld, ActualVisited); 
} 

meine hTML-Datei

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Game</title><!-- titulo --> 


    <link rel="stylesheet" href="css/styles.css"><!-- enlazando archivo css --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

    <!-- enlazando archivo js con el juego --> 
</head> 
<body> 

<canvas id="board" style = "border: 1px solid grey"></canvas> 
<script src="js/game.js"></script> 
</body> 
</html> 

Answer 1

Die var visited ist ein Bild und in updateScreen versuchen Sie, das Bild zu zeichnen, wo Sie derzeit den Fehler erhalten. Dies liegt daran, dass das zweite Argument der Funktion updateScreen auch visited heißt, was kein Bild ist. Ändern Sie diese Zeilen,

function updateScreen(world, visited) 
{ 
    var tmp; 
    for (var i = 0; i<visited.length; i++) 
    { 
     for (var j =0; j< visited.length; j++) 
     { 
      tmp=visited[i][j]; 

zu so etwas wie dem so ist,

function updateScreen(world, v) 
{ 
    var tmp; 
    for (var i = 0; i<v.length; i++) 
    { 
     for (var j =0; j< v.length; j++) 
     { 
      tmp=v[i][j]; 

Oder alternativ können Sie das Bild visited auf etwas anderes umbenennen und aktualisieren Sie alle Verweise auf sie.