我一直在做一個相當簡單的遊戲,類似於重擊一個痣,而是使用蛇。我試過並嘗試過,但無法解決爲什麼當我嘗試通過瀏覽器打開遊戲時遊戲無法啓動。問題似乎是添加了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>