ゲーム Jump'n'Bump の HTML5 ポートを変更して、Apple および Android ベースのモバイル デバイスで実行できるようにしています。テストには安価な 1 GHz Cortex-A8 Android 4.0.3 タブレットを使用します。システムのブラウザで奇妙な動作に遭遇しました。私は通常、約1 FPSの非常に低いフレームレートを取得します(画面全体がフレームごとに再描画され、setTimeoutが使用されます...)。しかし、CSS 属性 position:fixed を持つ <div> を <canvas> タグの前に追加すると、フレームレートが急上昇し、ゲームがプレイ可能になります。
誰かこの奇妙な現象を説明してくれませんか? キャンバスのパフォーマンスに影響を与える Android ブラウザのレンダリング モードはありますか? これはクロスプラットフォームの問題ですか? ページがユーザーのブラウザで効率的に動作することを確認するにはどうすればよいですか?
私が取り組んでいるコードの概要:
<!DOCTYPE html>
<html>
<title>Jump'n'Bump - HTML5</title>
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<meta name="viewport" content = "width=400px, user-scaleable=no">
<!-- javascript files included here -->
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
body { margin: 0px 0px 0xp 0px }
canvas { border: 0px solid black; }
img.resource { display:none; }
#fixed_div { position: fixed; width: 10px; height: 10px; left: 0px; top: 0px; }
#gameArea { position: absolute; left: 0px; top: 0px; width: 400px; height: 256px; background: red; }
canvas {
image-rendering: optimizeSpeed; // Older versions of FF
image-rendering: -moz-crisp-edges; // FF 6.0+
image-rendering: -webkit-optimize-contrast; // Webkit
image-rendering: optimize-contrast; // Possible future browsers.
-ms-interpolation-mode: nearest-neighbor; // IE
}
</style>
<body onload="init()" text="#FFFFFF" bgcolor="#000000">
<!-- image resources like this here: -->
<img class="resource" id='rabbits' src='rabbit.png'/>
<!-- *** remove the line below and the game slows down *** -->
<div id='fixed_div'></div>
<div id="gameArea"><canvas id="screen" width="400" height="256"></canvas></div>
</body>
</html>