DEV Community: Petrina Ropra

JavaScript Text Adventure Game

Petrina Ropra — Thu, 20 Jun 2024 04:54:33 +0000

Intro: This is a small text adventure game created with JavaScript, HTML5, and CSS.

Demo link: https://youtube.com/shorts/F167r8qaQok?feature=share

Note: This could have been done with fewer lines of code. Anyway you take it and do as you please

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>the Old Forest</title>
    <link rel="stylesheet" href="a_new_world.css">
</head>
<body>
    <div id="stage">
        <h1>the Old Forest</h1>
        <img src="" width="400" height="367">
        <p id="output"></p>
        <input id="input" type="text" placeholder="Enter your action...">
        <button>enter</button>
    </div>
    <script src="a_new_world.js"></script>
<body>
</html>

*
{
  font-family: Merriweather;
  font-size: 15px;
  color: #000;  
  padding: 0px;
  margin: 0px;
}

@font-face 
{
  font-family: Merriweather;
  src: url("C:/Users/petix/AppData/Local/Microsoft/Windows/Fonts/Merriweather-Regular.ttf");
}

@font-face 
{
  font-family: Merriweather-Bold;
  src: url("C:/Users/petix/AppData/Local/Microsoft/Windows/Fonts//Merriweather-Bold.ttf");
}

@font-face 
{
  font-family: Ginga;
  src: url("C:/Users/petix/AppData/Local/Microsoft/Windows/Fonts//Ginga.ttf");
}

h1
{
  text-align: center;
  font-family: Ginga;
  font-size: 80px;
  padding-bottom: 10px;
  padding-top: 20px;
  font-weight: normal;
}
em
{
  font-size: 14px;
}
p
{
  width: 300px;
  margin: 0px auto;
}

img
{
  margin: 0px auto;
  display: block;
  margin-bottom: 20px;
}

input
{
  position: absolute;
  bottom: 30px;
  left: 135px;
  width: 160px;
  padding: 2px 2px 2px 5px;
  border: 1px solid black;
  background-color: rgba(255,255,255,0.3);
  -webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
    box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
  margin-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

button
{
  position: absolute;
  bottom: 30px;
  left: 310px;
  height: 25px;
  width: 50px;

  font-family: Merriweather;
    font-size: 14px;
    color: #000;
    border: 1px solid #000;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;    

    background:-webkit-linear-gradient(top, rgba(255,255,255,0.6), rgba(0,0,0,0.2));
    background:-moz-linear-gradient(top, #a3a3a3, rgba(0,0,0,0.2));
    background: linear-gradient(top, #a3a3a3, rgba(0,0,0,0.2));

    -webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
    box-shadow: 3px 3px 5px rgba(0,0,0,0.4);

    -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: block;
  margin: 10px auto 0 auto;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}


#stage
{
  width: 500px;
  height: 700px;
  background-color: gray;
  position: relative;
  background-image: url("C:/Users/petix/Downloads/page1.png");
  text-align: center;
  padding-bottom: 50px;
}

// Create the map
var map = [];
map[0] = "An old stone keep.";
map[1] = "A deep well.";
map[2] = "A sunny glade.";
map[3] = "A sleeping dragon.";
map[4] = "A narrow pathway.";
map[5] = "A bridge.";
map[6] = "An ancient gate.";
map[7] = "The edge of a river.";
map[8] = "A lonely wooden bench.";
map[9] = "An isolated cottage. Faint music comes from inside.";

// Set the player's start location
var mapLocation = 4;

// Set the images
var images = [];
images[0] = "keep.jpg";
images[1] = "well.jpg";
images[2] = "glade.jpg";
images[3] = "dragon.jpeg";
images[4] = "path.jpg";
images[5] = "bridge.jpg";
images[6] = "gate.jpg";
images[7] = "river.jpg";
images[8] = "bench.jpg";
images[9] = "cottage.jpg";

// Set the new images for when riddles are solved
var solvedImages = [];
solvedImages[0] = "solved_bridge.png"; // Image after solving the first riddle
solvedImages[1] = "solved_river.png";  // Image after solving the second riddle
solvedImages[2] = "solved_dragon.jpeg"; // Image after solving the third riddle

// Set the blocked-path messages
var blockedPathMessages = [];
blockedPathMessages[0] = "The path is blocked by thick brambles.";
blockedPathMessages[1] = "A steep cliff prevents you from going east.";
blockedPathMessages[2] = "The path is flooded and impassable.";
blockedPathMessages[3] = "A large boulder blocks your way.";
blockedPathMessages[4] = "A landslide blocks the path.";
blockedPathMessages[5] = "The way is blocked by a raging fire.";
blockedPathMessages[6] = "The path is covered in ice.";
blockedPathMessages[7] = "A magical barrier blocks your way.";
blockedPathMessages[8] = "A fallen tree blocks the path.";

var riddleSolved = [false, false, false]; // Track which riddles have been solved
var riddleAttempts = [3, 3, 3]; // Track remaining attempts for each riddle

//sets the text that is displayed when the user is at the riddle location
var riddleLocationMessages = [];
riddleLocationMessages[0] = "A huge troll stands in the middle of the bridge blocking your way to the other side. He asks you a riddle.";
riddleLocationMessages[1] = "An eerie looking water nymph stands in the river and prevents you from moving with her magical powers.<br>She asks you a riddle.";
riddleLocationMessages[2] = "You are now in an old castle standing before a dragon sleeping on treasure. A sinister dwarf appears before you and asks you a riddle.";

// Set the positive fate Messages
var positiveFateMessages = [];
positiveFateMessages[0] = "<br>" + "The troll disappears. Now you can walk safely over the bridge.";
positiveFateMessages[1] = "<br>" + "The river nymph disappears.";
positiveFateMessages[2] = "You are suddenly transported back home safely standing in your backyard.";

//set the negative fate messages
var negativeFateMessages = [];
negativeFateMessages[0] = "The troll stomps on the bridge and the bridge broke sending you into the fast-flowing river.";
negativeFateMessages[1] = "The river nymph calls for her other friends and they drown you in the river.";
negativeFateMessages[2] = "The dwarf steals a golden goblet from the dragon and disappears. The dragon wakes up, sees you, and burns you to a crisp.";

// Create the riddles and set their locations
var riddles = [];
riddles[0] = "<em><br>Riddle: Walk right through me, never feel me. Always lurking, never seen. What am I?</em>";
riddles[1] = "<em>Riddle: What always runs but never walks,<br>has a bed but never sleeps?</em>";
riddles[2] = "<em>Riddle: I am always hungry, I must always be fed,<br>The finger I touch will soon turn red.</em>";
var riddleLocations = [5, 7, 3];


var gameLost = false;
var answeredRight = false;

// Create an array of correct answers for the riddles
var riddleAnswers = ["air", "river", "fire"];

// Initialize the player's input
var playersInput = "";

// Initialize the gameMessage
var gameMessage = "";

// Create an array of actions the game understands
// and a variable to store the current action
var actionsIKnow = ["north", "east", "south", "west"];
var action = "";

// An array of items the game understands
// and a variable to store the current item
var answer = "";

// The img element
var image = document.querySelector("img");

// The input and output fields
var output = document.querySelector("#output");
var input = document.querySelector("#input");

// The button
var button = document.querySelector("button");
button.style.cursor = "pointer";
button.addEventListener("click", clickHandler, false);

// Display the player's location
render();

//when the button is pressed this fucntion is called
function clickHandler() {
    playGame();
}

//create a function called playGame
function playGame() {
    // Get the player's input and convert it to lowercase
    playersInput = input.value.toLowerCase();

    // Reset these variables from the previous turn
    gameMessage = "";
    action = "";
    answer = "";

    // Figure out the player's action
    for (var i = 0; i < actionsIKnow.length; i++) {
        if (playersInput.indexOf(actionsIKnow[i]) !== -1) {
            action = actionsIKnow[i];
            break;
        }
    }

    // Figure if the player answered the riddle correctly
    for (var i = 0; i < riddleAnswers.length; i++) {
        if (playersInput.indexOf(riddleAnswers[i]) !== -1) {
            //if the user answers the riddle correctly then
            //the answer variable gets one of the riddle answers 
            answer = riddleAnswers[i];
        }
    }

    // if the player arrives at a riddle location and if it's not solved
    if (riddleLocations.includes(mapLocation) && !riddleSolved[riddleLocations.indexOf(mapLocation)]) {
        //get the index of the riddle location
        var riddleIndex = riddleLocations.indexOf(mapLocation);
        //if the player answered the riddle correctly
        if (answer === riddleAnswers[riddleIndex]) {
            //display a positive fate message
            gameMessage = positiveFateMessages[riddleIndex];
            //mark the riddle as solved
            riddleSolved[riddleIndex] = true;
            riddles[riddleIndex] = ""; // Remove the riddle
            riddleLocationMessages[riddleIndex] = ""; // Remove the riddle location message
            images[mapLocation] = solvedImages[riddleIndex]; // Change the image
            if (riddleIndex === 2) { // Check if the final riddle is solved
                //answeredRight gets true as its value
                answeredRight = true;
            }
        } else {
            //if the player gives a wrong answer attempt will be decreased by one
            riddleAttempts[riddleIndex]--;
            //if the player uses all their attempts
            if (riddleAttempts[riddleIndex] <= 0) {
                //if the riddle location is 5
                if (mapLocation === 5) {
                    //display a negative message
                    gameMessage = negativeFateMessages[0] + "<br>" + " Game over!!";
                    //set gameLost to true
                    gameLost = true;
                //if the riddle location is 7
                } else if (mapLocation === 7) {
                    //display a negative message
                    gameMessage = negativeFateMessages[1] + "<br>" + " Game over!!";
                    //set gameLost to true
                    gameLost = true;
                //if the riddle location is 3 
                } else if (mapLocation === 3) {
                    //display a negative message 
                    gameMessage = negativeFateMessages[2] + "<br>" + " Game over!!";
                    //set gameLost to true
                    gameLost = true;
                }
            } else {
                gameMessage = "Incorrect answer. You have " + riddleAttempts[riddleIndex] + " attempts left.";
            }
        }
    } else {
        // Determine the target location based on the action
        var targetLocation = mapLocation;
        //set the value of blockedPathMessage to an empty string
        var blockedPathMessage = "";

        //display block messages if the user wants to go outside the map area
        switch (action) {
            case "north":
                //move the player up 
                if (mapLocation >= 3) {
                    //
                    targetLocation -= 3;
                } else {
                    blockedPathMessage = blockedPathMessages[0];
                }
                break;
            case "east":
                //move the player right
                if (mapLocation % 3 != 2) {
                    targetLocation += 1;
                } else {
                    blockedPathMessage = blockedPathMessages[1];
                }
                break;
            case "south":
                //move the player down
                if (mapLocation < 6) {
                    targetLocation += 3;
                } else {
                    blockedPathMessage = blockedPathMessages[2];
                }
                break;
            case "west":
                //move the player left
                if (mapLocation % 3 != 0) {
                    targetLocation -= 1;
                } else {
                    blockedPathMessage = blockedPathMessages[3];
                }
                break;
        }

        //if the 
        if (targetLocation === mapLocation) {
            gameMessage = blockedPathMessage;
            // Ensure that the player can only access riddle locations sequentially
        } else if (targetLocation === riddleLocations[1] && !riddleSolved[0]) {
            gameMessage = "You must solve the first riddle before you can proceed.";
        } else if (targetLocation === riddleLocations[2] && !riddleSolved[1]) {
            gameMessage = "You must solve the second riddle before you can proceed.";
        } else {
            mapLocation = targetLocation; // Update the player's location
        }
    }

    // Reset the player's input field to an empty string
    input.value = "";

    // Disable input and button if game is lost or final riddle is solved
    if (gameLost || answeredRight) {
        output.innerHTML = "<br><em>" + gameMessage + "</em>";
        input.disabled = true;
        button.disabled = true;
    }

    // Render the game
    render();
}

function render() {
    // Render the location
    output.innerHTML = " Try any of these words: " + "<br>" + "north, east, south, west";
    image.src = "C:/Users/petix/OneDrive/Desktop/" + images[mapLocation];

    // Display an item if there's one in this location
    var riddleIndex = riddleLocations.indexOf(mapLocation);
    if (riddleIndex !== -1 && riddles[riddleIndex] !== "") {
        output.innerHTML = riddleLocationMessages[riddleIndex] + '<br>' + riddles[riddleIndex];
    }

    // Display the game message
    if (gameLost) {
        output.innerHTML = "<br><em>" + gameMessage + "</em>";
    }
    //if the gameMessage is still empty then display this
    else if(gameMessage) {
        output.innerHTML += "<br><em>" + gameMessage + "</em>";
    }
}

JavaScript Catch the Fish Game

Petrina Ropra — Thu, 06 Jun 2024 11:20:30 +0000

Intro: A small game inspired by a chapter of the Foundation Game Design with HTML5 and JavaScript Book by Rex van der Spuy. I've commented on each line so it's basically for complete beginners.

Game Demo:https://youtube.com/shorts/hYimZgPLHcA?feature=share

Note: You can use this code to create your version of games. I drew the pictures of the fish, hook, dynamite and background myself on Microsoft Paint.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="catch_fish.css">
  <title></title>
</head>
<body>
    <div id="game">
    <h1>Catch the Fish</h1>
    <div id="stage">
    <div id="background"></div>
    <div class="box" id="fish"></div>
    <div class="box" id="dynamite"></div>
    <div id="hook"></div>
    <div id="explosion"></div>
    </div>
    <br>
    <br>
    <p id="output">Enter the X and Y position (0–300), then click fire.</p>
    <input id="inputX" type="text" placeholder="X...">
    <input id="inputY" type="text" placeholder="Y...">
    <button>Catch!</button>
    </div>
    <script src="catch_fish.js"></script>
</body>
</html>

*
{
    font-family: sans-serif;
    text-align: center;
}

p{
    font-weight: bold;
    font-size: 22px;
    margin: 0px, auto;
}

input, button{
    font-size: 18px;
}

#game
{
    margin: 0px auto;
    width: 600px;
    height: 630px;
    padding: 15px;
    border: black;
    background: lightblue;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}


#stage
{
    width: 400px;
    height: 400px;
    margin: 0px auto;
    position: relative;
    border-color: blue;
    text-align: center;
}

.box{
    position: absolute;
    height: 100px;
    width: 100px;
    margin: 5px;
}

#background
{
    width: 520px;
    height: 430px;
    left: -55px;
    position: absolute;
    background-image: url('C:/Users/petix/OneDrive/Desktop//my_javascript_games/catch_fish/background.png');
}


#dynamite
{
    width: 60px;
    height: 60px;
    background-image: url('C:/Users/petix/OneDrive/Desktop/my_javascript_games/catch_fish/dynamite.png');
}

#hook
{
    width: 40px;
    height: 40px;
    top: 380px;
    left: 160px;
    position: absolute;
    background-image: url('C:/Users/petix/OneDrive/Desktop/my_javascript_games/catch_fish/hook.png');
}

#fish
{
    width: 80px;
    height: 50px;
    top: 70px;
    left: 100px;
    background-image: url('C:/Users/petix/OneDrive/Desktop//my_javascript_games/catch_fish/fish.png');
}

#explosion
{
    display: block;
    width: 60px;
    height: 60px;
    background-image: url('C:/Users/petix/OneDrive/Desktop/my_javascript_games/catch_fish/explosion.png');
}

//Game variables
//the position of the fish on the horizontal axis 
var fishX = Math.floor(Math.random() * 350);
//the position of the fish on the vertical axis 
var fishY = Math.floor(Math.random() * 100);
//the players input for the horizontal axis
var guessX = 0;
//the players input for the vertical axis
var guessY = 0;
//the amount of chances the player has
var shotsRemaining = 3;
//the amount of chances the player used
var shotsMade = 0;
//message to tell the player the game state
var gameState = "";
//whether the game is won or not
var gameWon = false;
//whether the hook is destroyed or not
var hookDestroyed = false;
//the spa
var tolerance = 10;


//The game objects the html
//access the div ids on  
var hook = document.querySelector("#hook");
var explosion = document.querySelector("#explosion");
var fish = document.querySelector("#fish");
var dynamite = document.querySelector("#dynamite");

//The input and output fields
var inputX = document.querySelector("#inputX");
var inputY = document.querySelector("#inputY");
var output = document.querySelector("#output");

//The button
var button = document.querySelector("button");
button.style.cursor = "pointer";
button.addEventListener("click", clickHandler, false);

//Add 50 to fishY and dynamiteY to stop them 
//from going out the background
fishY = fishY + 50;

//Position the fish when the game starts
fish.style.left = fishX + "px";
fish.style.top = fishY + "px";

//Position the dynamite when the game starts
//the offsets are there to stop the fish div
//and the dynamite div from overlapping each other
var dynamiteX = fish.offsetLeft + fishX;
var dynamiteY = (fish.offsetTop + fish.offsetHeight + 30);

//this if-else statement is to stop the dynamite from
//going out of the background when the game starts
if(dynamiteX > 400){
    console.log("higher than 400");
    dynamiteX = dynamiteX - 350;
    dynamite.style.left = dynamiteX + 'px';
    dynamite.style.top = dynamiteY + 'px';
}else{
    dynamite.style.left = dynamiteX + 'px';
    dynamite.style.top = dynamiteY + 'px';
}

//this to print on the console
//this is optional 
x = dynamite.style.left;
y = dynamite.style.top;
console.log(x);
console.log(y);
console.log(fishX);
console.log(fishY);


//repositions the dynamite and fish
//whenever the button is clicked
function render(){
    //Position the fish
    fish.style.left = fishX + "px";
    fish.style.top = fishY + "px";

    //Position the hook
    hook.style.left = guessX + "px";
    hook.style.top = guessY + "px";

    if(gameWon){
        //remove the fish and hook
        fish.style.display = "none";
        hook.style.display = "none";

    }
}

//the button function to call the 
//validateInput()
function clickHandler(){
    validateInput();
}

//this functions checks the input of the 
//player
function validateInput(){
    //changes the string input into numbers
    guessX = parseInt(inputX.value);
    guessY = parseInt(inputY.value);

    //if input is not a number then display bottom message
    if(isNaN(guessX) || isNaN(guessY)){
        output.innerHTML = "Please enter a number.";
    }
    //if both inputs are more than 400 then display message
    else if(guessX > 400 || guessY > 400){
        output.innerHTML = "Please enter a number less than 400";
    }
    //if the Y input is less than 50 then display message
    else if(guessY < 50){
        output.innerHTML = "For Y, enter a number more than 50";
    }
    //if all above are not the case then call playGame() functionqqq
    else{
        playGame()
    }
}

function playGame(){
    //decrease the value of shotRemaining by 1
    shotsRemaining = shotsRemaining - 1;
    //increase the value of shotsMade by 1
    shotsMade = shotsMade + 1;
    //the variable gameState gets this message
    gameState = " Shots: " + shotsMade + ", Remaining: " + shotsRemaining;
    //the variable guessX gets the players inputX value turned to integer
    guessX = parseInt(inputX.value);
    //the variable guessY gets the players inputX value turned to integer
    guessY = parseInt(inputY.value);
    //Find out whether the player's x and y guesses are inside
    //The fish's area

    //this if statement checks if the player's guess is within the fish div
    //horizontal range
    if(guessX >= (fishX - tolerance) && guessX <= (fishX + 20 + tolerance))
    {
        //Yes, it's within the X range, so now let's
        //check the Y range

        //this if statement checks if the player's guess is within the fish div
        //vertical range
        if(guessY >= (fishY - tolerance) && guessY <= fishY + 20 + tolerance)
        {
            //It's in both the X and Y range, so it's a hit!
            gameWon = true;
            endGame();
        }
    //this if statement checks if the player's guess is within the dynamite div
    //horizontal range
    } else if(guessX >= (dynamiteX - tolerance) && guessX <= (dynamiteX + 20 + tolerance))
    {
        //Yes, it's within the X range, so now let's
        //check the Y range

        //this if statement checks if the player's guess is within the fish div
        //vertical range
        if(guessY >= (dynamiteY -  tolerance) && guessY <= (dynamiteY + 20 + tolerance))
        {
            //It's in both the X and Y range, so it's a hit!
            hookDestroyed = true;

            //remove the dynamite from the game
            dynamite.style.display = 'none';

            //display the explosion in the dynamite position
            explosion.style.display = "block";
            explosion.style.position = "absolute";
            explosion.style.left = dynamiteX + "px";
            explosion.style.top = dynamiteY + "px";
            endGame();

        }
    }
    //if the hook is out of the dynamite and the hook
    //range
    else{
        output.innerHTML = "Miss!" + gameState;

        //set a timer
        setTimeout(() => {
            //the hook moves back to its original position
            //after 300 miliseconds
            hook.style.top = 380 + "px";
            hook.style.left = 160 + "px";
        }, 300);

        //if the value of shotsRemaining is zero
        if (shotsRemaining < 1)
        {
            //then call endGame() function
            endGame();
        }   
    }
    //Update the alien's position if the
    //game hasn't yet been won
    if(!gameWon)
    {
        //Update the fish's X position
        fishX = Math.floor(Math.random() * 300);
        fishY = Math.floor(Math.random() * 300);

        fishY += 50;
        }

    //Render the new game state
    render();
    //console.log("X: " + alienX);
    //console.log("Y: " + alienY);
}   

//this function checks whether the game is won
function endGame(){
    //if the game is won
    if(gameWon){
        //if the value of shotsMade is less than 2
        //display this message
        if(shotsMade < 2){
            output.innerHTML = "Hooray! You caught the fish!" + "<br>"
             + "It only took you " + shotsMade + " shot.";
        }
        //this is for aesthetic purposes. It's not necessary
        else{
            output.innerHTML = "Hooray! You caught the fish!" + "<br>"
                     + "It only took you " + shotsMade + " tries.";
        }
    } 
    //if the hook is destroyed by the dynamite
    //display this message
    else if(hookDestroyed){
        output.innerHTML = "Boom!! You hit a dynamite!" + "<br>"
                        + "Your hook is destroyed. :("
    }
    //if the game is lost and the hook is not destroyed
    //display this message
    else{
        output.innerHTML = "You lost!" + "<br>"
        + "The fish got away!";
        }

    //Disable the button
    button.removeEventListener("click", clickHandler, false);
    button.disabled = true;

    //Disable the enter key 
    //window.removeEventListener("keydown", keydownHandler, false);

    //Disable the input fields
    inputY.disabled = true;
    inputX.disabled = true;

    //hide hook and fish
    hook.style.display = "none";
    fish.style.display = "none";
}

JavaScript Hungry Caterpillar Game

Petrina Ropra — Tue, 28 May 2024 08:06:20 +0000

Intro: A small game like the famous Nokia snake game. You can pause the game too by pressing the spacebar on the keyboard. So it's a game where the user controls the caterpillar to eat a leaf and in doing so the user gets a point that adds to the score, the higher the score the faster the caterpillar moves. If the user collides with the canvas border the game ends. This is for complete beginners as I have commented on each line of code on what it does. Please let me know if I have made any mistakes. Thanks.

Watch Demo Here: https://youtube.com/shorts/kxzC3YCeSZI?feature=share

Tweak: You can change the colors, or change the speed of the caterpillar, or how much score will be increased whenever the caterpillar eats the leaf

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <link rel="stylesheet" href="hungry_snake.css">
</head>
<body>
<div class="game-container">
    <h1> Hungry Caterpillar</h1>
    <canvas id="gameCanvas"></canvas>
    <div id="startScreen">
        <h1>Press SPACE to Start</h1>
    </div>
    </div>
    <script src="hungry_caterpillar.js"></script>
</body>
</html>

@font-face {
    font-family: 'PoetsenOneRegular';
    src: url('Fonts/PoetsenOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#game-container{
    text-align: center;
}

canvas {
    border: 1px solid black;
    background-color: lightgreen;
    display:  block;
}

h1{
    font-family: 'Poor Richard Regular', sans-serif;
    color: darkgreen;
    text-align: center;
}

#startScreen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 24px;
}

//a const variable is immutable meaning its va;ue cannot be reassigned
//create a variable called canvas that stores the html canvas
const canvas = document.getElementById('gameCanvas');
//ctx gets a method that returns a 2d drawing context for the canvas
const ctx = canvas.getContext('2d');
//startScreen gets the startScreen div element in the html file
//basically it stores the div with the id-startScreen 
const startScreen = document.getElementById('startScreen');

//set the width of the canvas to 600
canvas.width = 600;
//set the height of the canvas to 400
canvas.height = 400;

//creata an array called caterpillar
//this array will be used to creat the body of the caterpillar
let caterpillar = [];
//set the length of the caterpillar
let caterpillarLength = 15;
//set the speed of the caterpillar to 10
let caterpillarSpeed = 10;
//set the score to zero
let score = 0;
//set the state of the game 
let gameStarted = false;
//set the caterpillar to move to the right
let dx = caterpillarSpeed;
//set the horizontal movement of the caterpillar to zero
let dy = 0;
//add paused flag
let paused = false

//create function to create the caterpillar
function createCaterpillar() {
    //create a loop that loops for as much as the value of caterpillarLength
    //so in this case it will loop through 15 times which is the value of caterpilarLength
    for (let i = 0; i < caterpillarLength; i++) {
        //everytime the loop loops a small circle will be pushed into the caterpillar array
        //the x object is the horizontal position of the circle dots and 
        //the y object is the vertical position of the circle dots
        //so basically small circles will be created one after another 15 times and put 
        //in the caterpillar array so the 3 is the space between each circle
        caterpillar.push({ x: canvas.width / 2 - i * 4, y: canvas.height / 2 });
    }
}

//an object called leaf is created and its properties are its 
//horizontal(x) and vertical(y) position on the canvas 
//it just appears at random positions in the canvas
let leaf = {
    x: Math.floor(Math.random() * (canvas.width - 30)),
    y: Math.floor(Math.random() * (canvas.height - 30))
};

//create a function drawLeaf() to draw the leaf
function drawLeaf() {
    //give the leaf a green color
    ctx.fillStyle = 'green';
    //start drawing the leaf
    ctx.beginPath();
    // Start point (left center of the leaf)
    ctx.moveTo(leaf.x, leaf.y + 10);  
    //draw top curve of leaf
    ctx.bezierCurveTo(leaf.x, leaf.y, leaf.x + 20, leaf.y, leaf.x + 30, leaf.y + 10);
    //draw bottom curve of leaf
    ctx.bezierCurveTo(leaf.x + 20, leaf.y + 20, leaf.x, leaf.y + 20, leaf.x, leaf.y + 10);
    //fill the leaf with hreen
    ctx.fill();
}

//create a function drawCaterpillar() to draw the caterpillae
function drawCaterpillar() {
    //this creates the head of the caterpillar
    //so the caterpillar's head will be black
    ctx.fillStyle = 'black';
    //begin drawing
    ctx.beginPath();
    //create the first circle of the caterpillar array
    ctx.arc(caterpillar[0].x + 10, caterpillar[0].y + 10, 10, 0, Math.PI * 2);
    //make the first circle black
    ctx.fill();
    //for the rest of the circles they'll be brown
    ctx.fillStyle = '#80461B';
    //create a loop to loop through the caterpillar array 
    for (let i = 1; i < caterpillar.length; i++) {
        //begin drawing
        ctx.beginPath();
        //draw the rest of the circles in the caterpillar array
        ctx.arc(caterpillar[i].x + 9, caterpillar[i].y + 9, 9, 0, Math.PI * 2);
        //all the other circles which is the carterpillar's body will be brown
        ctx.fill();
    }
}

//create a function called updateCaterpillar()
//this will update the pistion of the caterpillar as it moves
function updateCaterpillar() {
    //an object called head is creeted
    //the properties of this object positions the head of the caterpillar
    const head = { x: caterpillar[0].x + dx, y: caterpillar[0].y + dy };
    //put the head object as the first item of the caterpillar array
    caterpillar.unshift(head);

    //if head's horizontal position is less than the leaf's horizontal position plus 30 and
    if (head.x < leaf.x + 30 &&
        //if head's horizontal position is plus 20 is more than the leaf's horizontal position and
        head.x + 20 > leaf.x &&
        //if head's vertical position is less than the leaf's vertical position plus 20 and
        head.y < leaf.y + 20 &&
        //if head's vertical position plus 20 is less than the leaf's vertical poistion
        //basically whenever the caterpillar eats the leaf
        head.y + 20 > leaf.y) {
        //call the placeLeaf() function to move the leaf to a new location
        placeLeaf();
        //add 10 to score
        score += 10;
        //increase the caterpillar's speed by 0.5
        caterpillarSpeed += 0.5;
    } else {
        //remove the last segment of the caterpillar
        caterpillar.pop();
    }
}

//create a function called placeLeaf()
//this function basically moves the leaf to a new random location
//whenever the caterpillar eats it.
function placeLeaf() {
    leaf.x = Math.floor(Math.random() * (canvas.width - 30));
    leaf.y = Math.floor(Math.random() * (canvas.height - 20));
}

//create a function called isGameOver()
function isGameOver() {
    //create a variable called head that stores the head of the caterpillar
    //which is the first circle in the caterpillar array
    const head = caterpillar[0];
    //Check if the head is outside the canvas boundaries
    if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
        //If any condition is true, the head is out of bounds, so return true
        return true;
    }
    //create a loop that loops through the caterpillar's body or caterpillar array
    for (let i = 1; i < caterpillar.length; i++) {
        //Check if head is at the same position as the current segment of the caterpillar
        if (head.x === caterpillar[i].x && head.y === caterpillar[i].y) {
            //if both the x and y coordinates match, return true to indicate a collision
            return true;
        }
    }
    //if there are no collisions return false
    return false;
}

//create a function called gameOver()
function gameOver() {
    //choose yellow as the fill color
    ctx.fillStyle = 'yellow';
    //fill the entire canvas with yellow
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    //choose black as the fill color for the text
    ctx.fillStyle = 'black';
    //set the font size to 30 pixels and use Arial font
    ctx.font = '30px Arial';
    //center the text horizontally
    ctx.textAlign = 'center';
    //draw the text "GAME OVER", canvas.width / 2, canvas.height / 2);
    ctx.fillText('GAME OVER!', canvas.width / 2, canvas.height / 2);
}

//create a function called drawScore()
function drawScore() {
    //choose black as the fill color
    ctx.fillStyle = 'black';
    //set the font size to 20 pixels and use Arial font
    ctx.font = '20px Arial';
    //display the score on the canvas 
    //set the position of the score at the top right corner of the canvas
    //set the font size of the score to 30 pixels
    ctx.fillText('Score: ' + score, canvas.width - 100, 30);
}

//create a function called clearCanvas()
function clearCanvas() {
    //clear the entire canvas, removing all previously drawn content
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

//create a function called gameLoop()
function gameLoop() {
    //if the isGameOver() function returns true
    if (isGameOver()) {
        //call the gameOver() function
        gameOver();
        //exit current function
        return;
    }
    //if game is paused stop game
    if(paused) return;

    //call the clearCanvas() function to clear the canvas
    clearCanvas();
    //call the drawLeaf() function to draw the leaf
    drawLeaf();
    //call the updateCaterpillar() function
    updateCaterpillar();
    //call the drawCaterpillar() function
    drawCaterpillar();
    //call the drawScore function()
    drawScore();

    //set a timeout to call requestAnimationFrame with gameLoop after a delay based on caterpillarSpeed
    setTimeout(() => {
        //request the browser to call gameLoop to update the animation
        requestAnimationFrame(gameLoop);
        //the request will be carried out after 
        //1000miliseconds divided by the value of caterpillarSpeed 
    }, 1000 / caterpillarSpeed);
}

//create a function called startGame
function startGame() {
    //if the value of gameStarted is true
    //the ! indicates that gameStarted is not false 
    //which was the initial value of gameStarted
    if (!gameStarted) {
        //gameStarted is now set to true
        gameStarted = true;
        //hide the start screen by setting its display style to 'none'
        startScreen.style.display = 'none';
        //call createCaterpillar() function
        createCaterpillar();
        //call gameLoop()
        gameLoop();
    }
}

//create a function called togglePause()
function togglePause() {
    //the variable paused is now set to true
    paused = !paused;
    //if true
    if (!paused) {
        // Resume the game loop if unpaused
        gameLoop(); 
    }
}

//add an event listener for keydown events
document.addEventListener('keydown', event => {
    //if the spacebar is pressed
    if (event.code === 'Space') {
        //if gameStarted is true start game
        if(!gameStarted) {
            startGame();
        //if gameStarted is false
        } else {
            //call the togglePause() function
            //or basically pause game
            togglePause();
        }
    }

    if(!paused){
        //if the up arrow is pressed and the caterpillar is not moving
        //vertically, move up
        if (event.code === 'ArrowUp' && dy === 0) {
            dx = 0;
            dy = -caterpillarSpeed;
        }

        //if the down arrow is pressed and the caterpillar is not moving vertically,
        //move down
        if (event.code === 'ArrowDown' && dy === 0) {
            dx = 0;
            dy = caterpillarSpeed;
        }

        //if the left arrow is pressed and the caterpillar is not moving horizontally,
        //move left
        if (event.code === 'ArrowLeft' && dx === 0) {
            dx = -caterpillarSpeed;
            dy = 0;
        }

        //if the left arrow is pressed and the caterpillar is not moving horizontally,
        //move right
        if (event.code === 'ArrowRight' && dx === 0) {
            dx = caterpillarSpeed;
            dy = 0;
        }
    }
});

JavaScript Mini Password Generator

Petrina Ropra — Thu, 23 May 2024 12:55:41 +0000

Intro: This is a small password generator made with JavaScript. It's a very simple program. All it does is display a new password every time the user presses the generate password button. I added pictures to it for fun. You can add your pictures if you want to. By the way, this is for complete beginners as I have commented on every line of my JavaScript file. If I have made mistakes please let me know and feel free to copy and tweak this game to your liking.

Watch Demo Here: https://youtube.com/shorts/A5BLMB5H1mI?feature=share

Note: I got my pictures from https://www.canva.com/ai-image-generator/

Tip: You can use random images at first until the program works fine and then add images that fit the description. Make sure the first word and second word of the images' name are similar to the first two words of the password for example: when the password fluffyapple95h shows up then the fluffyapple.jpg image will show. Make sure to put the full file path to your images.

Tweak: You can change the adjectives and nouns and put as many or as few as you like.

The first code block is HTML, the second is CSS and the third is JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Password Picker</title>
  <link rel="stylesheet" href="password_picker.css"> <!-- Link to the external CSS file -->
</head>
<body>
  <div id="password-container">
    <h2>Welcome to Password Picker!</h2>
    <div id="password-output"></div>
    <br>
    <img id="password-image" src="" alt="Password Image">   <!-- Image element to display the image -->
    <br><br>
    <button id="generate-btn">Generate Password</button>
  </div>

  <script src="password_picker.js"></script> <!-- Link to the external JavaScript file -->
</body>
</html>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#password-container {
  background-color: #fff;
  border-radius: 5px;
  padding: 80px;
  width: 20%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #0056b3;
}


#password-output{
    font-size: 20px;
    background-attachment: orange;
    text-align: center;
}

//create an array of adjectives
const adjectives = ['sleepy', 'slow', 'smelly', 'wet', 'fat', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'fluffy', 'white', 'proud', 'brave'];
//create an array of nouns
const nouns = ['apple', ]; //'dinosaur', 'ball', 'toaster', 'goat', 'dragon', 'hammer', 'duck', 'panda'];

//create a function called generatePassword
const generatePassword = () => {
  //pick a random item in the adjectives array everytime the function is called
  //Math.random gives a random floating point number, then multiplied with the length of the adjectives array
  //to stay within the array then Math.floor rounds it up to the nearest integer.
  const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
  //same thing above here but for nouns array
  const noun = nouns[Math.floor(Math.random() * nouns.length)];
  //get a random number from 0 to 100
  const number = Math.floor(Math.random() * 100);
  //get the  ASCII codes for printable characters 
  const specialChar = String.fromCharCode(33 + Math.floor(Math.random() * 94));
  //join all the string values prevous variables together and put them in a variable called password
  const password = adjective + noun + number + specialChar;
  //display the message below in the html file
  //For example: Your new password is: fluffyapple95h
  document.getElementById('password-output').textContent = 'Your new password is: ' + password;
  //get the image that matches the password and display it in the html file
  document.getElementById('password-image').src = `C:/Users/petix/OneDrive/Desktop/my_javascript_games/Password_picker/${adjective}${noun}.png`; // Set the source of the image
};

//add an event to the button so that when it is pressed it will call the generatePassword function 
document.getElementById('generate-btn').addEventListener('click', generatePassword);
//show an image when the program loads for the first time
document.getElementById('password-image').src = 'C:/Users/petix/OneDrive/Desktop/my_javascript_games/Password_picker/letters.png'

JavaScript Five Lives Game

Petrina Ropra — Tue, 21 May 2024 23:33:03 +0000

Intro: This is a small game created with JavaScript. It's like the Hangman word game where you guess the letters till you get the full word. After you've guessed the word correctly, a picture of the word appears. You have nine lives and each time a wrong letter is guessed you lose a life.
This is for complete beginners as I have commented on each line of code to tell you what it does. Please let me know if I have made mistakes and feel free to copy and tweak this game to your liking.

Watch Demo Here: https://youtube.com/shorts/hsW7Xz7Pg9c?feature=share

Note: You can use your pictures for the game images. I used https://spellai.art/ to get my pictures. Always put the full file path to your pictures just in case.

Tip: There are mostly five-letter words in this game but you can add seven six or eight-letter words etc... if you want and put your pictures for these words. Also, you can remove the input box and the button completely and leave the letter buttons there if that's what you want.

The first code block is HTML, the second is CSS, and the third is JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Five Lives Game</title>
    <link rel="stylesheet" href="five_lives.css">
</head>
<body>
    <div class="game-container">
        <h1>Five Lives Game</h1>
        <div class="result" id="result"></div>
        <div class="image-container">
            <img id="result-image" src="" alt="Result Image" style="display: none;">
        </div>
        <div class="clue" id="clue">?????</div>
        <div class="lives" id="lives">Lives left: <span class="heart">❤❤❤❤❤</span></div>
        <div class="alphabet" id="alphabet"></div>
        <div class="input-container">
            <input type="text" id="guess-input" placeholder="Guess a letter">
            <button onclick="makeGuess()">Guess</button>
        </div>
    </div>

    <script src="five_lives.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    color: #00413f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #fff;
    text-align: center;
}

