refactore draw_tile

This commit is contained in:
klangner 2020-10-18 13:07:36 +02:00
parent 6d25e17e44
commit d6b7c29736

View File

@ -5,6 +5,7 @@ const CELL_SIZE = 15;
const GRID_COLOR = "#CCCCCC"; const GRID_COLOR = "#CCCCCC";
const DEAD_COLOR = "#FFFFFF"; const DEAD_COLOR = "#FFFFFF";
const ALIVE_COLOR = "#000000"; const ALIVE_COLOR = "#000000";
const TILE_SIZE = 39;
var world = null; var world = null;
const width = 80; const width = 80;
@ -63,37 +64,16 @@ function newRandomGen() {
const renderLoop = () => { const renderLoop = () => {
// universe.tick(); // universe.tick();
// drawGrid();
drawCells(); drawCells();
requestAnimationFrame(renderLoop); requestAnimationFrame(renderLoop);
}; };
const drawGrid = () => {
ctx.beginPath();
ctx.strokeStyle = GRID_COLOR;
// Vertical lines.
for (let i = 0; i <= width; i++) {
ctx.moveTo(i * (CELL_SIZE + 1) + 1, 0);
ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * height + 1);
}
// Horizontal lines.
for (let j = 0; j <= height; j++) {
ctx.moveTo(0, j * (CELL_SIZE + 1) + 1);
ctx.lineTo((CELL_SIZE + 1) * width + 1, j * (CELL_SIZE + 1) + 1);
}
ctx.stroke();
};
const getIndex = (row, column) => { const getIndex = (row, column) => {
return row * width + column; return row * width + column;
}; };
const is_inner_wall = (tiles, col, row) => { const is_inner_wall = (tiles, col, row) => {
for (let c = Math.max(col-1, 0); c < Math.min(col+2, width); c++) { for (let c = Math.max(col-1, 0); c < Math.min(col+2, width); c++) {
for (let r = Math.max(row-1, 0); r < Math.min(row+2, height); r++) { for (let r = Math.max(row-1, 0); r < Math.min(row+2, height); r++) {
if ((c != col || r != row) && tiles[getIndex(r, c)] == Cell.Floor) { if ((c != col || r != row) && tiles[getIndex(r, c)] == Cell.Floor) {
@ -105,23 +85,13 @@ const is_inner_wall = (tiles, col, row) => {
return true; return true;
} }
const drawCells = () => { const draw_tile = (ctx, row, col, tile_type) => {
const tilesPtr = world.tiles();
const tiles = new Uint8Array(memory.buffer, tilesPtr, width * height);
const tile_size = 39;
ctx.beginPath();
for (let row = 0; row < height; row++) {
for (let col = 0; col < width; col++) {
const idx = getIndex(row, col);
var tile_x = 0; var tile_x = 0;
var tile_y = 0; var tile_y = 0;
if (tiles[idx] == Cell.Floor) { if (tile_type == "floor") {
tile_x = 3; tile_x = 3;
tile_y = 2; tile_y = 2;
} else if (is_inner_wall(tiles, col, row)){ } else if (tile_type == "inner_wall") {
tile_x = 18; tile_x = 18;
tile_y = 0; tile_y = 0;
} else { } else {
@ -130,14 +100,33 @@ const drawCells = () => {
} }
ctx.drawImage( ctx.drawImage(
tiles_image, tiles_image,
tile_x * tile_size+3, tile_x * TILE_SIZE + 3,
tile_y * tile_size+3, tile_y * TILE_SIZE + 3,
tile_size-3, TILE_SIZE - 3,
tile_size-3, TILE_SIZE - 3,
col * CELL_SIZE, col * CELL_SIZE,
row * CELL_SIZE, row * CELL_SIZE,
CELL_SIZE, CELL_SIZE,
CELL_SIZE); CELL_SIZE);
}
const drawCells = () => {
const tilesPtr = world.tiles();
const tiles = new Uint8Array(memory.buffer, tilesPtr, width * height);
ctx.beginPath();
for (let row = 0; row < height; row++) {
for (let col = 0; col < width; col++) {
const idx = getIndex(row, col);
if (tiles[idx] == Cell.Floor) {
draw_tile(ctx, row, col, "floor");
} else if (is_inner_wall(tiles, col, row)){
draw_tile(ctx, row, col, "inner-wall");
} else {
draw_tile(ctx, row, col, "wall");
}
} }
} }