CS2 JavaScript Project 2024 🎰

Task 0: Double click your "CS2" folder on your desktop, and create (or enter) your folder for JavaScript. Then, create a new folder inside called JavaScript Project. All your files for the project should live in this folder.

Task 1: Begin by downloading the stencil here.

This project consists of four files:

1. index.html
2. donsCasino.js
3. donsCasino.css
4. stencil.js

Put all downloaded files into your JavaScript folder. This is the folder you will zip at the end of the assignment to turn in on Canvas.

To view what the casino looks like, simply open your index.html file in Chrome.

Task 2: Drawing the Poker Chip
Open stencil.js. Begin by drawing red poker chips at location x=1, y=1. “Drawing” the poker chips is equivalent to placing a red square on the maze. Once you have completed this task, you should see a red square in the top left corner of the casino maze.

Task 3: Restarting an Order
Fill in the restart() function in stencil.js. To add the restart button functionality, you will need to write code in the function that reloads the whole page when the maze is restarted.

Remember to add an event listener for the restart button! This should be done at the bottom of the stencil file in the event handlers section. Think back to the Document Object Model that we learned in lab. What is the ID for the restart button in the HTML file?

Task 4: Delivering Poker Chips to a Dealer
Add the ability to control the poker chips with the arrow keys by filling in the keyDown function and adding an event listener. This has two main components:

1. The chips should be able to move with the 4 arrow keys in their respective directions. This will consist of 4 conditionals, 1 for each key event. You can use this website to find out which key maps to which keyCode value. To check a keycode value (in an if statement, for example), you’d write something like this:

if (keyCode === 38) {
    chip.moveUp();
}

2. You will also have to add an event listener to the window corresponding to the function you just wrote. See this link for examples of how to use the keydown listener in JavaScript.

   Here’s an example of adding a listener to the window that listens to the function doSomething when keys are pressed:

window.addEventListener('keydown', doSomething);

Task 5a: Changing the Casino Background
When the "New Casino" button is clicked, the casino background should be changed to a random color.

Recall that we have provided both a changeCasinoBackground() and a getRandomColor() function.

Task 5b: Changing the Poker Chip values:
When the "New Poker Chip" button is clicked, the chips should be changed to a random color. This should look very similar to the function in Task 5a!

Task 6: Delivering Your Order
Try solving your maze! Once your poker chip square reaches the end of the maze, a popup should appear that reads “Congrats! You succesfully delivered the chips!” This is already implemented for you.

3 points: Add an extra button with JavaScript functionality of your choice.

This would require you to change the index.html file to add a button and id. Your chosen functionality must be sufficiently different from the project requirements (e.g. a button to make the background blue wouldn't count), and it MUST use some sort of Javascript. It cannot just link to a website (this can be done in HTML). Some ideas are:

• Add an image and make it appear/disappear
• Add a media file, like audio and video, and control it with a button
• Add text and make it appear/disappear

2 Points: Add a score tracker. This would require you to add an element to the index.html file that displays the number of steps your chip has taken in the format “Score: x” where x is the number of key strokes made to solve the maze. You would need a score counter variable in your Javascript file that increments every time you move your poker chip.