这是 StackExchange 的 GameDev 部分的转贴，然而，我发现这个问题似乎更适用于 StackOverflow，因为它更多地涉及 CSS、JS 和定位技术，而不是前者讨论的 JavaScript 主题（主要是 UnityScript 和 Phaser）。
我一直在用 HTML5制作一个roguelike 风格的游戏，而不使用带有纯 JS（小提琴！ ）的画布（只有 div）。我一直在尝试放大图块大小（字体大小），同时保持播放器在相机内居中。由于某种原因，当瓦片大小不等于地图大小时，相机会稍微偏离。
请注意，3D 效果是故意的；我相信它增加了一些非常需要的深度，而且看起来超级酷。:D
当tileScale（小提琴中的第 4 行）是9（非常不受欢迎；玩家 y 轴上的点应该对齐，而不是小角度）：
tileScale什么时候25（点！）：
这是一些相关的（修剪过的）代码：
window.onresize = function(){
game.viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
game.viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
game.windowSize = Math.min(game.viewportWidth, game.viewportHeight);
// Droid Sans Mono has a ratio of 3:4 (width:height), conveniently.
// This may be problematic. I'm not sure.
game.tileWidth = game.windowSize*.6 / game.tileScale;
game.tileHeight = game.windowSize*.8 / game.tileScale;
}
// Update the camera position (needs help?)
this.updateCamera = function(){
// Get player coordinates (-.5 because we need to get the player tile center)
// times the tileWidth plus the game window (inner square) size divided by two.
var left = ((-game.player.x-.5)*game.tileWidth+game.windowSize/2)+"px";
var top = ((-game.player.y-.5)*game.tileHeight+game.windowSize/2)+"px";
game.planeContainer.style.left = left;
game.planeContainer.style.top = top;
}
如何确保屏幕中心的点始终对齐，而不是略微倾斜？我目前的证据表明该game.planeContainer物体的位置没有正确确定。
我知道这是一个非常棘手的问题，因此将不胜感激任何帮助。提前致谢！