Question

我一直在做一个相当简单的游戏，类似于打击鼹鼠，但却使用蛇。我已经尝试过并试过但是无法理解为什么当我尝试通过浏览器打开游戏时游戏无法启动。问题似乎是添加了try_again功能，因为游戏工作正常，直到我尝试添加此功能但我无法确切地看到根本原因是什么。感谢任何帮助！

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<style>

body{
height: 100%;
width: 100%;
overflow: hidden;
}

.snake {
background-color: rgb(36, 176, 79);
border-radius: 100px 100px 0px 0px;
height: 100%;
width: 10%;
position: absolute;
top: 100%;
background-image: url(snake.png);
background-repeat: no-repeat;
background-size: 100%;
}

#snake1{ left:10%; }
#snake2{ left:45%; }
#snake3{ left:80%; }

.score{ font-family: arial; font-size: 5vw; position: absolute; right: 50%;}
</style>

<script>

jQuery(document).ready(function(){

var add = 0;

function game_over(){
                jQuery(".snake").stop().animate({"top";"100%"}, 300);
                jQuery(".score").html("Game Over Motherfucker!");
                jQuery(".score").append("<div class= 'try_again'>TRY AGAIN</div>");

}

function start(){
        add = 0;
        jQuery(".score").html("Score: " + add);
        jQuery(".snake").animate({"top": "0%"}, 5000, function(){
                game_over();
                jQuery(".try_again").click(function(){start();});
        });

}

jQuery(".snake").hover(function(){

    jQuery(this).css("background-image", "url(hurt.png)");
    jQuery(this).stop().animate({"top":"100%"}, 300, function(){

        add = add - (-1);
        jQuery(".score").html("Score: " + add);
        jQuery(this).css("background-image", "url(snake.png)");
        jQuery(".snake").animate({"top": "0%"}, 5000, function(){
                game_over();
                jQuery(".try_again").click(function(){start();});
        });

    });
});

start();
}

});
</script>

</head>

<body>

    <div class="score"> Score: 0 </div>

<div class="snake" id="snake1"></div>
<div class="snake" id="snake2"></div>
<div class="snake" id="snake3"></div>


</body>

</html>

Answer 1

您有一些语法错误

1）jQuery(".snake").stop().animate({"top";"100%"}, 300);

应该是

  jQuery(".snake").stop().animate({"top":"100%"}, 300);

2）

start();
}//this is in addition you should remove it

});
</script>

以下是固定代码：

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <style>
    body {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .snake {
      background-color: rgb(36, 176, 79);
      border-radius: 100px 100px 0px 0px;
      height: 100%;
      width: 10%;
      position: absolute;
      top: 100%;
      background-image: url(snake.png);
      background-repeat: no-repeat;
      background-size: 100%;
    }

    #snake1 {
      left: 10%;
    }

    #snake2 {
      left: 45%;
    }

    #snake3 {
      left: 80%;
    }

    .score {
      font-family: arial;
      font-size: 5vw;
      position: absolute;
      right: 50%;
    }
  </style>

  <script>
    jQuery(document).ready(function() {

      var add = 0;

      function game_over() {
        jQuery(".snake").stop().animate({
          "top":"100%"
        }, 300);
        jQuery(".score").html("Game Over Motherfucker!");
        jQuery(".score").append("<div class= 'try_again'>TRY AGAIN</div>");

      }

      function start() {
        add = 0;
        jQuery(".score").html("Score: " + add);
        jQuery(".snake").animate({
          "top": "0%"
        }, 5000, function() {
          game_over();
          jQuery(".try_again").click(function() {
            start();
          });
        });

      }

      jQuery(".snake").hover(function() {

        jQuery(this).css("background-image", "url(hurt.png)");
        jQuery(this).stop().animate({
          "top": "100%"
        }, 300, function() {

          add = add - (-1);
          jQuery(".score").html("Score: " + add);
          jQuery(this).css("background-image", "url(snake.png)");
          jQuery(".snake").animate({
            "top": "0%"
          }, 5000, function() {
            game_over();
            jQuery(".try_again").click(function() {
              start();
            });
          });

        });
      });

      start();


    });
  </script>

</head>

<body>

  <div class="score"> Score: 0 </div>

  <div class="snake" id="snake1"></div>
  <div class="snake" id="snake2"></div>
  <div class="snake" id="snake3"></div>


</body>

</html>

Answer 2

有一些语法错误：

1）

$(".snake").stop().animate({"top";"100%"}, 300);

应该是

$(".snake").stop().animate({"top":"100%"}, 300);

（替换;带:)：

2）

start();
}

}}是一个孤儿，需要删除。

纠正这些并且它似乎工作正常。您可以通过打开浏览器开发人员工具（在大多数桌面浏览器上按F12）并查看控制台来自行查看这些错误。当任何事情都不起作用时，这应该是你的第一步。

简单的HTML5 / JQuery游戏出错

2 个答案: