In JavaScript, alert a message once all images have been clicked

Question

In JavaScript, alert a message once all images have been clicked

I'm encountering a small issue with my javascript code. I am developing a game for a school project where the objective is to click (remove) fish using a fishing rod. However, the game does not have an end condition set up, so players cannot win. Below you will find the complete HTML and JavaScript code for reference. Additionally, there is a link to a jsbin demonstration of the game with all CSS, HTML, and JavaScript elements combined for easier understanding. Does anyone know how to implement a win condition that stops the game when all fish are clicked (removed) and triggers an alert saying "You Won!"?

Thank you

https://jsbin.com/fihebiwiqi/edit?html,css,output

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <link rel="stylesheet" type="text/css" href="css1.css">
    </head>

    <body  background="https://guideinparadise.files.wordpress.com/2013/01/down-below2.jpg">
      <h1>Fishing Game</h1>
      <img id="fishingrod" src ="https://pixabay.com/static/uploads/photo/2014/03/24/17/07/fishing-rod-295096_960_720.png">
    <p>Seconds:</p>
      <p id="clock"></p> 
        <form action="html.html">
        <input id='level1' type="submit" value="Level 1">
    </form> 
        <form action="html2.html">
        <input id='level2' type="submit" value="Level 2">
    </form> 
        <form action="html3.html">
        <input id='level3' type="submit" value="Level 3">
    </form> 
        <form action="html4.html">
        <input id='level4' type="submit" value="Level 4">
    </form> 
    <form action="html5.html">
        <input id='level5' type="submit" value="Bonus Level">
    </form> 


        <script> 
      document.body.style.cursor = 'none'; // remove cursor
    $(document).mousemove(function (e) { //mouse moves over image
       $('#fishingrod').offset({  
            left: e.pageX + -190,  
            top: e.pageY + -110
        });
    });

      var b = 1; 
      for (var i= 0; i<5;i++){ // create loop to display 5 fish images
      fish(b);
      }
    function position(element) {
        var x = document.body.offsetHeight-element.clientHeight;
        var y = document.body.offsetWidth-element.clientWidth;
        var Xcoord = Math.floor(Math.random()*1*x + 300);
        var Ycoord = Math.floor(Math.random()*y + 50);

        return [Xcoord,Ycoord]; 


    }

    function fish() {

        var img = document.createElement('img'); 
        img.className = 'fish2';
        img.setAttribute("style", "position:fixed;");
        img.setAttribute("src", "http://res.freestockphotos.biz/pictures/16/16806-illustration-of-a-cartoon-blue-fish-pv.png"); 
        img.setAttribute("width", "200");
        document.body.appendChild(img);
        var xy = position(img); 
        img.style.top = xy[0] + 'px'; 
        img.style.left = xy[1] + 'px'; 
       $(img).click(function(){ $(this).remove();}); 

    }
      myTimer = setInterval(myCounter, 1000); 
      var seconds = 0; 
      function myCounter() {
        document.getElementById("clock").innerHTML = ++seconds; 
    }
        </script>

    </body>
    </html>

javascript jquery html css

Answer 1

Answer №1

There is a function fisk(b); that you have defined, but the argument is never utilized...
The variable myTimer does not have a var declaration and should be initialized at the beginning of the code.

Initialize a new variable:

var fishes = 5;

Use this variable in your for loop (instead of hardcoding 5)
Then update this line

$(img).click(function(){ $(this).remove();});

to:

$(img).click(function(){

     fishes -= 1;
     $(this).remove();

     if(!fishes) {
        clearInterval(myTimer);
        alert("It took you "+ seconds +" seconds.");
     }

});

Answer 2

There is a function fisk(b); that you have defined, but the argument is never utilized...
The variable myTimer does not have a var declaration and should be initialized at the beginning of the code.

Initialize a new variable:

var fishes = 5;

Use this variable in your for loop (instead of hardcoding 5)
Then update this line

$(img).click(function(){ $(this).remove();});

to:

$(img).click(function(){

     fishes -= 1;
     $(this).remove();

     if(!fishes) {
        clearInterval(myTimer);
        alert("It took you "+ seconds +" seconds.");
     }

});

Answer 3

Answer №2

To keep track of counts, you have the option to use a global counter or incorporate a counter within the fisk() function (functions can act as objects).

In the example below, we demonstrate how to integrate a variable into the function. If you prefer a global variable instead, simply substitute fisk.counter with fisk_counter - just remember to initialize var fisk_counter = 0 outside of your function.

I've trimmed down the content in the fisk() function for illustrative purposes, allowing you to observe the modifications made.

function fisk() { //creating a function
    fisk.counter += 1; // increase counter
    var img = document.createElement('img'); // creates an element 
    $(img).click(function(){
        $(this).remove();
        fisk.counter -= 1; // decrease counter
        if( fisk.counter === 0 ) { // checks if all fish have been removed
            // GAME WON =)
        }
    });
}
fisk.counter = 0; // Include counter in the function

Answer 4

To keep track of counts, you have the option to use a global counter or incorporate a counter within the fisk() function (functions can act as objects).

In the example below, we demonstrate how to integrate a variable into the function. If you prefer a global variable instead, simply substitute fisk.counter with fisk_counter - just remember to initialize var fisk_counter = 0 outside of your function.

I've trimmed down the content in the fisk() function for illustrative purposes, allowing you to observe the modifications made.

function fisk() { //creating a function
    fisk.counter += 1; // increase counter
    var img = document.createElement('img'); // creates an element 
    $(img).click(function(){
        $(this).remove();
        fisk.counter -= 1; // decrease counter
        if( fisk.counter === 0 ) { // checks if all fish have been removed
            // GAME WON =)
        }
    });
}
fisk.counter = 0; // Include counter in the function

Answer 5

Answer №3

By removing the fishes from the DOM, you eliminate any chance of clicking on them again after they've been taken out. To keep track of the clicks, consider storing the count in a closure variable. Here's a suggestion:

var totalFish = 5; // Use this value in your loop that invokes the fisk() function

function winGame() {
   // Add code here to indicate that you've won the game
}

(function() {
   var removedCount = 0;
   function fisk() {
      // Set up your code;
      $(img).click(function() {
         removedCount++;
         if(removedCount === totalFish) {
            winGame();
         } else {
            $(this).remove();
         }
      });
   }
}());

Answer 6

By removing the fishes from the DOM, you eliminate any chance of clicking on them again after they've been taken out. To keep track of the clicks, consider storing the count in a closure variable. Here's a suggestion:

var totalFish = 5; // Use this value in your loop that invokes the fisk() function

function winGame() {
   // Add code here to indicate that you've won the game
}

(function() {
   var removedCount = 0;
   function fisk() {
      // Set up your code;
      $(img).click(function() {
         removedCount++;
         if(removedCount === totalFish) {
            winGame();
         } else {
            $(this).remove();
         }
      });
   }
}());

In JavaScript, alert a message once all images have been clicked

Answer №1

Answer №2

Answer №3

Similar questions

Whenever I attempt to use for or while loops in my application, it consistently crashes

AngularJS $resource sends the id as a query parameter rather than including it in the URL

Why is TypeScript giving an error about an undefined object key, even though the key was assigned a value in the previous command?

Tips for sending JSON information to a partial view

Tips for successfully passing multiple properties to a function in React

Utilizing AJAX to submit an array of form inputs and securely storing the data in MySQL using

Is there a way to use CSS to prevent a user from being able to click on a table?

Error: The function exec in matchExpr[type] is not defined

Tips for generating a unique user validation hash or token

Navigation panel positioned on one side filling up the entire content container

Focusing on styling specifically for Chrome rather than Safari using SCSS

employing flush for lodash's throttle wrapper

WebSocket connection issues are being experienced by certain users

Creating an HTML table using an array of objects

How to highlight all the text within a 'pre code block' when double-clicked using JavaScript

Displaying a Bootstrap modal with empty editing information

Is it possible to create an array that organizes monthly income data from a JSON file?

The process of updating UseContext global state in React Native and ensuring that the change is reflected across all screens

How can I utilize data retrieved from $http.get in Vue.js once the page has finished loading?

Issue with optimizing in Webpack 4