,
Lab :
Except where otherwise noted, the contents of this document are
Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst.
All rights reserved.
Any redistribution, reproduction, transmission, or storage of part
or all of the contents in any form is prohibited without the author's
expressed written permission.
thanks to former TAs Victoria Kirst, Jeff Prouty, Morgan Doocy, Brian Le for their work on these labs.
Basic lab instructions
-
You may want to bring your textbook to labs to look up syntax and examples.
-
Have a question? Ask a TA for help, or look at the book or .
-
We encourage you to talk to your classmates; it's okay to share code and ideas during lab.
-
You are not expected to finish all of the exercises. Just do as much as you can in the allotted time. You don't need to finish the rest after you leave the lab.
-
Before you leave, check in with a TA to get credit for your work.
Today's lab
Today we will create a Hangman game using PHP, forms, cookies, and regular expressions.
(If you write the lab as intended, all string checks and manipulations can be done without any loops using PHP's and .)
Download provided code
-
First download the following PHP file and open it in your editor:
- Save it as
hangman.php
(not .phps).
- Open your file transfer program and connect to Webster, so you can test your code.
- Upload your hangman.php to Webster.
- Open the hangman.php in the browser so you can see your page as you write it.
Throughout this lab, you can try out our
if you want to see how it behaves.
Understanding the provided code
Take a moment to look over the provided code and understand it.
-
The HTML is already provided and some PHP code.
-
It picks a random word from a dictionary (
$word
).
-
The game state includes:
- the number of guesses remaining (
$guesses
),
- a set of letters available that can be guessed (
$available)
,
- and a clue string showing the correct letters guessed so far (
$clue
), which is computed based on $guesses
and $available
.
Use these variables in your own code.
Exercise : Remember the word
Right now the page chooses a new random word every time it is loaded.
-
Use a cookie to make the page remember the word so that it is chosen once for a given user and that same word is retained every subsequent time the page is loaded.
-
Each user should get his own word.
-
If the user closes the browser or clears their cookies, a new word will be chosen.
Recall: Debugging cookies
-
Chrome: F12 → Resources → Cookies; Firefox: F12 → Cookies
Exercise : Counting guesses
Make the page count how many guesses the user has made, using a cookie.
-
When the user types a letter and clicks Guess, it submits a form back to
hangman.php
with a GET parameter named guess
.
-
The count of guesses remaining is stored as a variable
$guesses
.
-
For now, every time the user presses the Guess button (every time that query parameter is passed), assume that the guess is "wrong" and decrease the guesses count by 1.
-
If you update
$guesses
properly every time, the Hangman image will automatically show the right stick man in the sequence.
Exercise : Remembering guessed letters
Now let's make the page remember what letters the user has guessed, using a cookie.
-
Instead of storing what letters the user has guessed, we will keep a string of the letters the user has NOT guessed yet (letters that are "available" to be guessed) as variable
$available
.
-
The
$available
is a long string that starts as "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
.
When a letter is guessed, remove it from this string by replacing it with a non-letter such as a space (" "
).
-
Use a regular expression to replace characters in strings.
-
Optional validation: If the user tries to guess a letter that has already been guessed, or something that is not a letter, ignore it and don't dock the user 1 guess.
function |
description |
preg_match(regex, string)
|
returns TRUE if string matches regex
|
preg_replace(regex, replacement, string)
|
returns a new string with all substrings that match regex replaced by replacement
|
preg_split(regex, string)
|
returns an array of strings from given string broken apart using given regex as delimiter (like explode but more powerful)
|
Exercise : Count guesses properly; end of game
Make the game more robust by adding the following code, using a regular expression:
-
If the user guesses a letter that is part of the word, it is a correct guess, so do not reduce their guesses count.
-
If the letter guessed is NOT part of the word, reduce the count of guesses by 1.
-
End of game (optional): Once the user has 0 guesses left, don't allow further guesses to be made.
Show a "game over" message in a
div
with the id
of lose
.
Exercise : Generate clues
-
A variable
$clue
is set to store a "clue string" revealing the letters he/she has guessed correctly so far. Right now it is just set to "???".
-
Make the clue string show successfully guessed letters as themselves, and show ? for unguessed letters.
-
Use a regular expression to combine the word (
$word
) with the guesses the user has made ($available
).
-
(Hint: If you do it cleverly, you can do it in a single line with just one regex function call!)
Exercise : New Game logic
Now let's make it so that the user can start a new game.
-
When the user clicks New Game, the form POSTs back to
hangman.php
with a newgame
query parameter set to true
.
-
Write code that looks for this parameter, and if it is set, starts the game state over and chooses a new random word.
-
Be careful to update all of your cookies properly!
Exercise : Letter guess buttons (for l33t H4x0rz)
The UI for making guesses is a clunky text box.
-
Replace it with 26 letter buttons, pressing each of which guesses the corresponding letter.
-
Hint: Each letter button must contain its own
form
.
Put the forms into a div
with id
of letters
(so our CSS file will style them).
- If you are really awesome, make the letters gray out (disable) when they have already been guessed or when the game is over.
- (While you're at it, delete the "hint" area that tells the player the right word and other debug info.)
If you finish them all...
If you finish all the exercises, you can add any other content or code you like to your page.
If the lab is over or almost over, check with a TA and you may be able to be dismissed.
If you want a few extra problems to work on, there are some bonus regex problems on the next two slides.
Great work!
Exercise : Regular Expressions 1
Write a regular expression () that would match the following kinds of patterns.
You can use the site to test your regex.
(You don't have to complete all of them, but do a few to get the idea.)
-
All lines that start with either 'q' or 's', and that also contain a double z ('zz') later within the same word on that line.
()
()
-
All lines that contain a string of at least 5 vowels (a, e, i, o, or u) in a row.
()
()
-
Lines that are at least 25 characters long.
()
()
-
Lines that end with two or more occurrences of "?!", as in, "Huh?!?!"
()
()
Exercise : Regular Expressions 2
Write a regular expression () that would match the following kinds of patterns.
You can use the site to test your regex.
(You don't have to complete all of them, but do a few to get the idea.)
-
a valid amount for a US coin: 1, 5, 10, 25, or 50 cents
()
()
-
an IP address, of the format 128.208.3.88 (accept any 3-digit numbers between the dots)
()
()
-
strings that contain at least 3 words, each separated by one or more spaces
()
()
-
lines that contain a quotation with "quote marks" around it
()
()