Dei uma arrumada no seu código e ficou assim:
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
var grass = new Image();
var sand = new Image();
grass.src = "http://i42.tinypic.com/2ljm6w9.png";
sand.src = "http://www.tibiawiki.com.br/images/7/7a/Sand_Tile.gif";
var images = [grass, sand];
var tsize = 32; // Tile size.
var mapArray = [[0,0,0,0,0,0,0,0,0,1,0,0,0],
[0,0,0,0,0,0,0,0,0,1,0,0,0],
[0,0,0,0,0,0,0,0,0,1,0,0,0],
[0,0,0,0,0,0,0,0,0,1,0,0,0],
[0,0,0,0,0,0,0,0,0,1,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,1,1,1,1,1,1,1,1,1,1,1,1]];
var fieldWidth = mapArray[0].length;
var fieldHeight = mapArray.length;
// Cam configs.
var camX = 0;
var camY = 0;
var camWidth = 320;
var camHeight = 160;
// Others.
var offsetX = 0;
var offsetY = 0;
function draw() {
requestAnimationFrame(draw);
var startCol = Math.floor(camX / tsize);
var endCol = startCol + (camWidth /tsize);
var startRow = Math.floor(camY / tsize);
var endRow = startRow + (camHeight /tsize);
var offsetX = -camX + startCol * tsize;
var offsetY = -camY + startRow * tsize;
console.log(startCol + "," + endCol + "," + startRow + "," + endRow);
ctx.fillStyle = "#0000FF";
ctx.fillRect(0, 0, camWidth, camHeight);
for (var r = Math.max(0, startRow); r <= endRow && r < fieldHeight; r++) {
for (var c = Math.max(0, startCol); c <= endCol && c < fieldWidth; c++) {
var x = (c - startCol) * tsize + offsetX;
var y = (r - startRow) * tsize + offsetY;
ctx.drawImage(images[mapArray[r][c]], x, y);
}
}
}
document.addEventListener("keydown", function(e) {
if (e.keyCode == 40) {
camY += 1;
}
if (e.keyCode == 39) {
camX += 1;
}
if (e.keyCode == 38) {
camY -= 1;
}
if (e.keyCode == 37) {
camX -= 1;
}
});
draw();
<html>
<head>
<title>Scrolling Tiled Map</title>
</head>
<body>
<canvas id="canvas1" width="320" height="160" style = "border: 1px solid black;"></canvas>
<script src="javascript.js"></script>
</body>
</html>
As mudanças que fiz são:
Implementei o scroll para as teclas acima e abaixo.
Coloquei as imagens em um array, assim fica mais fácil acessá-las pelos índices que estiverem no
mapArray
. Isso elimina a necessidade de usarif(mapArray[r][c] == 0)
e também faz com que fique bem fácil de se adicionar novas figuras.Coloquei um fundo azul padrão. Esse fundo será visível se a sua viewport (
camX
,camY
,camX + camWidth
,camY + camHeight
) visualizar áreas que possam estar fora da matriz, além das suas bordas. Sem isso, o resultado é que os pixels antigos eram largados para trás, resultando em sujeira e artefatos no desenho para áreas que estiverem fora da matriz.Aqui você usou
startCol
ao invés destartRow
:var y = (r - startCol) * tsize + offsetY;
Introduzi as variáveis
fieldWidth
efieldHeight
para eu poder ter o tamanho da matriz facilmente.Adicionei a palavra-chave
var
nas variáveisoffsetX
eoffsetY
.Alterei a inicialização nos laços
for
para o seguinte:var r = Math.max(0, startRow); var c = Math.max(0, startCol);
O motivo de fazer isso é para nunca acessar
mapArray[r][c]
quandor
ouc
forem negativos (ou seja, ultrapassando os limites esquerdo e/ou superior da matriz).Alterei a condição de parada dos laços
for
para o seguinte:r <= endRow && r < fieldHeight; c <= endCol && c < fieldWidth;
O motivo das expressões após o
&&
é para ele não acessarmapArray[r][c]
quandor
ouc
ultrapassar os limites direito e/ou inferior da matriz.Já o motivo pelo qual eu uso
<=
ao invés de<
é que o viewport pode não se alinhar exatamente a grid de tiles. Desta forma, embora a altura do viewport seja igual a de 5 tiles, podem haver 6 linhas de tiles visíveis, sendo 4 linhas completas, metade da primeira linha visível na parte superior e metade da última linha visível na parte inferior. O mesmo princípio se aplica também às colunas.