For project 2, you will be using concepts and material given in lecture
to design and create an interactive javascript game.
The game is commonly known as Higher or Lower. There are
4 cards face down and 1 card face up.
During the player's turn, the player shall guess whether the
next face down card has a higher or lower card value. When guessed,
the next face down card is flipped over to be evaluated. If guessed
correctly, the player continues, otherwise, each face up card for the
player is replaced with a face down card.
If the flipped card has the same value, then the player's score is reset
to zero.
When the player successfully guesses all 4 cards, the player
gains a point, and all the cards are reset.
When the player reaches 3 points, output to the player that he/she has won
and display a button to reset the game.
Create a directory within your public_html to include all the files
associated for this project and label it Project2.
You will create a page that has a player division area that will
display that player's cards, an area for the "higher/lower" buttons,
and an area that will display the player's points.
Create and link a CSS file for the layout and styling. You will also
write a game engine JAVASCRIPT library which will include the functions
necessary for this game.
project2.html, project2.css, project2.js
Create a division for the player.
(ex. <div id='playerArea' class='player'>...</div>)
Within the division, the player's cards will be displayed and
player's corresponding points
Create a division for the control buttons.
Display two buttons or divs with an onclick
event for the game.
(ex. <div ... onclick="play('higher');">Higher</div> )
When the page loads, initialize a deck array of 52 Card Objects. Each Card Object will have a member variable src for the image file source and val for the corresponding card value. Ace low ... King High. Once the deck array is filled with all 52 Card Objects, shuffle the deck array.
After the deck array is shuffled, copy the first 5 Card Objects of the deck into pCards. Be sure to increment the deck's top_card counter. Assign 0 to pCurrent_card and 0.
From left to right, display the first Card Object from the pCards
array, increment pCurrent_card, and then display 4 face down cards.
Create an array of HTML elements for each
player's card images. For example:
<img name='pCardImg' ...>
<img name='pCardImg' ...>
<img name='pCardImg' ...>
<img name='pCardImg' ...>
<img name='pCardImg' ...>
...
var pCardImgs = document.getElementsByName('pCardImg');
// process pCardImg[0] .. pCardImg[4]
The player will click either "higher" or "lower".
For this explanation, we'll assume
pCards[pCrrent_card - 1] as the Card Object that represents the
face up card that is to be compared to the face down and player's
selection of "higher" or "lower".
If pCards[pCurrent_card].val is lesser than
pCards[pCurrent_card - 1].val AND selection is equal to "lower" OR
if pCards[pCurrent_card].val is greater than
pCards[pCurrent_card - 1].val AND selection is equal to "higher",
→ then change the src of
pCardImgs[pCurrent_card] to be pCards[pCurrent_card].src, and
increment pCurrent_card.
Alternatively, if the value of pCards[pCurrent_card] is the same as
pCards[pCurrent_card - 1], then reset the players points to zero and
reset the player's cards.
Otherwise, the selection was incorrect. Replace pCards[pCurrent_card]
to pCards[0] with deck[top_card], being sure to increment top_card
with each replacement. Replace pCardImgs[pCurrent_card] to
pCardImgs[1] image sources to a facedown card image, and pCardImgs[0]
image source to pCards[0] img source. Reset pCurrent_card to 1.
If the deck's top_card counter variable reaches the
value of 52, reset all the cards, shuffle the deck,
set top_card to 0, and alert to the players that the deck
has been shuffled and delt a new deal.
Next, evaluate whether the player has successfully guessed all cards
correctly. This will happen when pCurrent_card is equal to 5. If
so, update pScore and the innerHTML for player's score.
Finally, evaluate whether the player has won. If pScore is equal to 3,
output to the player that he/she has won, and display a button to
reset the cards and scores. Hide the output and button when clicked.
Details can be found here. This will not be counted towards your project 2 score. Have this proposal write up within your project 2 directory.
Implement a timer at the top of the page that will increment hr:min:sec and update each second to show the duration of the game. Stop the timer when a winner is calculated, present the time when alerting who won, then reset the timer and start again.