.game-container {
    text-align: center;
    background: #e1f6ff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.clue, .lives{
    font-size: 24px;
    margin: 20px 0;
}

.heart {
    color: red;
    font-size: 30px;
}

.alphabet {
    margin: 20px 0;
    background: #b9ebff;
}

.alphabet span {
    display: inline-block;
    padding: 5px;
    margin: 2px;
    font-size: 24px;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 4px;
}

.alphabet .guessed {
    background-color: grey;
    color: white;
    cursor: not-allowed;
}

.input-container {
    margin: 20px 0;
}

.input-container input {
    padding: 10px;
    font-size: 16px;
    width: 200px;
    margin-right: 10px;
}

.input-container button {
    padding: 10px;
    font-size: 16px;
    background-color: #b9ebff;
}

.result {
    font-size: 24px;
    margin: 20px 0;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;


}

.image-container img {
    max-width: 100%;
    height: 400px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

//five_lives.js
//create an array of words
const words = ['dragon','pizza','fairy','night', 'shirt', 'otter', 'plane'] ;
//choose a word in the words array and place it in the secretWord variable
const secretWord = words[Math.floor(Math.random() * words.length)];
//an array is created and filled with as many ? as the letters in secretWord
let clue = Array(secretWord.length).fill('?');
//variable lives gets integer 5
let lives = 5;
//variable guessedWordCorrectly gets a boolean value - false
let guessedWordCorrectly = false;
//variable guessedLetters gets a Set()
let guessedLetters = new Set();

//variable alphabetContainer gets alphabet div
const alphabetContainer = document.getElementById('alphabet');
//variable alphabet gets a string of letters from a to z
const alphabet = 'abcdefghijklmnopqrstuvwxyz';

//Splits the alphabet string into individual letters.
//Iterates over each letter, creating a <span> element for each one.
//Sets the text content of the <span> to the letter.
//Assigns a unique id to each <span> using the letter.
//Adds an onclick event handler to each <span> that calls the makeGuess function with the corresponding letter.
//Appends each <span> to the alphabetContainer.
alphabet.split('').forEach(letter => {
    const span = document.createElement('span');
    span.textContent = letter;
    span.id = `letter-${letter}`;
    span.onclick = () => makeGuess(letter);
    alphabetContainer.appendChild(span);
});

//create a function called updateClue that takes one parameter - guessedLetter
function updateClue(guessedLetter) {
    //loop through the letters in secretWord
    for (let i = 0; i < secretWord.length; i++) {
        //if the value of guessedLetter is equal to any of the letters in secretWords
        if (guessedLetter === secretWord[i]) {
            //then replace a ? in clue with the guessedLetter value
            clue[i] = guessedLetter;
        }
    }
}

//create a function called makeGUess with one parameter - input
function makeGuess(input) {
    //guessInput gets an html element id 
    const guessInput = document.getElementById('guess-input');
    //checks the type of input that the user enters and if it's a string,
    //guess is set to input, If input is not a string, guess is set to the value 
    //from the input field (guessInput.value) and converted to lowercase.
    const guess = (typeof input === 'string') ? input : guessInput.value.toLowerCase();
    //set the value of guessInput to an empty string
    guessInput.value = '';

    //if the Set guessedLetters has the value of guess 
    if (guessedLetters.has(guess)) {
        //then call this function
        showModal();
        //stop function
        return;
    }
    //add the value of guess to the set guessedLetters
    guessedLetters.add(guess);
    //The line `document.getElementById(`letter-${guess}`).classList.add('guessed')` 
    //selects the HTML element with an `id` corresponding to the guessed letter 
    //(e.g., `letter-a` for the guess 'a'). It then adds the CSS class 'guessed' 
    //to this element, typically to change its appearance and indicate it has been guessed.
    document.getElementById(`letter-${guess}`).classList.add('guessed');

    //if the value of guess is equal to secretWord
    if (guess === secretWord) {
        //the value if guessedWordCorrectly changes to tru
        guessedWordCorrectly = true;
    //if the amount of letters in guess is equal to 1 and the value of
    //secretWord which is an array has the value of guess
    //basically if the user made a guess and its in the secretWord array
    } else if (guess.length === 1 && secretWord.includes(guess)) {
        //call updateClue function with guess as its argument
        updateClue(guess);
    //if the amount of letters in guess is equal to one
    //basically if the user made a guess
    } else if (guess.length === 1) {
        //minus one from the value of guess
        lives--;
    }
    //if ? is not in clue
    if (!clue.includes('?')) {
        //the value of guessedWordCorrectly is now true
        guessedWordCorrectly = true;
    }
    //call the function updateDisplay
    updateDisplay();
    //call the function checkGameStatus()
    checkGameStatus();
}

//create a function updateDisplay
function updateDisplay() {
    //join the items in clue together to form a string and put it in the html element clue
    document.getElementById('clue').textContent = clue.join('');
    //updates the content of an HTML element with id lives to show a message "Lives left:"
    //followed by a heart symbol repeated for the number of lives left.
    document.getElementById('lives').innerHTML = 'Lives left: ' + '<span class="heart">'.repeat(lives) + '❤'.repeat(lives) + '</span>'.repeat(lives);
}

//create checkGameStatus function
function checkGameStatus() {
    //variable result gets an html element id result
    const result = document.getElementById('result');
    //variable result gets an html element id resultImage
    const resultImage = document.getElementById('result-image');
    //if guessedWordCorrectly is true
    if (guessedWordCorrectly) {
        //display this text in result
        result.textContent = 'You won! The secret word was ' + secretWord + '!';
        //display an image 
        resultImage.src = `C:/Users/petix/OneDrive/Desktop/my_javascript_games/nine_lives/${secretWord}.png`;  // Ensure images are named according to words
        //style the image
        resultImage.style.display = 'block';
        //call disableInput() function
        disableInput();
      //if lives is less than or equal to zero
    } else if (lives <= 0) {
        //display this in the result html element 
        result.textContent = 'You lost! The secret word was ' + secretWord;
        //call disableInput() function
        disableInput();
    }
}

//create disabledInput() funtion
function disableInput() {
    //diasble the input html element
    document.getElementById('guess-input').disabled = true;
    //disable the button
    document.querySelector('.input-container button').disabled = true;
    //disable the letter buttons
    alphabetContainer.querySelectorAll('span').forEach(span => {
        span.onclick = null;
    });
}


// Add an event listener to the input field to detect Enter key presses
document.getElementById('guess-input').addEventListener('keydown', function(event) {
    //if the user presses the "enter" key
    if (event.key === 'Enter') {
        //call makeGUess() function
        makeGuess();
    }
});

//call updateDisplay() function
updateDisplay();

JavaScript Animal Quiz Game

Petrina Ropra — Tue, 21 May 2024 01:21:06 +0000

Intro: This is a small HTML, JavaScript Quiz Game for JavaScript Beginners. I've commented on each line of the JavaScript file to help myself and anyone new to JavaScript understand what each line does. Feel free to correct me if I've made mistakes and you can also copy the code and tweak it to your liking.

Watch Demo Here: https://youtube.com/shorts/J0tgN1cFgGE?feature=share

Note: For the pictures, you can add your own. I got mine from https://unsplash.com/ Always put the full file path to your pictures just in case.

Tip: You can change the Quiz and make it about your favorite Movies, Books, Celebrities, or any topic you want to base the quiz on.

The first code block is HTML, the second is CSS and the third is JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animal Quiz</title>
    <link rel="stylesheet" href="quiz.css">
</head>
<body>
    <div id="quiz">
        <h1>Guess the Animal</h1>
        <div id="questionImage">
            <img src="" id="questionImg" alt="Question Image" style="width:300px; height:auto;">
        </div>
        <div id="question"></div>
        <input type="text" id="answer" placeholder="Type your answer here...">
        <button id ="button" onclick="submitAnswer()">Submit</button>
        <div id="feedback"></div>
        <div id="score"></div>
    </div>
    <script src="quiz.js"></script>
</body>
</html>

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f9;
}

#quiz {
    text-align: center;
    border: 2px solid #ddd;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background-color: white;
    width: 300px;
}

input[type="text"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
}

button {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
}

img{
    width: 50%;
    height: 50%;
}


#score{
    padding-top: 10px;
}

.popup {
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: lightgreen;
    background-image: url('C:/Users/petix/Downloads/thumbs_up.jpg');
    background-size: 100% 100%;
    padding-top: 80px;
    z-index: 1000;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);            /* Full cover from the left */
    width: 18%;        /* Full width */
    height: 36%;
    font-size: 20px;
    font-weight: bold;
}

.popup button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.popup.wrong-answer {
    background-image: url('C:/Users/petix/OneDrive/Desktop/my_javascript_games/animal_quiz/thumbs_down.jpg');
}

//quiz.js
// Three variables are created
let score = 0;
let attempt = 0;
let still_guessing = true;

// An array holding the quiz questions
let questions = [
    { 
        question: "Which bear lives at the North Pole?", 
        answer: "polar bear",
        image: 'C:/Users/petix/OneDrive/Desktop/my_javascript_games/animal_quiz/images/polar_bear.jpg'
    },
    { 
        question: "What is the fastest mammal?", 
        answer: "cheetah",
        image: 'C:/Users/petix/OneDrive/Desktop/my_javascript_games/animal_quiz/images/cheetah.jpg'
    },
    { 
        question: "What is the largest animal in the world?", 
        answer: "blue whale",
        image: 'C:/Users/petix/OneDrive/Desktop/my_javascript_games/animal_quiz/images/blue_whale.jpg'
    },
    {
        question: "What is the tallest land animal in the world?", 
        answer: "giraffe",
        image: 'C:/Users/petix/OneDrive/Desktop/my_javascript_games/animal_quiz/images/giraffe.jpg'
    },
    {
        question: "What is the only mammal that can fly?", 
        answer: "bat",
        image: 'C:/Users/petix/OneDrive/Desktop/my_javascript_games/animal_quiz/images/bat.jpg'
    }
];

// This variable holds the current question number
let currentQuestion = 0;

// Preload question images
let preloadedImages = {};

//create a function that preloads the images
function preloadImages(imageUrls) {
    //The forEach() method calls a function for each element in an array.
    //so basically it Iterates over each URL in the imageUrls array
    imageUrls.forEach(url => {
        // Create a new Image object (an HTML <img> element)
        let img = new Image();

        // Set the src attribute of the Image object to the current URL, starting the image loading process
        img.src = url;

        // Store the Image object in the preloadedImages object using the URL as the key
        preloadedImages[url] = img;

        // Log a message to the console indicating that the image is being preloaded
        console.log(`Preloading image: ${url}`);
    });
}

// A flag to track whether the popup is currently shown
let isPopupActive = false;

// Function to update question and image
function updateQuestionAndImage() {
    //if the value of current question is less than the number of objects in questions
    if (currentQuestion < questions.length) {
        //in the question div in the HTML file display the current question
        document.getElementById('question').innerText = questions[currentQuestion].question;
        //create a variable called questionImg that stores the img HTML element
        let questionImg = document.getElementById('questionImg');
        //create a variable called imageUrl that stores the image of the current question
        let imageUrl = questions[currentQuestion].image;

        // Check if the image is in the preloadedImages object
        if (preloadedImages[imageUrl]) {
            // Check if the preloaded image has fully loaded
            if (preloadedImages[imageUrl].complete) {
                // If the image is fully loaded, set the src of questionImg to display it
                questionImg.src = imageUrl;
            } else {
                // If the image is not fully loaded, set an onload handler
                preloadedImages[imageUrl].onload = () => {
                // When the image finishes loading, set the src of questionImg to display it
                questionImg.src = imageUrl;
                };
            }
        // If the image is not in the preloadedImages object, log an error
    } else {
        console.error(`Image not preloaded: ${imageUrl}`);
    }

    //make the input box display nothing
    document.getElementById('answer').value = '';
    //remove the text in the 'feedback' div
    document.getElementById('feedback').innerText = '';

    //for the last two images in the questions array
    //set their width to 80% and height to auto
    //this is for personal preference meaning it's not mandatory
    if (currentQuestion >= questions.length - 2) {
        questionImg.style.width = '80%';
        questionImg.style.height = 'auto';
        }
    }
}

// A function called submitAnswer is created
function submitAnswer() {
    //create a variable called userAnswer that stores the text the user enters 
    //in the input box ('answer') in the html file
    let userAnswer = document.getElementById('answer').value;
    //if still_guessing is still true and the value of attempt is less than 3
    if (still_guessing && attempt < 3) {
        //if the user's answer is equal to the currentQuestion's answer
        if (userAnswer.toLowerCase() === questions[currentQuestion].answer.toLowerCase()) {
            console.log(questions[currentQuestion].answer.toLowerCase());
            //display this text in the 'feedback' div
            document.getElementById('feedback').innerText = 'Correct Answer!';
            //add 1 to the score
            score++;
            //display this text in the 'score' div
            document.getElementById('score').innerHTML = 'Score: ' + score;
            //call showPopup() function with the string 'Correct' as it's argument
            showPopup('Correct!');
        } else {
            //if attempt is less than 2
            if (attempt < 2) {
                //display this text in the 'feedback' div
                document.getElementById('feedback').innerText = 'Sorry wrong answer. Try again.';
                //add 1 to the value of attempt
                attempt++;
                console.log(attempt);
            } else {
                //call the showPopup function with the text below as it's argument
                showPopup(`The correct answer was ${questions[currentQuestion].answer.toUpperCase()}.`, true);
            }
        }
    }
}

