Question

我正在使用jquery和自定义库（主要用于游戏机制）制作HTML，CSS和Javascript的Web应用程序（游戏）。

为了让游戏在一个窗口中运行，我使用以下CSS隐藏了div中的不同“页面”。

.page {
    display:none;
    top: 0px;
    left: 0px;
    z-index: -1;
}

.show {
    z-index: 0 !important;
    display:block !important;
}

目前相关的游戏代码如下：

<script type="text/javascript">


//Document ready function
$(document).ready(function() {

//Javascript to change pages. Idea is that when menuButton2 is pushed, page1 is replaced by page2 div
$("#menuButton2").onTap(function() {
  $(".page").removeClass("show");
  $("#page2").addClass("show");
    });



//When menuButton1 is pressed, page3 becomes the displayed div
$("#menuButton1").onTap(function startGame() {
  $(".page").removeClass("show");
  $("#page3").addClass("show");
    });

//Spawns flag images
$("body").append("<div id='italy' style='top: 100px'></div>");
$("#italy").moveTo(90);
$("#italy").speed(0.4);
$("#italy").autoBounceOff(true);
$("#italy").onCollision(function(otherObject) {
  if(otherObject.hasClass("football")) {
  $(this).remove();
  }
});

//When the screen is tapped, shoot function is called and event is logged.     Variable footballNumber also declared.
var footballNumber = 1;
$("body").onTap(function(shoot) {
      console.log(shoot);

//Football image is created and appended to body. It is shot up the screen from the x coordinate of the tap and number of balls is logged to console
  $("body").append("<div id='football" + footballNumber + "' class='football'></div>");
  $("#football" + footballNumber).moveTo(0);
  $("#football" + footballNumber).speed(0.3);
  $("#football" + footballNumber).css("bottom","0px");
  $("#football" + footballNumber).css("left", shoot.clientX + "px");
    console.log("Football: " + footballNumber);
    footballNumber++;
    })
  });

</script>

这个想法是，当＃menuButton1被按下时，＃page3 div显示在前面（通过z-indexing），然后我希望图像产生/拍摄控件发生和游戏。我已将函数startGame附加到按钮水龙头但尚未调用它...我已尝试这样做但无法成功。

我很感激任何建议。

谢谢。

单击div后如何调用函数？

0 个答案: