Javascript 未生成rpg游戏地图的HTML5画布视口

我正在通过一些在线示例，试图了解HTML5游戏是如何组合起来的

我已经开始考虑一些基本问题，比如游戏循环，以及分离更新和渲染逻辑

我正处于这样一个阶段，我可以从一个平铺集生成一个贴图，并渲染一个角色，这个角色可以在移动时四处走动并使其精灵动画化

我一直在努力解决的是视口在角色移动时跟随角色的方式。它大部分是工作的，相机会跟随-然而，它在生成的地图上有一个非常奇怪的效果

到目前为止，代码相当长，但我已经创建了一个JSFIDLE，其中包含了当前的工作方式，它说明了我遇到的问题。可以使用箭头键移动角色

顺便说一句，我注意到如果角色走到左上角，它似乎是好的

生成地图的代码是：

tileSize=game.currentMap.tileset.tileWidth

if (player.x >= (game.viewport.x / 2)) r = Math.floor(player.x - ((map.width * map.tileset.tileWidth) / 2))

for (r = Math.floor(game.viewport.x / map.tileset.tileWidth); r < Math.floor(game.viewport.x / map.tileset.tileWidth) + canvas.width / map.tileset.tileWidth + 1; r++) {
    for (c = Math.floor(game.viewport.y / map.tileset.tileHeight); c < Math.floor(game.viewport.y / map.tileset.tileHeight) + canvas.height / map.tileset.tileHeight + 1; c++) {
        var tile = ground[r][c];
        var tileRow = (tile / game.currentMap.tileset.tilesInImgRow) | 0; // Bitwise OR operation
        var tileCol = (tile % game.currentMap.tileset.tilesInImgRow) | 0;
        ctx.drawImage(
        game.currentMap.tileset.image, (tileCol * tileSize), (tileRow * tileSize),
        tileSize,
        tileSize, (c * tileSize) - game.viewport.x, (r * tileSize) - game.viewport.y,
        tileSize,
        tileSize);

        tile = layer1[r][c];
        tileRow = (tile / game.currentMap.tileset.tilesInImgRow) | 0;
        tileCol = (tile % game.currentMap.tileset.tilesInImgRow) | 0;
        ctx.drawImage(
        game.currentMap.tileset.image, (tileCol * tileSize), (tileRow * tileSize),
        tileSize,
        tileSize, (c * tileSize) - game.viewport.x, (r * tileSize) - game.viewport.y,
        tileSize,
        tileSize);


    }
}

---

}

好吧，在玩了几天的代码和喝了很多杯咖啡之后，我已经设法解决了我自己的问题，我想我会与其他有类似问题的人分享

更新视口的代码很好，问题在于指定给视口的初始值以及贴图x和y平铺的迭代方式

在游戏变量中，我将视口更改为：

viewport: {
    x: Math.floor(player.x - (canvas.width / 2)),
    y: Math.floor(player.y - (canvas.height / 2))
},

然后在drawMap函数中：

for (r = 0; r < map.rowTileCount; r++) {
for (c = 0; c < map.colTileCount; c++) {

for（r=0；r

通过这种方式，我们总是生成完整的地图（可能不必要地使用额外的资源，但我们总是可以稍后再回来查看），然后我们只将其中的一部分剪切到画布上，这正是我想要的

var game = {
images: 0,
imagesLoaded: 0,
backgroundColor: '#000',
viewport: {
    x: Math.floor(player.x - (canvas.width / 2 - playerSpriteSize / 2)),
    y: Math.floor(player.y - (canvas.height / 2 - playerSpriteSize / 2))
},
currentMap: map,
fps: 0,
lastfps: 0,
fpsTimer: 0

viewport: {
    x: Math.floor(player.x - (canvas.width / 2)),
    y: Math.floor(player.y - (canvas.height / 2))
},

for (r = 0; r < map.rowTileCount; r++) {
for (c = 0; c < map.colTileCount; c++) {