VPSI CODERS

Project1027 - Create a Game using HTML, CSS, & JAVASCRIPT (Clicker Game)

Welcome to Teacher AJ's Coders Class! Today, you will learn how to code and create a game using HTML/CSS/Javascript. Specifically, we will be creating a clicker game. Don't worry about memorizing the code; the focus is on making sure the code works when you open it in your preferred browser, such as Google Chrome, Safari, or Firefox.

Follow these steps to get started:

1. Create a folder and name it "<YourName_Projects>". It's important to follow this naming convention so that Teacher AJ can easily check your work.

2. Inside the "<YourName_Projects>" folder, create another folder and name it "<clicker>".

3. Open Notepad++ (or any other text editor of your choice) and create a new blank file.

4. Copy the HTML code provided below and paste it into your Notepad++ file.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>iClick</title> 
<link href="style.css" rel="stylesheet" type="text/css"/> 
<link rel="icon" type="image/png" sizes="32x32" href="Images/favicon.png"> 
</head>

<div id="info"> 
<p id="appleCounter">Apples = <span id="showApples" class="number">0</span></p>

<p>Apples per second = <span id="showApplesPerSecond" class="number">0</span></p>

<p>Apples per click = <span id="showApplesPerClick" class="number">1</span></p>

<div class="itemContainer"> 
<div class="item"> 
<div class="containerImage"> 
<img src="https://iclick--bookie0.repl.co/Images/Items/iPhone.webp" id="iPhoneImage" class="itemImage" style="width:100px;height:170px;">

<div class="containerText"> 
<p>iPhones: <span id="iPhoneNum">0</span></p>

<p>iPhone cost: <span id="iPhoneCost">10</span></p>

<p>+1 Apples per second</p>
</div>
</div>

<div class="containerText"> 
<p>iPads: <span id="iPadNum">0</span></p>

<p>+1 Apples per click</p>
</div>
</div>

<div class="containerText"> 
<p>Apple Pens: <span id="penNum">0</span></p>

<p>Apple Pen cost: <span id="penCost">200</span></p>

<p>+100 Apples per second</p>
</div>
</div>

<div class="containerText"> 
<p>AirPods: <span id="airPodsNum">0</span></p>

<p>AirPods cost: <span id="airPodsCost">500</span></p>

<p>+100 Apples per click</p>
</div>
</div>
</div>

<p>+1000 Apples per second</p>
</div>
</div>

<div class="containerText"> 
<p>iMacs: <span id="iMacNum">0</span></p>
 
<p>iMac cost: <span id="iMacCost">1,000,000</span></p>

<p>+10,000 Apples per click</p>
</div>
</div>

<div class="containerText"> 
<p>Apple Stores: <span id="appleStoreNum">0</span></p>

<p>Apple Store cost: <span id="appleStoreCost">10,000,000</span></p>

<p>+100,000 per second</p>
</div>
</div>

<div class="containerText"> 
<p>Steve Jobs: <span id="steveJobsNum">0</span></p>

<p>Steve Jobs cost: <span id="steveJobsCost">1,000,000,000</span></p>

<p>+1,000,000 Apples per click</p>
</div>
</div>
</div>
</center>
</body>
</html>

5. Go to File > Save As and rename the file "<index.html>". Navigate to your desktop, open the "<clicker>" folder, and click "Save".

6. Copy the CSS code provided below and paste it into your Notepad++ file.

body, html {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* font family */
    background-color: #eeeeee;
}

* {
  box-sizing: border-box; /* includes padding + border in element's total width + height */
}

/* big apple logo to click */
#clickButton {
    width: 300px;
    height: 350px;
    transition-duration: 0.3s;
    box-shadow: 0 4px 8px 0 #3188cc;
    border-radius: 8px;
    margin-top: 60px;
    cursor: pointer; 
}

/* when you hover over it, box shadow color will change, and it'll rounder */
#clickButton:hover {
    transition-duration: 0.5s;
    box-shadow: 0 4px 8px 0 #979797;
    border-radius: 15px;
}

/* when you click it, box shadow color will change again, it'll be even more rounder, and will go a bit bigger */
#clickButton:active {
    box-shadow: 0 4px 8px 0 #666666;
    border-radius: 20px;
    -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1); 
  transform: scale(1.1); 
}

/* div with all the information (apples, apples per second, apples per click) */
#info {
    margin-top: 30px;
    font-size: 20px;
    margin-bottom: 50px;
}

#appleCounter {
    font-size: 25px;
    font-weight: bold;
}

.number {
    color: #3188cc;
}

#gameOver {
    font-size: 30px;
    color: #3188cc;
    font-style: italic;
}

/* contains all the items that can be bought */
.itemContainer {
  display: flex; /* using flexbox to align items */
  flex-wrap: wrap; /* to force items on multiple lines */
}

/* each individual item */
.item {
  padding: 10px; /* some spacing around */
  flex: 25%; /* to put 4 items on each line (100/4 = 25) */
}

/* each item image */
.itemImage {
    height: 20%;
    width: 20%;
}

/* contains information about each item */
.containerText {
    font-size: 16px;
  text-align: center;
}

/* contains buy button */
.buyButtonContainer {
    margin-top: 20px;
}

/* button to buy item */
.buyButton {
    cursor: pointer;
    text-align: center;
    background: #0071e3;
    color: #fff;
    font-size: 17px;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    padding-left: 11px;
    padding-right: 11px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 12px;
    border: none;
}

/* on hover, makes button a bit lighter */
.buyButton:hover {
    opacity: 0.7;
}

/* for smaller screens (eg: phones) */
@media (max-width: 800px) {
  .item {
    flex: 100%; /* makes one item on each line */
  }
}

