文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

第5章步骤4 – 杂七杂八

发布于 2024-07-13 13:24:15 字数 3965 浏览 0 评论 0 收藏 0

5.1 游戏信息

让玩家知道他的飞船到底还剩多少护盾、生命应该是很有必要的吧。如果我们有个分数系统的话，最好也能显示给玩家。就像之前的#background，#actors 以及其他组，我们创建一个新组（#overlay）来包容这些信息。这里我们不再用任何的 gameQuery 函数，因为只需要显示指定的文字而已。我们需要在游戏屏幕的右上方创建两个 div 节点来显示。通过 append 函数就能实现，因为组实质上（精灵也是）是个简单的 div。

$("#overlay").append("<div id='shieldHUD'style='color: white; 
width: 100px; position: absolute; font-family: verdana, sans-serif;'>
</div><div id='lifeHUD'style='color: white; width: 100px; position: absolute;
right: 0px; font-family: verdana, sans-serif;'></div>");

我们需要保持这新信息被更新。为了解决这个，厄……对了，还得用一个回调函数。在这个回调函数当中，我们可以简单的选择这个 div，然后用新内容来替代。这里我们没法再用 append 函数了，因为它是增加内容；我们使用 html 方法（或者 text 方法），它用字符串参数来替代原来内容。

$("#shieldHUD").html("shield: "+$("#player")[0].player.shield);
$("#lifeHUD").html("life: "+$("#player")[0].player.replay);

请记住，gameQuery 写的是 html 节点，不过你仍然可以使用节点上的 jQuery 方法！

5.2 HTML 文件

html 文件做了两件事，第一件好是聚合了 jQuery、gameQuery 以及你自己写的 JavaScript 代码。然后它向广大男生女生用户展现了一个不需要任何 JavaScript 参与的静态游戏窗口。这里我仅仅展示欢饮窗口以及一个 click here 的文字。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <title>gameQuery - Tutorial 1 - Final result</title>
    <script type="text/JavaScript" src="../jquery.min.js"></script>
    <script type="text/JavaScript" src="../jquery.gamequery.js"></script>
    <script type="text/JavaScript" src="./tutorial.final.js"></script>
    <style type="text/css">
      html,body{
      margin: 0;
      padding: 0;
      background: black;
      }
      #welcomeScreen{
      width: 700px; 
      height: 250px; 
      position: absolute; 
      z-index: 100; 
      background-image: url(logo.png); 
      font-family: verdana, sans-serif;
      }
      #loadingBar{
      position: relative;
      left: 100px; 
      height: 15px; 
      width: 0px; 
      background: red;
      }
    </style>
  </head>
  <body>
    <div id="playground" style="width: 700px; height: 250px; background: black;">
      <div id="welcomeScreen">
        <div style="position: absolute; top: 120px; width: 700px; color: white;">
        <div id="loadingBar" ></div><br />
        <center><a style="cursor: pointer;" id="startbutton">
        Click here to start!
        </a></center>
        </div>
      </div>
    </div>
  </body>
</html>

5.3 开始按钮

到这一步，你已经做了所用工作，除了 开始游戏 按钮。为了实现这个，我们只需要使用 startGame 方法。你可以在你代码的最后部分调用这个方法，这样游戏就能自动开始，但我觉得把何时开始游戏的决定权交给用户更好吧。我们可以通过 cick here 文字调用这个方法，就像之前对 restart 所做的一样。

//initialize the start button
$("#startbutton").click(function(){
  $.playground().startGame(function(){
    $("#welcomeScreen").fadeTo(1000,0,function(){$(this).remove();});
  });
})

当游戏初始化完毕，所以图片声音都载入的时候，startGame 方法就会被调用。然后我们将欢迎屏幕慢慢移除。

5.4 进度条

但，大哥，html 代码里头的 loadingbar 是什么东东啊？你可能会这样问自己。当然这是个好问题，它其实就是个进度条！gameQuery 在游戏开始之前会载入所有资源，你可以通过进度条查看资源载入情况。setLoadBar 方法允许你在一个 div 上设置进度条，进度条随着资源载入而逐渐增长。你只需要提供 div 的名称以及进度条的总长度。

$().setLoadBar("loadingBar", 400);

不过需要提醒你一下，进度指示器不不是非常有效。例如，每个精灵都被认为是同样大小，一个 2kb 的精灵和 300kb 的精灵是一样的。对于声音素材，指示就更不如意了，因为没有任何插件可以探测声音载入情况，所以 gamQuery 只好尽量猜测了，它认为在最后一张图片载入完之后，声音也载入完了（当写此文档的时候，对声音的支持仍然处于实验阶段）。

5.5 结束语

厄，那就这样了。谢谢你能花时间看这个，我希望这能让你确信用 JavaScript 写游戏并不是神话！我想强调的是：你在教程中所看到学到的东西或许是开发游戏中最不重要的！当你制作游戏的时候应该关注界面友好以及可玩性！所以我推荐你能花时间在这两个领域上（但我还做到：D）。我非常期待你能用这个 js 库（或者其他）做出不同寻常的东西。

分享到QQ

分享到微博