File: picdoku.html

Recommend this page to a friend!
  Classes of Randal Allen Anderson III   Picdoku Game Online   picdoku.html   Download  
File: picdoku.html
Role: Example script
Content type: text/plain
Description: Game example, main game startup
Class: Picdoku Game Online
Manage a Sudoku board game online with pictures
Author: By
Last change:
Date: 10 years ago
Size: 11,942 bytes
 

Contents

Class file image Download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Picture Sudoku </title> <meta name="description" content="Picture Sudoku."> <meta name="Keywords" content="Sudoku, picture, custom"> <meta http-equiv="content-language" content="en"> <link rel="shortcut icon" href="./packageIcons/favicon.ico"> <meta name="rating" content="General"> <meta name="copyright" content="Copyright 2013, Randal Allen Anderson III. All Rights Reserved."> <meta name="ROBOTS" content="ALL"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="Stylesheet" href="./packageIcons/blackbird.css" /> <link type="text/css" rel="stylesheet" href="./picdoku.css"> </style> </head> <body> <!-- these controls are always displayed --> <div id="controls"> <!-- puzzle difficulty indicator --> <input id="levelOut" type="text" class="selector largefonts" title="Difficulty level of current game." size="6" disabled /> <!-- New Game button --> <input type="button" class="pbutton largefonts" title="Start a new game. Erases the current puzzle." value="New Puzzle" onClick="picdoku.loadPuzzle();"/> <!-- Restart Game button --> <input type="button" class="pbutton largefonts" title="Restart the current game. Erases all placed icons." value="Restart Puzzle" onClick="picdoku.placePuzzle();"/> <!-- Show Settings button --> <input type="button" id="hideiconload" class="pbutton largefonts" onClick="picdoku.toggleIconButtons();" title="Click to show or hide settings." value="Hide Settings"/> <!-- Show Picture Choosers button --> <input type="button" id="hidefileload" class="pbutton largefonts" onClick="picdoku.toggleFileLoaders();" title="Click to show or hide icon picture file choosers." value="Hide File Loaders"/> </div> <!-- buttons to load package icon sets --> <div id="loadiconbuttons"> <table style="margin-left:auto;margin-right:auto;"> <tr> <th> Difficulty Level </th> <th> &nbsp; </th> <th> Puzzle Symmetry </th> </tr> <tr> <td> <!-- puzzle difficulty selector --> <select id="difficulty" class="selector largefonts" title="Choose difficulty level to use." onChange="picdoku.setDifficulty();"> <option value="Any">Any</option> <option value="Easy">Easy</option> <option value="Medium">Medium</option> <option value="Hard">Hard</option> </select> </td> <td> &nbsp; </td> <td> <!-- puzzle symmetry selector --> <select id="symmetry" class="selector largefonts" title="Choose symmetry of game board layout." onChange="picdoku.setSymmetry();"> <option value="foursquare" title="The puzzle will be symmetrical along both the horizontal and vertical axis">Four Corners</option> <option value="vertical" title="The puzzle will be symmetrical along the vertical axis">Fold Left / Right</option> <option value="horizontal" title="The puzzle will be symmetrical along the horizontal axis">Fold Top / Bottom</option> <option value="rotate" title="The puzzle will be rotationally symmetrical as if rotated 180 degrees">Rotate 180</option> <option value="backslashfold" title="Bottom-Left of the puzzle will be symmetrical with Top-Right as if folded along the 'backslash' diagonal">Fold Diagonally</option> <option value="off" title="No symmetry in the puzzle">Symmetry Off</option> </select> </td> </tr> </table> <br/> <table> <tr> <th>Icon Sets, 'My Icons' can be loaded using 'File Loaders' from pictures you supply.</th> </tr> <tr> <td> <input type="button" class="pbutton largefonts" title="Load the default numbered icons." value="Default Icons" onClick="picdoku.loadDefault();"/> <input type="button" class="pbutton largefonts" title="Load icons with large numbers in pool ball colors." value="Pool Ball Icons 1" onClick="picdoku.loadBalls1();"/> <input type="button" class="pbutton largefonts" title="Load pool ball-like icons." value="Pool Ball Icons 2" onClick="picdoku.loadBalls2();"/> <input type="button" class="pbutton largefonts" title="Load icons with dots like dice." value="Dice Icons" onClick="picdoku.loadDice();"/> <input type="button" class="pbutton largefonts" title="Load custom icons." value="My Icons" onClick="picdoku.loadMine();"/> </td> </tr> <tr> <td> <input type="button" class="pbutton largefonts" title="Load Mahjong Bamboo Set icons." value="Mahjong Bamboo Icons" onClick="picdoku.loadMahBam();"/> <input type="button" class="pbutton largefonts" title="Load Mahjong Character Set icons." value="Mahjong Character Icons" onClick="picdoku.loadMahChar();"/> <input type="button" class="pbutton largefonts" title="Load Mahjong Circle Set icons." value="Mahjong Circle Icons" onClick="picdoku.loadMahCirc();"/> </td> </tr> </table> </div> <!-- Congratulations message --> <div id="finalmessagediv" style="display:block;"> <h3 id="finalmessage" class="congrats largefonts" style="display:block;">Congratulations!<br/>You finished the puzzle!</h3> </div> <!-- divs for puzzle canvas, need a blank div for dropping --> <div id="meat"> <canvas id="canvas"> <h3 id="nographics">Sorry: Browser does not support Graphics Canvas</h3> </canvas> <div> <div id="instructions_div" style="float:left;"> <h4 id="instructions" class="instructions largefonts">Drag any icon onto a square to copy it there.<br/>+Shift key moves placed icon.<br/>+Ctrl key erases placed icon.</h4> </div> </div> </div> <div id="puzzle" ondrop="Picdoku.drop(event)" ondragover="Picdoku.allowDrop(event)" draggable="false"> </div> <!-- div for draggable icons legend --> <div id="potatoes"> <p> </p> <h3 id="scriptsuccessindicator" style="color:red;">Javascript must be turned on for this page to function properly, or Javascript may have failed!</h3> <table> <tr> <td> <span id="Used1" class="countplaced">0</span> </td> <td> <img id="icon1" class="sudokuicon" draggable="true" title = "Drag me onto a square to copy me to that square." ondragstart="Picdoku.drag(event)" src="packageIcons/one.png" /> </td> </tr> <tr> <td> <span id="Used2" class="countplaced">0</span> </td> <td> <img id="icon2" class="sudokuicon" draggable="true" title = "Drag me onto a square to copy me to that square." ondragstart="Picdoku.drag(event)" src="packageIcons/two.png" /> </td> </tr> <tr> <td> <span id="Used3" class="countplaced">0</span> </td> <td> <img id="icon3" class="sudokuicon" draggable="true" title = "Drag me onto a square to copy me to that square." ondragstart="Picdoku.drag(event)" src="packageIcons/three.png" /> </td> </tr> <tr> <td> <span id="Used4" class="countplaced">0</span> </td> <td> <img id="icon4" class="sudokuicon" draggable="true" title = "Drag me onto a square to copy me to that square." ondragstart="Picdoku.drag(event)" src="packageIcons/four.png" /> </td> </tr> <tr> <td> <span id="Used5" class="countplaced">0</span> </td> <td> <img id="icon5" class="sudokuicon" draggable="true" title = "Drag me onto a square to copy me to that square." ondragstart="Picdoku.drag(event)" src="packageIcons/five.png" /> </td> </tr> <tr> <td> <span id="Used6" class="countplaced">0</span> </td> <td> <img id="icon6" class="sudokuicon" draggable="true" title = "Drag me onto a square to copy me to that square." ondragstart="Picdoku.drag(event)" src="packageIcons/six.png" /> </td> </tr> <tr> <td> <span id="Used7" class="countplaced">0</span> </td> <td> <img id="icon7" class="sudokuicon" draggable="true" title = "Drag me onto a square to copy me to that square." ondragstart="Picdoku.drag(event)" src="packageIcons/seven.png" /> </td> </tr> <tr> <td> <span id="Used8" class="countplaced">0</span> </td> <td> <img id="icon8" class="sudokuicon" draggable="true" title = "Drag me onto a square to copy me to that square." ondragstart="Picdoku.drag(event)" src="packageIcons/eight.png" /> </td> </tr> <tr> <td> <span id="Used9" class="countplaced">0</span> </td> <td> <img id="icon9" class="sudokuicon" draggable="true" title = "Drag me onto a square to copy me to that square." ondragstart="Picdoku.drag(event)" src="packageIcons/nine.png" /> </td> </tr> <tr> <td> </td> <td> <img id="eraser" class="sudokuicon" draggable="true" title="Drag me onto a square to erase the picture in that square." ondragstart="Picdoku.drag(event)" src="packageIcons/eraser.jpg" /> </td> </tr> </table> </div> <div id="smileys_div"> <img id="hintsmiley3" class="hinticon largehint" draggable="false" title="Proud owner of three unused hints." src="packageicons/hints1.png" onclick="picdoku.doHint(3)" /> <img id="hintsmiley2" class="hinticon largehint" draggable="false" title="Still have two hints available." src="packageicons/hints2.png" onclick="picdoku.doHint(2)" style="display:none;" /> <img id="hintsmiley1" class="hinticon largehint" draggable="false" title="One hint left to use." src="packageicons/hints3.png" onclick="picdoku.doHint(1)" style="display:none;" /> <img id="hintsmiley0" class="hinticon largehint" draggable="false" title="All my hints are used up." src="packageicons/hints4.png" onclick="picdoku.doHint(0)" style="display:none;" /> </div><!-- #smileys --> <!-- file inputs for picture loading --> <input type="file" id="picfile1" name="picfile1[]" class="loadimage largefonts" title="Click to choose custom picture to use for One." onChange="Picdoku.handleFileSelect(event,1)" value="myIcons/"/> <input type="file" id="picfile2" name="picfile2[]" class="loadimage largefonts" title="Click to choose custom picture to use for Two." onChange="Picdoku.handleFileSelect(event,2)" value="myIcons/"/> <input type="file" id="picfile3" name="picfile3[]" class="loadimage largefonts" title="Click to choose custom picture to use for Three." onChange="Picdoku.handleFileSelect(event,3)" value="myIcons/"/> <input type="file" id="picfile4" name="picfile4[]" class="loadimage largefonts" title="Click to choose custom picture to use for Four." onChange="Picdoku.handleFileSelect(event,4)" value="myIcons/"/> <input type="file" id="picfile5" name="picfile5[]" class="loadimage largefonts" title="Click to choose custom picture to use for Five." onChange="Picdoku.handleFileSelect(event,5)" value="myIcons/"/> <input type="file" id="picfile6" name="picfile6[]" class="loadimage largefonts" title="Click to choose custom picture to use for Six." onChange="Picdoku.handleFileSelect(event,6)" value="myIcons/"/> <input type="file" id="picfile7" name="picfile7[]" class="loadimage largefonts" title="Click to choose custom picture to use for Seven." onChange="Picdoku.handleFileSelect(event,7)" value="myIcons/"/> <input type="file" id="picfile8" name="picfile8[]" class="loadimage largefonts" title="Click to choose custom picture to use for Eight." onChange="Picdoku.handleFileSelect(event,8)" value="myIcons/"/> <input type="file" id="picfile9" name="picfile9[]" class="loadimage largefonts" title="Click to choose custom picture to use for Nine." onChange="Picdoku.handleFileSelect(event,9)" value="myIcons/"/> </body> <script type="text/javascript" src="./packageIcons/blackbird.js"></script> <script type="text/javascript" src="./sudokuPuzzle.js"></script> <script type="text/javascript" src="./picdoku.js"></script> </html>