Question

我使用HTML5制作了一个益智游戏，刚才我试图在游戏中添加本地存储，但失败了。

我写了三个函数。问题是：如果我将所有函数放在一个.js文件中，则在调试时（通过chrome）不会定义任何函数。如果我将这三个函数拆分为另一个文件并将标记添加到.html文件中，我会告诉它们没有定义。

那么如何解决这个问题呢？

抱歉我的英语不好，希望你明白我的意思。

这是我的函数和html文件。

<html>
<head>
<meta charset="utf-8">
<title>Puzzle</title>
<script src="puzzle-localstorage.js"></script>
<script src="puzzle.js"></script></script>
</head>

<body onLoad="Init()" onkeydown="keydown()">
<p align="center">
    <canvas id="board" height="600" width="600" style="border-style:double">
        Your Browser doesn't support canvas
    </canvas>
</p>
<p id="moves">Moves: <span id="movecount">0</span>
<input type="number" id="boardEdgeNum" value="3"/>
<input type="file" id="imgSrc"/>

</p>

function supportsLocalStorage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
    }
}



function saveGameState() {
if (!supportsLocalStorage()) { return false; }
localStorage["puzzle.boardEdge"] = boardEdge;
localStorage["puzzle.blockPixel"] = blockPixel;
for (var i = 0; i < boardEdge; i++) {
    for(var j=0;j<boardEdge;j++){
        localStorage["puzzle.gameStatus."+i+j] = gameStatus[i][j];
    }
}
localStorage["puzzle.image.src"]=imgElement.src;
localStorage["puzzle.move.count"] = moveCount.textContent;
if(gameInProgress)localStorage["puzzle.game.in.progress"] = "true";
else localStorage["puzzle.game.in.progress"]="false";
localStorage["puzzle.empty.block.X"] = emptyBlock.X;
localStorage["puzzle.empty.block.Y"] = emptyBlock.Y;
return true;
}

function resumeGame() {
if (!supportsLocalStorage()) {return false;}
if(!localStorage["puzzle.game.in.progress"]=="true"){return false;}
boardEdge=parseInt(localStorage["puzzle.boardEdge"]);
blockPixel=parseInt(localStorage["puzzle.blockPixel"]);
imgElement=new Image();
imgElement.src=localStorage["puzzle.image.src"];
gameStatus=new Array(boardEdge);
gameCompStatus=new Array(boardEdge);
for (var i = 0; i < boardEdge; i++) {
    gameStatus[i]=new Array(boardEdge);
    gameCompStatus[i]=new Array(boardEdge);
    for(var j=0;j<boardEdge;j++){
        gameStatus[i][j]=parseInt(localStorage["puzzle.gameStatus."+i+j]);
        var x=(gameStatus[i][j]-1)%boardEdge;
        var y=(gameStatus[i][j]-1-j)/boardEdge;
        drawingContext.drawImage(imgElement,x*blockPixel,y*blockPixel,blockPixel,blockPixel
                                            j*blockPixel,i*blockPixel,blockPixel,blockPixel);
        drawLines();
    }
}
gameStatus[boardEdge-1][boardEdge-1]=0;
gameCompStatus[boardEdge-1][boardEdge-1]=0;

moveCount.textContent=localStorage["puzzle.move.count"];
gameInProgress=(localStorage["puzzle.game.in.progress"] =="true");
emptyBlock=new Cell(parseInt(localStorage["puzzle.empty.block.X"]),parseInt(localStorage["puzzle.empty.block.Y"]));
return true;
}

Answer 1

<script src="puzzle.js"></script></script>

这是什么？这是错字吗？或者在你的真实代码中它也是如此？尝试删除它们。 Javascript应该看到你的功能。 Init和keydown函数的声明在哪里？ javascript会看到它们吗？

Answer 2

您检查过任何错误吗？我在resumeGame：

的循环中看到了一个

    drawingContext.drawImage(imgElement,x*blockPixel,y*blockPixel,blockPixel,blockPixel
                                        j*blockPixel,i*blockPixel,blockPixel,blockPixel);

应该是：

    drawingContext.drawImage(imgElement,x*blockPixel,y*blockPixel,blockPixel,blockPixel,
        j*blockPixel,i*blockPixel,blockPixel,blockPixel);

Answer 3

您的网址可能有误。您使用的是相对网址而不是绝对网址，因此JS文件必须与HTML文档位于同一文件夹中。

尝试使用绝对网址（例如http://www.servername.com/puzzle/js/puzzle.js“）并检查是否可以完成任何操作。

为什么javascript无法找到我的功能？

3 个答案: