2016-12-29 3 views
1

Javascriptコードの機能に問題があると誰かに教えてもらえますか?私はリス、ナット、フェンスで試合をしています。リスがフェンスに当たると、alert("GAME OVER")が誘発し、リスがナットに当たったときに、alert("VICTORY")がトリガーします。私は自分のコンソールに何のエラーもないので、私は自分の機能に何かがないと思います。私の質問は次のとおりです。私の機能は起動しません。私は何が欠けていますか?

<!DOCTYPE html> 
<html> 
<head> 
<title>squirrel</title> 
<script 
src="https://code.jquery.com/jquery-3.1.1.min.js" 
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
crossorigin="anonymous"></script> 
<script type="text/javascript" src="game.js"></script> 
<link rel="stylesheet" type="text/css" href="style.css"> 

<script> function myFunction() { 
alert("GAME OVER"); 
} 

</script> 

</head> 

<body> 
<div class="container"> </div> 
<div class="bild"></div> 
<img src="http://www.clipartlord.com/wp- 

content/uploads/2014/10/squirrel4.png" id="squirrel"> 
<div class="nut"></div> 
<img src="http://www.free-icons-download.net/images/acorn-icon-67589.png" 
    id="nut"> 

<div class="obstacle"></div> 
<img src="http://www.clipartkid.com/images/202/garden-fence-clipart- this- 
    nice-broken-fence-clip-1m1qK1-clipart.png" id="fence"> 



<button id="timer" onclick="myVar = setTimeout(myFunction, 30000)"> Start 
    game</button> 

</body> 
</html> 

Javascriptを:

var squirrel = {}; 

squirrel.x = 1200; 
squirrel.y = -390; 

$(document).on('keydown', handletyping); 

function handletyping(event) { 
    switch (event.which) { 
    case 39: 
     $('#squirrel').css({ 
     'left': (squirrel.x += 10) + 'px' 
     }); 
     break; 

    case 40: 
     $('#squirrel').css({ 
     'top': (squirrel.y += 10) + 'px' 
     }); 
     break; 

    case 37: 
     $('#squirrel').css({ 
     'left': (squirrel.x -= 10) + 'px' 
     }); 
     break; 

    case 38: 
     $('#squirrel').css({ 
     'top': (squirrel.y -= 10) + 'px' 
     }); 
     break; 

    } 
} 



function contact() { 
    if (squirrel.x >= nut.x && squirrel.x - squirrel.width <= nut.x + nut.width) { 
    alert("VICTORY"); 
    } 
    if (squirrel.y >= nut.y && squirrel.y - squirrel.width <= nut.y + nut.width) { 
    alert("VICTORY"); 
    } 
    document.getElementById("squirrel").style.left = x + "px"; 
    document.getElementById("squirrel").style.top = y + "px"; 
} 

function loss() { 
    if (squirrel.x >= fence.x && squirrel.x - squirrel.width <= fence.x + fence.width) { 
    alert("GAME OVER"); 
    } 
    if (squirrel.y >= fence.y && squirrel.y - squirrel.width <= fence.y + fence.width) { 
    alert("GAME OVER"); 
    } 
    document.getElementById("squirrel").style.left = x + "px"; 
    document.getElementById("squirrel").style.top = y + "px"; 
} 

CSS:

.bild { 
    background-color: green; 
    border: 2px solid black; 
    height: 400px; 
    width: 600px; 
    margin: 0 auto; 
    border-radius: 50px; 
    overflow: hidden; 
} 
#squirrel { 
    width: 35px; 
    height: 30px; 
    position: relative; 
    left: 1200px; 
    top: -390px; 
} 
#nut { 
    width: 40px; 
    height: 30px; 
    position: absolute; 
    left: 670px; 
    top: 360px; 
} 
#fence { 
    width: 500px; 
    height: 30px; 
    position: absolute; 
    left: 700px; 
    top: 320px; 
} 
#timer { 
    position: absolute; 
    left: 500px; 
    top: 200px; 
} 
+0

'<ボタンID = "タイマー" onclickの= "のsetTimeout(MyFunctionを、30000)"> ゲームを起動します(と賢明のように他のアラートの)あるべき裏返し持っていると信じています ' –

+0

実際に連絡先や連絡先の機能をどこに呼びますか? – PMV

+0

私は彼が 'alert();'関数が何らかの警告を表示していない理由を知りたかったと思う。 –

答えて

-1
<button id="timer" onclick="myVar = setTimeout(myFunction, 30000)"> Start 
game</button> 

<script> 
$(document).ready(function(){ 
    $("#timer").click(function(){ alert("Game Over"); } 
}); 
</script> 

あなたはまた、jqueryのを使用することができます。

0

は、私はあなたの兆候が

function loss() { 
    if (squirrel.x <= fence.x && squirrel.x - squirrel.width >= fence.x + fence.width) { 
    alert("GAME OVER"); 
    } 
    if (squirrel.y <= fence.y && squirrel.y - squirrel.width >= fence.y + fence.width) { 
    alert("GAME OVER"); 
    } 
関連する問題