API tools faq
paste
Advertisement
richarduie

hangman.html

richarduie
Apr 2nd, 2013
182
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.    
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <title>Hangman</title>
  7.     <style type="text/css">
  8.         body {
  9.             background-color:#CFC;
  10.             margin:2em auto;
  11.             width:500px;
  12.         }
  13.         #alphabet td {
  14.             background-color:#DDD;
  15.             border:1px solid black;
  16.             cursor:pointer;
  17.             font-family:arial, sans-serif;
  18.             font-weight:bold;
  19.             margin:3px;
  20.             padding:2px 4px;
  21.             text-align:center;
  22.             width:1.25em;
  23.         }
  24.         #gallows {font-size:1.5em;}
  25.         #word {
  26.             font-family:monospace;
  27.             font-size:1.5em;
  28.             letter-spacing:.5em;
  29.         }
  30.         #msg {
  31.             color:red;
  32.             font-style:italic;
  33.             height:1.5em;
  34.             margin:0 0 1em 0;
  35.         }
  36.         #score {font-size:1.25em;}
  37.     </style>
  38.     <script type="text/javascript">
  39.         //  G E N E R A L    U T I L I T I E S  - - - - - - - - - - -
  40.         // convenience method
  41.         function get( eid ) {return document.getElementById( eid );};
  42.  
  43.         //  S T A T I S T I C A L    U T I L I T I E S  - - - - - -
  44.         // get a random integer in the range [min, max]
  45.         // note: min is optional with default of 0
  46.         function getRandomInt(max, min) {
  47.             if ('undefined' == typeof min) min = 0;
  48.             var range = max - min + 1;
  49.             var r = Math.floor( range*Math.random( ));
  50.             return min + r;
  51.         };
  52.         // simulate the random draw of integers without replacement
  53.         // of cnt values from the range [min, max]
  54.         // this is like drawing cards from a deck without replacing
  55.         // the cards until the entire number of desired cards is
  56.         // drawn, i.e., there will be no duplicates
  57.         function drawRandomInts(cnt, max, min) {
  58.             if ('undefined' == typeof min) min = 0;
  59.             if ('undefined' == typeof max) max = cnt - 1;
  60.             // reject request for more items than exist in range
  61.             if (cnt > max - min + 1) return null;
  62.             var hash = new Array();
  63.             var drawn = 0;
  64.             while (cnt > drawn) {
  65.                 var r = '' + getRandomInt(max, min);
  66.                 if ('undefined' == typeof hash[r]) {
  67.                     hash[r] = drawn++;
  68.                 }
  69.             }
  70.             var ints = new Array();
  71.             var i = 0;
  72.             for (key in hash) {
  73.                 ints[i] = parseInt(hash[key]);
  74.                 i++;
  75.             }
  76.             return ints;
  77.         };
  78.         // randomly rearrange the elements of an array
  79.         function shuffle( arr ) {
  80.             var idxs = drawRandomInts( arr.length );
  81.             var last = arr.length;
  82.             var shuffled = new Array();
  83.             for (var i = 0; i < last; i++ ) {
  84.                 shuffled.push( arr[ idxs[ i ]] );
  85.             }
  86.             return shuffled;
  87.         };
  88.  
  89.         //  G A M E    D A T A    A N D    F U N C T I O N S  - - - -
  90.         // set base word lists for each level of difficulty
  91.         var easyWords = [       // 4-6 letters
  92.             'apple', 'basic', 'design', 'read', 'object', 'model', 'view'
  93.         ];
  94.         var mediumWords = [ // 7-9 letters
  95.             'computer', 'keyboard', 'program', 'hypertext', 'function', 'variable'
  96.         ];
  97.         var hardWords = [       // 10-12 letters
  98.             'instantiate', 'architecture', 'transmission', 'controller', 'dereference'
  99.         ];
  100.         // randomize the order of each list
  101.         easyWords = shuffle( easyWords );
  102.         mediumWords = shuffle( mediumWords );
  103.         hardWords = shuffle( hardWords );
  104.         // current index of each list
  105.         var easyIdx = mediumIdx = hardIdx = -1;
  106.  
  107.         var states = [
  108.             // 0 misses - empty gallows...start of game
  109.             '______#||   |#||    #||      #||    #||      #||#========',
  110.             // 1st miss - add head
  111.             '______#||   |#||   O#||      #||    #||      #||#========',
  112.             // 2nd miss - add body
  113.             '______#||   |#||   O#||   |  #||   |#||      #||#========',
  114.             // 3rd miss - add one arm
  115.             '______#||   |#||   O#||  /|  #||   |#||      #||#========',
  116.             // 4th miss - add second arm
  117.             '______#||   |#||   O#||  /|\\#||   |#||      #||#========',
  118.             // 5th miss - add one leg
  119.             '______#||   |#||   O#||  /|\\#||   |#||  /   #||#========',
  120.             // 6th miss - add second leg...end of game - lost
  121.             '______#||   |#||   O#||  /|\\#||   |#||  / \\#||#========'
  122.         ];
  123.         // #'s are placeholders for line-breaks - expand them
  124.         for (var i = 0; i < states.length; i++) {
  125.             states[i] = states[i].replace( /#/g, '<br />');
  126.         };
  127.  
  128.         var b = '&nbsp;';   // global blank value
  129.         var alphas = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  130.  
  131.         var scores = [0, 0];    // running score [player, hangman]
  132.         var misses = 0;     // miss count for current round
  133.         // word has five possible states:
  134.         //     -2 ==> game not yet started even once since page (re)load
  135.         //     -1 ==> game not restarted since last round - no word chosen
  136.         //      0 ==> level has not been selected - no word choice possible
  137.         //      1 ==> all words at current level have been chosen
  138.         // String ==> word from one of the lists selected randomly by level
  139.         var word = -2;
  140.  
  141.         function drawAlphaTable() {
  142.             var t = '';
  143.             for (var i = 0; i < 2; i++) {
  144.                 t += '<tr>';
  145.                 for (var j = 0; j < 13; j++) {
  146.                     t += '<td onclick="guess( this );">' +
  147.                         alphas.charAt( 13*i + j ) + '</td>';
  148.                 }
  149.                 t += '</tr>';
  150.             }
  151.             get( 'alphabet' ).innerHTML = t;
  152.         };
  153.         function displayMsg( m ) {
  154.             // 7 blink cycles for non-blank m - blank just wipes display
  155.             var last = (b != m)?7:1;
  156.             var cmdOff = 'get("msg").innerHTML = "' + b + '"';
  157.             var cmdOn = 'get("msg").innerHTML = "' + m + '"';
  158.             for (var i = 0; i < last; i++) {
  159.                 setTimeout((1 == i%2)?cmdOff:cmdOn, 300*i);
  160.             }
  161.         };
  162.         function rptOutOfWords( level ) {
  163.             displayMsg(
  164.                 'Sorry! There are no more ' + level + ' words to play.' +
  165.                 '<br />Select another level of difficulty.'
  166.             );
  167.         };
  168.         function isAllPlayed() {
  169.             var is = true;
  170.             var levels = document.forms[0].level;
  171.             // check each radio button
  172.             for (var i = 0; i < levels.length; i++) {
  173.                 is = is && levels[i].disabled;
  174.             }
  175.             return is;
  176.         };
  177.         function rptAllPlayed() {
  178.             displayMsg('All words at all levels of difficulty have been played.' +
  179.                 '<br />Reload the page to get the same words in a different order.');
  180.             return null;
  181.         };
  182.         function getWord( f ) {
  183.             var levels = f.level;
  184.             var lIdx = -1;
  185.             var level = '';
  186.             for (var i = 0; i < levels.length; i++) {
  187.                 if (levels[ i ].checked) {
  188.                     lIdx = i;
  189.                     level = levels[ i ].value;
  190.                 };  
  191.             }
  192.             if ('' != level) {
  193.                 // increment count of words used at requested level of difficulty
  194.                 eval(level + 'Idx++');
  195.                 // determine whether any words unused remain at level
  196.                 eval('var isDone = ' + level + 'Idx >=' + level + 'Words.length');
  197.                 // if all used at level, advise user and exit
  198.                 if (isDone) {
  199.                     levels[lIdx].disabled = 'disabled';
  200.                     levels[lIdx].checked = false;
  201.                     rptOutOfWords(level);
  202.                     return 1;
  203.                 }
  204.                 // otherwise, pick next word for level
  205.                 return eval(level +'Words[ ' + level + 'Idx ].toUpperCase()');
  206.             };
  207.             return 0;
  208.         };
  209.  
  210.         function start( f ) {
  211.             displayMsg(b);  // wipe message field
  212.             if (isAllPlayed()) return rptAllPlayed();
  213.             drawAlphaTable();
  214.             get( 'gallows' ).innerHTML = states[ 0 ];
  215.             word = getWord( f );
  216.             // no more words at requested level of difficulty
  217.             if (1 == word ) return;
  218.             if (0 == word ) {
  219.                 displayMsg('You must pick a level before starting.');
  220.                 return;
  221.             }
  222.             var display = word.replace( /[A-Z]/g, '_');
  223.             get( 'word' ).innerHTML = display;
  224.         };
  225.         function guess( a ) {
  226.             displayMsg(b);  // clear message field
  227.             if (isAllPlayed()) return rptAllPlayed();
  228.             if ('string' != typeof word) {
  229.                 displayMsg('You need to start a new game before guessing!');
  230.                 return;
  231.             }
  232.             var letter = a.innerHTML;
  233.             if (b == letter) {
  234.                 displayMsg('You already guessed that - try again!');
  235.                 return;
  236.             }
  237.             var display = get( 'word' ).innerHTML;
  238.             if ( -1 != word.indexOf( letter ) ) {
  239.                 last = word.length;
  240.                 for (var i = 0; i < last; i++) {
  241.                     if (letter == word.charAt( i ))
  242.                         display = display.substring(0, i) +
  243.                             letter + display.substring(i + 1);
  244.                 }
  245.                 get( 'word' ).innerHTML = display;
  246.                 if ( word == display ) doEnd();
  247.             }
  248.             else {
  249.                 misses++;
  250.                 get( 'gallows' ).innerHTML = states[ misses ];
  251.                 if (misses == states.length - 1) doEnd( false );
  252.             }
  253.             a.innerHTML = b;
  254.         };
  255.         function doEnd( won ) {
  256.             if ('undefined' == typeof won) won = true;
  257.             if (won) {
  258.                 scores[0]++;
  259.                 displayMsg('You won!! (click start button to play again)');
  260.             }
  261.             else {
  262.                 scores[1]++;
  263.                 displayMsg('You lost...word was: ' + word +
  264.                     '.<br />(click start button to play again)');
  265.             }
  266.             get( 'scoreYou' ).innerHTML = scores[0];
  267.             get( 'scoreHangman' ).innerHTML = scores[1];
  268.             misses = 0;
  269.             word = -1;
  270.         };
  271.  
  272.         // paint "gameboard" without starting game
  273.         window.onload = function() {
  274.             drawAlphaTable( );
  275.             get( 'gallows' ).innerHTML = states[ 0 ];
  276.             var levels = document.forms[0].level;
  277.             // deset radio buttons in case page was reloaded
  278.             for (var i = 0; i < levels.length; i++) {
  279.                 levels[i].disabled = false;
  280.                 levels[i].checked = false;
  281.             }
  282.         };
  283.     </script>
  284. </head>
  285.  
  286. <body>
  287.     <form>
  288.         <p>
  289.             Difficulty Level:
  290.             <input type="radio" name="level" value="easy" /> Easy
  291.             <input type="radio" name="level" value="medium" /> Medium
  292.             <input type="radio" name="level" value="hard" /> Hard<br /><br />
  293.             <input type="button" value="Start New Game"
  294.                 onclick="start( this.parentNode.parentNode );" />
  295.         </p>
  296.     </form>
  297.     <table id="alphabet"></table>
  298.     <p>(click a letter to make a guess)</p>
  299.     <div>
  300.         <pre id="gallows"></pre>
  301.         <p>WORD: &nbsp;&nbsp;<span id="word">not yet in play</span></p>
  302.         <p id="msg">&nbsp;</p>
  303.         <h3>Cumulative Scores</h3>
  304.         <p id="score">
  305.             You: <span id="scoreYou">0</span>
  306.             &nbsp;&nbsp;&nbsp;
  307.             Hangman: <span id="scoreHangman">0</span>
  308.         </p>
  309.     </div>
  310. </body>
  311.  
  312. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!