Title: "Game of War project"
Specifications:
Using HTML and JS, write a program that allows the human to play the card game “War” against the computer. The rules are simple: In each round, each player picks a random card from a standard 52card deck, and whoever has the higher card wins. The order of the cards are as follows, from lowest to highest: 2, 3, 4, 5, 6, 7, 8, 9, 10, J, Q, K, A. If the two chosen cards have the same rank (for example J♥ vs J♣), then that round is a tie.
Category:
Computer Science
Category:
Computer Science
Sub-Category:
Programming / Game
Programming / Game
Project Description:
1. The game included the following HTML elements:
a. A button to play a round (human and computer each get a random card).
b. An IMG element to display a picture of the player’s chosen card
c. An IMG element to display a picture of the computer’s chosen card.
d. An element to display the outcome of the current round.
e. An element to display the current score.
f. A button for the player to click to restart the entire game (this would reset the score).
2. For each round, the game generates a random integer between 0 and 51 to represent the player’s card, and another random integer between 0 and 51 to represent the computer’s card. (We are assuming that both the player and the computer get a brand new 52card deck every round.)
3. The program uses the following table to take an integer between 0 and 51, and figure out which playing card it corresponds to. Using this table, the program figures out who the winner of a round is (or if it’s a tie):
0-12: 2♠ through A♠ 13-25: 2♥ through A♥ 26-38: 2♦ through A♦ 39-51: 2♣ through A♣
4. The game uses a 52-element array to store the names of the image files corresponding to each card. For example, the 0th element is the string “0.jpg”, where 0.jpg is a picture of 2♠; the 51st element is the string “51.jpg”, where 51.jpg is a picture of A♣; and so on. Coded to use this array to display a picture of each player’s card on the page. I have created this array using a for loop.
5. After each round, the scores have been adjusted accordingly: whoever wins gets a full point. In the event of a tie, neither player gets any points (alerted the player that it was a tie).
6. Coded all processing in functions, using appropriate programming structures - output strings, decision statements, local and global variables to keep track of various information, loops, arrays, etc.
7. Written quality code, that included appropriate comments, formatting, indenting and descriptive variable names.
Tools:
HTML, JS and CSS.
a. A button to play a round (human and computer each get a random card).
b. An IMG element to display a picture of the player’s chosen card
c. An IMG element to display a picture of the computer’s chosen card.
d. An element to display the outcome of the current round.
e. An element to display the current score.
f. A button for the player to click to restart the entire game (this would reset the score).
2. For each round, the game generates a random integer between 0 and 51 to represent the player’s card, and another random integer between 0 and 51 to represent the computer’s card. (We are assuming that both the player and the computer get a brand new 52card deck every round.)
3. The program uses the following table to take an integer between 0 and 51, and figure out which playing card it corresponds to. Using this table, the program figures out who the winner of a round is (or if it’s a tie):
0-12: 2♠ through A♠ 13-25: 2♥ through A♥ 26-38: 2♦ through A♦ 39-51: 2♣ through A♣
4. The game uses a 52-element array to store the names of the image files corresponding to each card. For example, the 0th element is the string “0.jpg”, where 0.jpg is a picture of 2♠; the 51st element is the string “51.jpg”, where 51.jpg is a picture of A♣; and so on. Coded to use this array to display a picture of each player’s card on the page. I have created this array using a for loop.
5. After each round, the scores have been adjusted accordingly: whoever wins gets a full point. In the event of a tie, neither player gets any points (alerted the player that it was a tie).
6. Coded all processing in functions, using appropriate programming structures - output strings, decision statements, local and global variables to keep track of various information, loops, arrays, etc.
7. Written quality code, that included appropriate comments, formatting, indenting and descriptive variable names.
Tools:
HTML, JS and CSS.
Platforms:
Windows
Things I learned:
Learned how to use an external style sheet for styling on the pages.
Learned how to Programmatically code for different scenarios.
Learned how to use Arrays, assign and retrieve values for proccessing within the code.
Learned how to Programmatically track variables and values for different scenarios and display them at an appropriate place.
Learned how to code a reusable function.
Learned how to code for creating a custom button and change the characteristics.
Learned how to code for Standard HTML elements (a title, a header, buttons, and <div> elements).
Learned how to document code comments (including a comment before each function, code citations when appropriate, and citations for any images used).
Learned how to write a quality code that includes consistent formatting, indenting and descriptive variables.
Learned how to Programmatically code for different scenarios.
Learned how to use Arrays, assign and retrieve values for proccessing within the code.
Learned how to Programmatically track variables and values for different scenarios and display them at an appropriate place.
Learned how to code a reusable function.
Learned how to code for creating a custom button and change the characteristics.
Learned how to code for Standard HTML elements (a title, a header, buttons, and <div> elements).
Learned how to document code comments (including a comment before each function, code citations when appropriate, and citations for any images used).
Learned how to write a quality code that includes consistent formatting, indenting and descriptive variables.
Contribution:
Individual.
Individual.
Credits:
Mr. Jeremiah Moon, Computer Science Teacher.
Mr. Jeremiah Moon, Computer Science Teacher.
