HTML5 Canvas Source Example HTML
The main landing page will need to check for local storage to be supported on page load as well as initialize the puzzle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Anime Art Puzzles</title>
<!-- Jquery -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="scripts/gamelogic.js"></script>
<link href='http://fonts.googleapis.com/css?family=Audiowide'
rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="styles/puzzleTheme.css" />
<link rel="icon" type="image/png" href="images/favicon-32x32.png"
sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-96x96.png"
sizes="96x96" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png"
sizes="16x16" />
<script>
$(document).ready(function() {
init(document);
// localStorage feature detection
if (isLocalStorageSupported()) {
// local storage is supported
document.getElementById("savePuzzleButton");
document.getElementById("loadPuzzleButton");
} else {
}
});
window.addEventListener("resize", myFunction);
function myFunction() {
adjustOffset();
}
/*
* Tests if local storage is supported in the browser.
*
* Returns:
* True if local storage is supported, false if not.
*/
function isLocalStorageSupported() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
</script>
</head>
<body>
<div id="titleDiv">
<h1 id="title">
<a href="http://www.artinapplications.com/" target="_blank">MobileApplications009
Art Puzzles</a>
</h1>
</div>
<div id="puzzleCanvasDiv">
<canvas id="puzzleCanvas" width="720" height="450"></canvas>
</div>
<div id="buttonDiv">
<button type="button" id="nextImageButton">Next Image</button>
<button type="button" id="changeDifficultyButton">Change
Difficulty</button>
<button type="button" id="savePuzzleButton">Save Puzzle</button>
<button type="button" id="loadPuzzleButton">Load Puzzle</button>
</div>
<div id="androidDiv">
<a
href="https://play.google.com/store/apps/details?id=radical.puzzles"
target="_blank"><img src="images/app_on_google_play.png"
alt="App On Google Play"></a>
</div>
</body>
</html>