0

我一直在用纯 JavaScript/CSS/HTML 开发游戏，我遇到了问题，我的 1920x1080 手机将我的游戏显示为 586x330，像素显示比为 3。我想知道的是如何让我的游戏在高清屏幕上运行，因为我不想在可能是高分辨率的情况下玩低分辨率游戏。

当我在网络浏览器（台式机或移动设备）上运行游戏时，像素密度为 1，所以一切都很好，当我使用 PhoneGap 作为 android 应用程序运行它时会出现问题。

任何帮助将不胜感激，我被困在这里。

谢谢，

4

1 回答 1

0

我假设您正在使用该<canvas>元素，因为它是大多数游戏的图形基础。

如果是这种情况，您需要确保只使用它的内联width和height属性来调整它的大小。通过内联，我的意思是那些字面上嵌入在 html 中：

<canvas width="--your width--" height="--your height--">
</canvas>

您要确保没有其他尺寸应用于您的画布。

这些都不是：

/* style.css */
canvas {
    transform: scale(1.5, 1.5);
}

甚至没有：

/* style.css */
canvas {
    width: 100%;
    height: 100%;
}

问题是画布必须使用的分辨率像素数仅由其内联width和height属性定义。如果您希望您的画布与您的手机屏幕具有相同的分辨率，您需要使用 javascript 来修改它width，并且height每当屏幕尺寸发生变化时：

/* thing.js */
var resizeCanvas = function() {
    var canvasElem = getYourCanvasElement();

    canvasElem.width = getWidthOfScreen();
    canvasElem.height = getHeightOfScreen();
}

// Make sure canvas fits initially...
whenPageLoads(resizeCanvas);

// And then resize it whenever needed
whenScreenSizeChanges(resizeCanvas);

当然我不知道你使用的是什么框架，所以代码只是一个模板。您需要决定如何实现getYourCanvasElement、getWidthOfScreen、getHeightOfScreen、whenPageLoads和whenScreenSizeChanges。

编辑：可能会影响画布大小的另一件事是浏览器视口缩放。这里有很好的洞察力。

于 2017-01-31T23:54:40.857 回答