Home/ Questions/Q 6180025
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:46:27+00:00

I made a puzzle game using HTML5, just now I tried to add local

  • 0

I made a puzzle game using HTML5, just now I tried to add local storage to the game, but failed.

I wrote three functions. The problem is: If I put all the functions in one .js file, none is defined when debugging(via chrome). If I split these three functions to another file and add a tag to the .html file, I’m told these are not defined.

So how to solve this problem?

Sorry for my poor English, hope you understand what I means.

Here are my functions and html file.

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <script src="puzzle.js"></script></script>

    What is this? Is it typo? Or in your real code it is so too? Try to remove them. Javascript should see your functions. Where is declarations for Init and keydown functions? Does javascript see them?

    • 0