File: fifteenpuzzle.html

Recommend this page to a friend!
  Classes of Mark Rolich   Fifteen Puzzle   fifteenpuzzle.html   Download  
File: fifteenpuzzle.html
Role: Example script
Content type: text/plain
Description: Demo without graphics
Class: Fifteen Puzzle
Implement the Fifteen puzzle game
Author: By
Last change: Fixing Event.js path
Moving shuffle function to the main script file
Grammar fix
First commit
Date: 2 years ago
Size: 1,922 bytes
 

Contents

Class file image Download
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Fifteen puzzle</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <link rel="stylesheet" type="text/css" href="fifteenpuzzle.css"> <body> <h1>Fifteen puzzle</h1> <div id="board">&nbsp;</div> <div class="info"> <div id="game-info">Moves: <strong id="moves">0</strong></div> <button type="button" id="new-game" style="float: right">New game</button> </div> <script type="text/javascript" src="Event.js"></script> <script type="text/javascript" src="FifteenPuzzle.js"></script> <script type="text/javascript"> "use strict"; var evt = new Event(), board = document.getElementById('board'), game = new FifteenPuzzle(evt, board), gameInfo = document.getElementById('game-info'), movesNum = document.getElementById('moves'), btn = document.getElementById('new-game'), restartText = 'Are you sure to restart the game?', winRestartText = 'Play again?', slideCallback = function (moveCnt) { movesNum.childNodes[0].nodeValue = moveCnt; }, restart = function (confirmText) { if (window.confirm(confirmText)) { gameInfo.innerHTML = 'Moves: <strong id="moves">0</strong>'; movesNum = document.getElementById('moves'); movesNum.childNodes[0].nodeValue = 0; game.render(); } }, winCallback = function (moveCnt) { gameInfo.innerHTML = 'You won in <strong>' + moveCnt + '</strong> moves!'; window.setTimeout(function () { restart(winRestartText); }, 2000); }; game.render(); game.speed = 10; game.onslide = slideCallback; game.onwin = winCallback; evt.attach('click', btn, function () { restart(restartText); }); </script> </body> </html>