7. Go to File > Save As and rename the file "<style.css>". Navigate to your desktop, open the "<clicker>" folder, and click "Save".

8. Copy the JavaScript code provided below and paste it into your Notepad++ file.

// all the variables
var apples = 0;
var applesPerSecond = 0;
var applesPerClick = 1;

// costs of items
var iPhoneCost = 10;
var iPadCost = 10;
var airPodsCost = 500;
var penCost = 200;
var macCost = 10000;
var iMacCost = 1000000;
var appleStoreCost = 10000000;
var steveJobsCost = 1000000000;

// how many items you have
var iPhones = 0;
var iPads = 0;
var airPods = 0;
var pens = 0;
var macs = 0;
var iMacs = 0;
var appleStores = 0;
var steveJobs = 0;

// function that gets called when you click the apple logo
function increment() {
    apples += applesPerClick; // adds the number of apples per click to your total apples
    document.getElementById("showApples").innerText = apples; // uses DOM to change the number of apples in the HTMl

if (apples >= 7800000000) // if it's higher than world population
    {
        document.getElementById("gameOver").innerText = "You won the game! Apple dominates the Earth!"
    }
}

// function that happens every second
setInterval(function() {
    apples += applesPerSecond; // adds the number of apples per second to your total apples
    document.getElementById("showApples").innerText = apples; // uses DOM to change the number of apples in the HTML
}, 1000) // every second (1000 milliseconds)

// different functions for each item
function buyIPhone() {
    if (apples >= iPhoneCost) // checks if you have enough apples
    {
        apples -= iPhoneCost; // subtracts cost apples 
        document.getElementById("showApples").innerText = apples;
        iPhones++; // increments number of that item 
        document.getElementById("iPhoneNum").innerText = iPhones;
        iPhoneCost *=2; // doubles price of that item 
        document.getElementById("iPhoneCost").innerText = iPhoneCost;
        applesPerSecond += 1; // increases number of apples per second
        document.getElementById("showApplesPerSecond").innerText = applesPerSecond;    
    
    }    else { // if there enough apples
        alert("You don't have enough Apples!") 
    }
}

// different functions for each item
function buyIPad() {
    if (apples >= iPadCost) { // checks if you have enough apples
        apples -= iPadCost; // subtracts cost apples 
        document.getElementById("showApples").innerText = apples;
        iPads++; // increments number of that item // increments number of that item // increments number of that item // increments number of that item
        document.getElementById("iPadNum").innerText = iPads;
        iPadCost *=2; // doubles price of that item
        document.getElementById("iPadCost").innerText = iPadCost;
        applesPerClick += 1; // increases number of apples per click
        document.getElementById("showApplesPerClick").innerText = applesPerClick;
    
    } else { // if there enough apples
        alert("You don't have enough Apples!")
    }
}

// different functions for each item
function buyPen() {
    if (apples >= penCost) // checks if you have enough apples
    {
        apples -= penCost; // subtracts cost apples 
        document.getElementById("showApples").innerText = apples;
        pens++; // increments number of that item // increments number of that item // increments number of that item // increments number of that item
        document.getElementById("penNum").innerText = pens;
        penCost *=2; // doubles price of that item
        document.getElementById("penCost").innerText = penCost;
        applesPerSecond += 100; // increases number of apples per second
        document.getElementById("showApplesPerSecond").innerText = applesPerSecond;

} else { // if there enough apples
        alert("You don't have enough Apples!")
    }
}

function buyAirPods() { // different functions for each item
    if (apples >= airPodsCost) { // checks if you have enough apples
        apples -= airPodsCost; // subtracts cost apples 
        document.getElementById("showApples").innerText = apples;
        airPods++; // increments number of that item
        document.getElementById("airPodsNum").innerText = airPods;
        airPodsCost *=2; // doubles price of that item
        document.getElementById("airPodsCost").innerText = airPodsCost;
        applesPerClick += 100; // increases number of apples per click
        document.getElementById("showApplesPerClick").innerText = applesPerClick;

}    else { // if there enough apples
        alert("You don't have enough Apples!")
    }

}

function buyMac() {
    if (apples >= macCost)
    {
        apples -= macCost;
        document.getElementById("showApples").innerText = apples;
        macs++; // increments number of that item
        document.getElementById("macNum").innerText = macs;
        macCost *=2; // doubles price of that item
        document.getElementById("macCost").innerText = macCost;
        applesPerSecond += 1000; // increases number of apples per second
        document.getElementById("showApplesPerSecond").innerText = applesPerSecond;

}    else { // if there enough apples
        alert("You don't have enough Apples!")
    }
}

function buyAppleStore() {
    if (apples >= appleStoreCost) {
        apples -= appleStoreCost;
        document.getElementById("showApples").innerText = apples;
        appleStores++; // increments number of that item
        document.getElementById("appleStoreNum").innerText = appleStores;
        appleStoreCost *=2; // doubles price of that item
        document.getElementById("appleStoreCost").innerText = appleStoreCost;
        applesPerSecond += 100000; // increases number of apples per second
        document.getElementById("showApplesPerSecond").innerText = applesPerSecond;

}    else { // if there enough apples
        alert("You don't have enough Apples!")
    }
}

9. Go to File > Save As and rename the file "<script.js>". Navigate to your desktop, open the "<clicker>" folder, and click "Save".

10. Finally, navigate to your folder and test it. Open the "index.html" file in your preferred browser and check if your game is working properly.

This way, you'll be able to follow along and create your own clicker game using HTML, CSS, and JavaScript. Good luck, and have fun coding!