Javascript canvasゲームのリセットエラー、描画が失敗しました

Question

jsとcanvasを使用してゲームを作っています。問題があります。プレイヤーが失ってレベルが再開するまで、すべてうまく行きます。 clearRectは動作していますが、マップは再び描画されないので、画面は黒のままです。ゴブリンを動かすと、どうやってそれが行われるのかが描かれます。何が間違っているのですか？

コンソールエラー

キャッチされない例外TypeErrorに： 'CanvasRenderingContext2D' オン 'のdrawImage' の実行に失敗しました：提供された値がタイプではない '（HTMLImageElementまたはHTMLVideoElementまたはHTMLCanvasElementまたはImageBitmap'）

私のjsファイル

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

私のhtmlファイル

<!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

var visitedはイメージで、updateScreenには、現在エラーが発生しているイメージを描画しようとしています。これは、関数updateScreenの第2引数もvisitedというイメージではないためです。代わりに、あなたが何か他のものに画像visitedの名前を変更し、それに対するすべての参照を更新することができ、そのようなものに、

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

を

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

をこれらの行を変更しますか。