シンプルな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ゲームでエラーが発生しました

答えて

関連する問題