// Create nextQuestion() function
function nextQuestion() {
    //set the value of attempt back to zero
    attempt = 0;
    //add 1 to the value of currentQuestion
    currentQuestion++;
    //if the value of currentQuestion is less than the amount of objects in questions
    if (currentQuestion < questions.length) {
        //call the updateQuestionAndImage() function
        updateQuestionAndImage();
    } else {
        //display the text below in the 'quiz' div
        document.getElementById('quiz').innerHTML = `<h1>Quiz Completed</h1>Your score is ${score}/${questions.length}`;
    }
}

// Create a function called showPopup with two parameters 
function showPopup(message, isWrongAnswer = false) {
    //set the value of isPopupActive to true
    isPopupActive = true;

    //create a div element and store it in the variable popup
    let popup = document.createElement('div');
    //set the class name of the popup div to 'popup'
    popup.className = 'popup';
    //the text in the 'popup' is set as the value of message
    popup.textContent = message;

    //create a variable called imageSrc that stores the value of isWrongAnswer
    let imageSrc = isWrongAnswer
        //if isWrongAnswer is true, use the thumbs down image
        ? 'C:/Users/petix/OneDrive/Desktop/my_javascript_games/animal_quiz/images/thumbs_down.jpg'
        //if isWrongAnswer is false, use the thumbs up image
        : 'C:/Users/petix/OneDrive/Desktop/my_javascript_games/animal_quiz/images/thumbs_up.jpg';

    //set the popup backgroundImage to whichever image
    //that satisfy the condition above
    popup.style.backgroundImage = `url(${imageSrc})`;


    // Check if the image is in the preloadedImages object
    if (preloadedImages[imageSrc]) {
        // Check if the preloaded image has fully loaded
        if (preloadedImages[imageSrc].complete) {
            // If the image is fully loaded, display the popup immediately
            displayPopup(popup);
        } else {
            // If the image is not fully loaded, set an onload handler
            preloadedImages[imageSrc].onload = () => displayPopup(popup);
    }
    // If the image is not in the preloadedImages object, log an error
    } else {
        console.error(`Image not preloaded: ${imageSrc}`);
        // Display the popup anyway
        displayPopup(popup);
    }
}

