HTML5 Canvas Source Example HTML – index.html

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>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 2 other subscribers