1

我正在尝试 Crafty.js 来做一些基本的游戏，它在桌面浏览器上完美运行，但在移动设备上填满了整个屏幕。这是我的网页：

<html>
<head>
  <title>Game</title>
  <script src="/javascripts/crafty.js" type="text/javascript">
  </script>
  <script src="/javascripts/homeGame.js" type="text/javascript">
</script>
</head>

<body style="margin:0 0">
  <div id="cr-stage"></div>
</body>
</html>

最后是我的游戏（homegame.js）：

window.onload = function() {

    Game = {
  // Initialize and start our game
  start: function() {
    // Start crafty and set a background color so that we can see it's working
    Crafty.init(480, 320);
    Crafty.background('#2d3d4b');
  }
}

Game.start();

}

我尝试使用视口元标记，但没有奏效 此外，crafty.js 网站上的入门游戏在移动设备上也有同样的问题：http: //buildnewgames.com/assets/article//introduction-to-crafty /tut_bng/index.html。

任何想法如何解决它？

4

1 回答 1

1

我发现了问题（或者它可能是一个功能）。在 crafty.js 的第 4282 行，内容如下：

* If Crafty.mobile is equal true Crafty does some things under hood:
    * ~~~
    * - set viewport on max device width and height
    * - set Crafty.stage.fullscreen on true
    * - hide window scrollbars
    * ~~~
    * 
    * @see Crafty.viewport
    */
    if (mobile) Crafty.mobile = mobile[0];

如果您评论上面的行并将其替换为下面的行，则它可以工作

if (mobile) Crafty.mobile = false;

我只是更喜欢让用户决定是否要缩放。

干杯

于 2013-05-04T21:29:42.023 回答