//create a displayPopup function that takes the one parameter 'popup'
function displayPopup(popup) {
    //add 'popup' to the HTML file
    document.body.appendChild(popup);
    //set a timer
    setTimeout(() => {
        //if the HTML body has the 'popup' div element
        if (document.body.contains(popup)) {
            //remove the 'popup' div element
            document.body.removeChild(popup);
            //call the nextQuestion() function
            nextQuestion();
        }
        //set the value of isPopupActive to false
        isPopupActive = false;
    //this is the amount of time the popup will be displayed
    }, 1175);
}

// Add event listener to disable keyboard input when popup is active
document.addEventListener('keydown', function(event) {
    if (isPopupActive) {
        event.preventDefault();
    }
});

// Add event listener to the input field to detect Enter key press
document.getElementById('answer').addEventListener('keyup', function(event) {
    if (event.key === 'Enter' && !isPopupActive) {
        submitAnswer();
    }
});

// Add event listener to the submit button
document.getElementById('button').addEventListener('click', function() {
    if (!isPopupActive) {
        submitAnswer();
    }
});

// Display this text in the score div
document.getElementById('score').innerText = `Score: ${score}`;

// Initialize quiz and preload question images when the DOM content is fully loaded
document.addEventListener('DOMContentLoaded', () => {
    // Create an array of image URLs from the questions array
    let questionImageUrls = questions.map(question => question.image);

    // Define an array of popup image URLs for feedback images
    let popupImageUrls = [
        'C:/Users/petix/OneDrive/Desktop/my_javascript_games/animal_quiz/images/thumbs_up.jpg',
        'C:/Users/petix/OneDrive/Desktop/my_javascript_games/animal_quiz/images/thumbs_down.jpg'
    ];

    // Preload all question and popup images
    preloadImages([...questionImageUrls, ...popupImageUrls]);

    // Initialize the quiz with the first question and its image
    updateQuestionAndImage();
});