hangman2.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Hangman (again)</title>
   5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   6     <style type="text/css">
   7       /* Slideshow styles */
   8       body {
   9         font-size: 20px;
  10       }
  11       h1, h2, h3 {
  12         font-weight: 400;
  13         margin-bottom: 0;
  14       }
  15       h1 { font-size: 3em; }
  16       h2 { font-size: 2em; }
  17       h3 { font-size: 1.6em; }
  18       a, a > code {
  19         text-decoration: none;
  20       }
  21       code {
  22         -moz-border-radius: 5px;
  23         -web-border-radius: 5px;
  24         background: #e7e8e2;
  25         border-radius: 5px;
  26         font-size: 16px;
  27       }
  28       .plaintext {
  29         background: #272822;
  30         color: #80ff80;
  31         text-shadow: 0 0 20px #333;
  32         padding: 2px 5px;
  33       }
  34       .ciphertext {
  35         background: #272822;
  36         color: #ff6666;
  37         text-shadow: 0 0 20px #333;
  38         padding: 2px 5px;
  39       }
  40       .indexlink {
  41         position: absolute;
  42         bottom: 1em;
  43         left: 1em;
  44       }
  45        .float-right {
  46         float: right;
  47       }
  48     </style>
  49   </head>
  50   <body>
  51     <textarea id="source">
  52
  53 # Hangman
  54
  55 1. **Set a puzzle** &lt;== here
  56 2. Guess a word
  57 3. Automatic player
  58 4. Better strategies
  59
  60 ---
  61
  62 layout: true
  63
  64 .indexlink[[Index](index.html)]
  65
  66 ---
  67 # Data for Hangman
  68
  69 ## Creating a game
  70 * 'List' of words to choose from
  71     * Pick one at random
  72
  73 ## Game state
  74
  75 <table>
  76 <tr valign="top">
  77 <th>Data</th>
  78 <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
  79 <th>Operations</th>
  80 </tr>
  81 <tr valign="top">
  82 <td>
  83
  84 * Target word
  85 * Discovered letters
  86     * In order in the word
  87 * Lives left
  88 * Wrong letters?
  89
  90 </td>
  91 <td></td>
  92 <td>
  93
  94 * Get a guess
  95 * Update discovered letters
  96 * Update lives
  97 * Show discovered word
  98 * Detect game end, report
  99 * Detect game win or loss, report
 100
 101 </td>
 102 </tr>
 103 </table>
 104
 105 ---
 106
 107 # Next steps
 108
 109 We've got a list of valid words.
 110
 111 * How to pick one?
 112     * look in the `random` module
 113
 114 * Once we have a word, how to represent what's been guessed?
 115
 116 ---
 117
 118 # Representing the game state
 119
 120 Three data items:
 121
 122 * `target`, the target word: a `string`
 123 * `discovered`, what's been found so far: a `list` of letters (each a length-one `string`)
 124     * unguessed letters are `_`
 125 * `guess`, the letter that's just been guessed: a length-one `string`
 126 * `lives`, the lives remaining: an `int`
 127 * `wrong_letters`, the incorrect guesses: a `list` (optional)
 128     * (but it makes the automated players easier if they don't have to track wrong guesses and therefore be made stateless)
 129
 130 ---
 131
 132 # Challenges
 133
 134 1. Print a `discovered` word
 135 2. Read a letter
 136 3. Check if the `guess`ed letter is in the `target`
 137 4. Update `discovered` word with the newly-`guess`ed letter
 138 5. Update `lives` and `wrong_letters` if the guess is wrong
 139
 140 ## Hints
 141
 142 1. Remember `<string>.join(<list>)` ?
 143 2. `input('prompt')` (or `input('prompt').strip().lower()[0]` )
 144 3. Walk over `target`, looking for `guess`. Explicit iteration (`for letter in target:`) or with a comprehension (`enumerate(target)`)
 145 4. `target[n] = guess`. Note that you need the numerical position, and you need all the positions for repeated words.
 146 5. How do you know the guess is wrong?
 147
 148
 149     </textarea>
 150     <script src="http://gnab.github.io/remark/downloads/remark-0.6.0.min.js" type="text/javascript">
 151     </script>
 152
 153     <script type="text/javascript"
 154       src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&delayStartupUntil=configured"></script>
 155
 156     <script type="text/javascript">
 157       var slideshow = remark.create({ ratio: "16:9" });
 158
 159       // Setup MathJax
 160       MathJax.Hub.Config({
 161         tex2jax: {
 162         skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
 163         }
 164       });
 165       MathJax.Hub.Queue(function() {
 166         $(MathJax.Hub.getAllJax()).map(function(index, elem) {
 167             return(elem.SourceElement());
 168         }).parent().addClass('has-jax');
 169       });
 170       MathJax.Hub.Configured();
 171     </script>
 172   </body>
 173 </html>