Question

有人能告诉我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;
}

Answer 1

我相信你的标志应该被翻转（并且对于其他警报也是明智的）

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");
  }

Answer 2

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

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

您也可以使用jquery。

我的功能没有触发。我错过了什么？

2 个答案: