Javascript Canvas 游戏重置错误，绘制失败

Question

我正在使用 js 和 canvas 制作游戏，我遇到了问题，一切都很顺利，直到玩家输了并且我重新启动了关卡。 clearRect 正在工作，但 map 没有再次绘制，因此屏幕保持黑色，当我移动妖精时，它会按照预期的方式绘制。我做错了什么？

控制台错误

未捕获的类型错误:无法在“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 的第二个参数也被命名为 visited，它不是图像。更改这些行，

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

像这样，

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

或者，您也可以将访问的图像重命名为其他名称，并更新对其的所有引用。