適用於任何分辨率的HTML5 JS游戲

Question

我們將為兒童制作一系列教育內容，例如課程，運動和游戲，供OLPC xo使用。 我們將使用HTML5和JavaScript。 以前，他們曾使用Flash。

xo的分辨率為900x1200。 內容雖然主要是為xo創建的，但也將在線使用。 以前在Flash中創建的內容可以在任何分辨率下很好地縮放。 我該怎么做才能在HTML5 + JS內容中具有相同的行為。 到目前為止，幾乎沒有樣本內容使用絕對定位的900x1200固定分辨率。 它們在xo上看起來很棒，但在台式機上的各種分辨率上看起來都不好。

任何幫助/指導將不勝感激。

Answer 1

動態計算窗口大小並初始化其他參數，而不是固定分辨率。 “ window.innerHeight”和“ window.innerWidth”將檢查瀏覽器窗口上的可用大小。 或者使用“ screen.height”和“ screen.width”動態計算屏幕的分辨率。 讓我知道您是否需要澄清。

Answer 2

您可以使用以下transform: scale(scaleRatio);輕松縮放Web內容transform: scale(scaleRatio); CSS屬性。 盡管這是CSS3標准的一部分，但大多數瀏覽器現在都為此屬性使用特定的前綴，例如：-moz，-webkit，-ms，-o。

您可以閱讀有關MDN transform更多信息。

Answer 3

來自Scirra的Tom，我們是一個由2人組成的團隊，他們正在制造一個稱為Construct 2的HTML5游戲引擎，您可能想看看它似乎就在您的街道上。

構造2可以處理多種屏幕尺寸，這對於將HTML5游戲和應用程序部署到具有多種分辨率的移動設備上至關重要。 查看我們的有關如何在“構造2”中進行管理的教程：

http://www.scirra.com/tutorials/73/supporting-multiple-screen-sizes