在简单的HTML5/JQuery游戏中的错误

-1

我一直在做一个相当简单的游戏，类似于重击一个痣，而是使用蛇。我试过并尝试过，但无法解决为什么当我尝试通过浏览器打开游戏时游戏无法启动。问题似乎是添加了try_again功能，因为游戏运行正常，直到我尝试添加这个设备，但我无法确切地看到根本原因。任何帮助感激地收到！在简单的HTML5/JQuery游戏中的错误

<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>

来源

2017-02-09 D. West

你有一些语法错误

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>

来源

2017-02-09 16:13:25

有几个语法错误的：

1）

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

应该是

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

（代替;与:)

2）

start(); 
}

该}是孤儿，需要去除。

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

来源

2017-02-09 16:15:44 ADyson

在简单的HTML5/JQuery游戏中的错误

回答

相关问题