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

Rails: Utilizing AJAX to dynamically populate Bootstrap dropdown menus

Is it better to convert fields extracted from a JSON string to Date objects or moment.js instances when using Angular and moment.js together?

Failed to execute test suite in React and Jest framework

What steps can be taken to avoid an abundance of JS event handlers in React?

The Controller is encountering an empty child array when attempting to JSON.stringify it

JS-generated elements do not automatically wrap to the next line

Print out two forms separately using HTML5

Modifying the appearance and behavior of an element dynamically as the page is being loaded using AngularJS

Setting the background color in a grid column of Struts jQuery Grid is a simple and effective way to customize

Adjusting a parameter according to the width of the browser window?

The JSON data sent from the primary Electron process is arriving as undefined in the renderer

React - utilize a variable as the value for an HTML element and update it whenever the variable undergoes a change

Streamline the process of implementing a sticky menu scroll function with jQuery

Why does the div inside the tbody element get automatically shifted outside of the tbody during rendering?

What steps do I need to take to successfully implement a $.fn. function that runs automatically when it is called?

What is the best method for positioning two forms in a vertical arrangement?

Is it possible to adjust the size of a p5.js canvas within a bootstrap Div container?

One column stretching all the way to the window's edge while the other column stays contained within its container

css - align the arrow to the right in a dropdown

Issue with showing multiple images on HTML page