CODEWITHSUNDEEP
javascripthtmlfunction
user840866
user840866

Reputation: 265

Why can't javascript find my functions?

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

Upvotes: 3

Views: 2781

Answers (3)

FK82
FK82

Reputation: 5075

Your url might be wrong. You are using a relative url instead of an absolute url, consequently the JS file must be in the same folder as the HTML Document.

Try an absolute url (e.g. http://www.servername.com/puzzle/js/puzzle.js") instead and check if that accomplishes anything.

Upvotes: 0

tcooc
tcooc

Reputation: 21229

Have you checked for any errors? I see one in the loop of resumeGame:

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

should probably be:

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

Upvotes: 0

Ruslan Polutsygan
Ruslan Polutsygan

Reputation: 4461

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

Upvotes: 1

Related Questions