iMajin LLC

Adding Coins!

Let’s Add Some Coins!

Adding coins and power-ups can make your game more fun and engaging! How else are you going to set a top score for your friends to beat?

Step 1: Update Your HTML File

First, we’ll update your HTML file to include a link to our new stylesheet for coin styles. Since you already have a link to “style.css” in the “head” element of your HTML file, we’ll just add a new link to “animations.css” right below it.

Add this line of code under the “style.css” link:


    <link rel="stylesheet" type="text/css" href="rsc/css/animations.css">

Step 2: Add Styles to animations.css

Next, we’ll add the styles for the coin. If you haven’t already, create a new file named “animations.css” and add the following styles:

  
    @charset "utf-8";
    /* CSS Document */
    
    /* Style for the coin element */
    .coin {
    width: 20px; /* Set the width of the coin */
    height: 20px; /* Set the height of the coin */
    background-image: url('path/to/coin-image.png'); /* Replace with your coin image */
    background: gold;
    border: 1px solid black;
    border-radius: 50px;
    background-size: cover; /* Make sure the image covers the element */
    position: absolute; /* Position it absolutely within the container */
    animation: spin 2s linear infinite; /* Apply the spin animation */
    }
    
    /* Keyframes for spinning animation */
    @keyframes spin {
    from {
    transform: rotateY(0deg);
    }
    to {
    transform: rotateY(360deg);
    }
    }

Step 3: Update Your JavaScript File

Finally, we need to update your JavaScript file with the code for the coins. Follow these steps:

  1. Click the link below to access the updated JavaScript code.

  2. Press Ctrl + A to select all the code, then Ctrl + C to copy it.
  3. Open your “dash.js” file, press Ctrl + A to select everything, then Ctrl + V to paste the updated code.
  4. Press Ctrl + S to save the file.
  5. Refresh your game in the browser to see if everything worked!

And that’s it! You’ve added coins to your game. Now, go ahead and set a top score for your friends to beat!

Next