Question

我的javascript代码存在轻微问题。我正在为一个学校项目制作一个游戏，它是用鱼竿在鱼上点击（去除鱼）。但是现在你无法赢得比赛，因为当我点击（删除）所有鱼类时，我还没有弄清楚如何让游戏停止。在这下面是我的整个HTML代码和javascript代码，如果你想看看。还有一个jsbin链接，你可以看到所有css和html和javascript一起运行的游戏，所以你更容易看到我的意思。有人知道如何在点击（删除）所有鱼类时停止游戏并发出警告说“你赢了！”。

由于

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>Fiskaren</h1>
      <img id="fiskespo" src ="https://pixabay.com/static/uploads/photo/2014/03/24/17/07/fishing-rod-295096_960_720.png">
    <p>Sekunder:</p>
      <p id="klocka"></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 bana">
    </form> 


        <script> 
      document.body.style.cursor = 'none'; // tar bort muspekaren
    $(document).mousemove(function (e) { //gör en funktion för musen
       $('#fiskespo').offset({  // tar fram bilden
            left: e.pageX + -190,  //positonerar musen på bilden
            top: e.pageY + -110//positonerar musen på bilden
        });
    });

      var b = 1; 
      for (var i= 0; i<5;i++){ // skapar en loop som skriver ut 5 stycken bilder på fiskar
      fisk(b);// länkar till funktionen fisk där bilden som ska ligga i loopen finns.
      }
    function positionering(element) { //skapar en funktion som ska göra allt random
        var x = document.body.offsetHeight-element.clientHeight;
        var y = document.body.offsetWidth-element.clientWidth;
        var Xled = Math.floor(Math.random()*1*x + 300);
        var Yled = Math.floor(Math.random()*y + 50);

        return [Xled,Yled]; //stoppar funktionen och positionerar bilderna med hjälp av funktionen randomX och randomY


    }

    function fisk() { //skapar en funktion

        var img = document.createElement('img'); //skapar ett elememt som heter img
        img.className = 'fisk2';
        img.setAttribute("style", "position:fixed;");//positionerar dom
        img.setAttribute("src", "http://res.freestockphotos.biz/pictures/16/16806-illustration-of-a-cartoon-blue-fish-pv.png"); // tar fram bilderna
        img.setAttribute("width", "200");// bestämmer bredden på bilden
        document.body.appendChild(img);// bifogar body till img 
        var xy = positionering(img); // ger xy random position
        img.style.top = xy[0] + 'px'; //positionerar bilderna
        img.style.left = xy[1] + 'px'; //positionerar bilderna
       $(img).click(function(){ $(this).remove();}); //skapar en onclick funktion som gör så att om man klickar på bilden försvinner den

    }
      myTimer = setInterval(myCounter, 1000); //bestämmer hur lång tiden ska vara (1000 = 1 vanlig sekund)
      var seconds = 0; //sekunden den börjar på
      function myCounter() {
        document.getElementById("klocka").innerHTML = ++seconds; //räknar klockan i sekunder
    }
        </script>

    </body>
    </html>

Answer 1

你有myTimer，但你从不使用那个论点......
var错过了var fishes = 5;，应该在代码顶部定义。

创建一个var

在for循环中使用该var（而不是$(img).click(function(){ $(this).remove();});）
比编辑此行$(img).click(function(){ fishes -= 1; $(this).remove(); if(!fishes) { clearInterval(myTimer); alert("It took you "+ seconds +" seconds."); } });为：

{{1}}

Answer 2

您可以使用全局计数器或向函数fisk()添加计数器（函数可以像对象一样使用）

下面你会找到一个向函数添加变量的例子。如果您更喜欢使用glob变量，则可以将fisk.counter替换为fisk_counter - 只是不要忘记在函数之外声明var fisk_counter = 0。

出于演示目的，我删除了fisk()函数中的大部分代码，以便您可以看到更改。

function fisk() { //skapar en funktion
    fisk.counter += 1; // increment counter
    var img = document.createElement('img'); //skapar ett elememt som 
    $(img).click(function(){
        $(this).remove();
        fisk.counter -= 1; // decrement counter
        if( fisk.counter === 0 ) { // check if all fishes have been removed
            // GAME WON =)
        }
    });
}
fisk.counter = 0; // Add counter to function

Answer 3

由于您实际上从DOM中移除了鱼类，因此您一旦删除它们就不可能再次单击它们，因此您应该只能计算闭包变量中的点击次数。试试这样的事情

var totalNumFishes = 5; // use this in your loop that calls the fisk() function

function gameWon() {
   // Some code that tells you that you have won the game.
}

(function() {
   var removed = 0;
   function fisk() {
      // Your setup code;
      $(img).click(function() {
         removed++;
         if(removed === totalNumberOfFishes) {
            gameWon();
         } else {
            $(this).remove();
         }
      });
   }
}());

Javascript，单击所有图像时打印出消息

3 个答案: