Topics and Learning Objectives
- Core Programming Concepts
- Variables and Datatypes
- Numbers and Math
- Math.random() and other Math object methods
- Comparison and Logical Operators
- If/Then Conditional Logic and Decision Making
Tasks
- Complete Exercise # 1 (due 9/3) and participate in the Exercise #1 - Canvas Drawings Review and Reflection discussion
- If you have not yet do so, create your "codeLibrary" folder on the MAT server and add at least one file to it to get it started. See the introduction to the code library video below for more information.
- Read Chapter 3 on Functions (pp. 85 - 99) and Chapter 4 on Decisions (pp. 145 - 169) in the JavaScript & jQuery textbook by John Duckett (available for free through O'Reilly Books Online)
- On Codecademy.com, complete the Introduction to JavaScript - Conditional Statements module (as per below)
- Complete Quiz #2 (by 9/10) - Covers the Week #3 topics/videos
- Reivew Exercise # 2 (due 9/24). Specific tutorials for this exercise will be provided in next week's module. But, the videos this week review the core concepts applied in the exercise.
- View the Week #3 Videos and Tutorials below
Recommended and/or supplemental tasks
Review of the following documentation from the Mozilla Developer Network is recommended:
Videos and Tutorials
Introduction to Exrercise #2, my videos, and the codeLibrary
Linting and JavaScript Linting Errors in Dreamweaver (optional for Dreamwever users or others wanting to learn about linting and the ESLint extension)
Variables and Values
Numbers and Math
- Numbers and Math, Part 1 (15:13)
The Number data type, arithmetic operators, modulus, increment/decrement
- Numbers and Math, Part 2 (25:20)
Operator precedence, Number methods, NaN, converting between strings and numbers
- Numbers and Math, Part 3 (24:32)
Math object methods, Math.random(), simulating dice rolling
Conditional Logic and Decision Making
- Conditionals - If Else Statements, Part 1 (21:00)
If, else if, else conditional statements, program flow, comparison operators
- Conditionals - If Else Statements, Part 2 (15:50)
Logical operators, compound/complex logic, what evaluates to true and false
- Conditionals - The Conditional (?) Operator, Part 3 (optional) (12:50)
The conditional operator (aka ternary opearator) shorthand, plus using Date() and setting page background colors through JS
Codecademy - Interactive Tutorials
Exercise #2: SIMULATE THE GAME OF CRAPS (Due 9/24)
Rules of the game:
In the game of Craps, a "Pass Line" bet proceeds as follows. Using two six-sided dice, the first roll of the dice in a craps round is called the "Come Out Roll." The bet immediately wins when the come out roll is 7 or 11, and loses when the come out roll is 2, 3, or 12. If anything else is rolled (4, 5, 6, 8, 9, or 10) on the come out roll, that number becomes "the point." The player keeps rolling the dice until either 7 or the point is rolled. If the point is rolled first, then the player wins. If the player rolls a 7 first, then the player loses.
Your basic task (the threshold for a 'C'):
Write a JavaScript program that plays the game of craps using the rules stated above. The program should simulate a game and calculate if the player would win or lose.
1) Simulate one game of craps correctly and output the come out roll, the point roll (the final point roll, if there is one), and result of the game (if the player won or lost).
Include some styling (using CSS and/or JS) so that the output and interface is reasonably attractive and the game doesn't just output to console (such as representing the dice as images, styling the text output, or creating a visual interface for the game).
Even better (the threshold for a 'B'):
2) Make this interactive so that a user can play (i.e. initiate the dice roll and/or set a bet amount).
Better still (the threshold for an 'A'):
3) Make the UX and/or UI really nice. Make the user interface (UI) nice through graphic design, imagery/graphics, and CSS styling. Make the user experience (UX) nice through interaction design, such as providing engaging interactivity, user feedback, using animation to convey dice rolls or other activity, and generally creating a pleasant 'playing' experience.
Even better again (to the point of potential extra credit):
4) Allow a choice to "Simulate 1000 games" of craps based on $10 wagers and a $1000 starting bankroll and track/output the number won, the number lost, and the amount of money left in the bank roll after the 1000 games.
5) In addition to #4 above, create/draw a graph that tracks the bankroll across all 1000 games, updating the graph with each roll. (i.e. visualize the data).
6) Or, do other stuff... Such as simulating 10,000 games and computing the probability of winning (i.e. Wins / (Wins + Losses). Or do something else... fork the idea, take it in a different direction. Create a different game even.
Finally, turn in your exercise and reflect upon it:
Create an "exercise2" folder within your "Lastname_Firstname" folder on the mat server. Upload your webpage(.html/.css) and JavaScript(.js) files to this folder on the server. See FTP Information for details.
Once you've completed your exercise, participate in the Exercise #2 Review and Reflection Discussion in Canvas.
To follow along with the videos tutorials, you are welcome to use my dice imagery as graphic resources (dice.zip).
LINKS & Resources
> Go to Top