Question

我试图为我正在进行的游戏制作小地图，我希望它能在我的画布的右下角显示，即使我改变了窗口的大小。

我有一个jquery代码来更改画布的大小以及更改时的全局WIDTH和HEIGHT变量：

$(window).resize(function()
{
    ctx.canvas.width = $(window).width();
    ctx.canvas.height = $(window).height();
    WIDTH = $(window).width();
    HEIGHT = $(window).height();
});

这是我现在所拥有的，但它并没有真正发挥作用：

var minimap = // Object to draw minimap (in-progress)
{
    width: WIDTH / 5,
    height: HEIGHT / 5,
    x: ((WIDTH / 5) * 4),
    y: ((HEIGHT / 5) * 4)
};

var updateMiniMap = function()
{
    var HorW = (HEIGHT < WIDTH) ? HEIGHT : WIDTH;

    minimap.width = HorW / 5;
    minimap.height = HorW / 5;
    minimap.x = ((WIDTH / 5) * 4);
    minimap.y = ((HEIGHT / 5) * 4);
};

这就是我想要的：

 _______________
|              |
|              |
|              |
|          ----|
|__________|___|

当窗口变小时，方块保持相同的大小：

____________
|          |
|      ----|
|______|___|

Answer 1

捕获屏幕大小并使用事件侦听器在更改时捕获屏幕大小。

在此帖子JavaScript window resize event

上查看 Alex V 回答

此外，您的计算看起来很好，因为小地图的20％的屏幕足够且对用户可读，小于那将是困难的用户体验。

您需要的第二件事是在minimap容器上使用CSS。你可以在div元素中包含小地图，并给它一个通过CSS控制的类。类似的东西：

<div id="minimap" class="minimap-container">....</div>

然后从CSS：

.minimap-container {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 99999;
}

这个CSS只是为了控制小地图的位置。如果你注意到我没有在上面的CSS中添加宽度和高度属性，那是因为你将使用Javascript来控制它，而不是使用任何方法（更简单的是getElementById）。

我希望这会给你足够的洞察力来完成你的项目。

试图为我的游戏制作小地图

1 个答案: