projects/here_be_dragons
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added tiles. Fixed #11

Browse Source
This commit is contained in:
klangner 2020-10-17 21:47:59 +02:00
parent e7a02ed91f
commit 8ba9fa304a
6 changed files with 41 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
demo/www/.DS_Store vendored Normal file
View File

Binary file not shown.

0
demo/www/favicon.ico → demo/www/assets/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

BIN
demo/www/assets/tiles.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

1
demo/www/index.html
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="icon" type="image/png" href="/assets/favicon.ico" />
<title>Mapgen demo</title> <title>Mapgen demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

53
demo/www/index.js
View File

@ -1,7 +1,7 @@
import {Cell, World} from "mapgen-demo"; import {Cell, World} from "mapgen-demo";
import { memory } from "mapgen-demo/mapgen_demo_bg"; import { memory } from "mapgen-demo/mapgen_demo_bg";
const CELL_SIZE = 12; 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";
@ -14,8 +14,11 @@ const infoDiv = document.getElementById('map-info');
// Give the canvas room for all of our cells and a 1px border // Give the canvas room for all of our cells and a 1px border
// around each of them. // around each of them.
const canvas = document.getElementById("mapgen-canvas"); const canvas = document.getElementById("mapgen-canvas");
canvas.height = (CELL_SIZE + 1) * height + 1; canvas.height = CELL_SIZE * height;
canvas.width = (CELL_SIZE + 1) * width + 1; canvas.width = CELL_SIZE * width;
// Load tiles bitmap
let tiles_image = new Image();
tiles_image.src = '/assets/tiles.png';
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
@ -60,10 +63,10 @@ function newRandomGen() {
const renderLoop = () => { const renderLoop = () => {
// universe.tick(); // universe.tick();
drawGrid(); // drawGrid();
drawCells(); drawCells();
// requestAnimationFrame(renderLoop); requestAnimationFrame(renderLoop);
}; };
const drawGrid = () => { const drawGrid = () => {
@ -89,9 +92,19 @@ const getIndex = (row, column) => {
return row * width + column; return row * width + column;
}; };
const is_inner_wall = (tiles, col, row) => {
if (col > 0 && tiles[getIndex(row, col-1)] == Cell.Floor) {return false}
if (row > 0 && tiles[getIndex(row-1, col)] == Cell.Floor) {return false}
if (col < width-1 && tiles[getIndex(row, col+1)] == Cell.Floor) {return false}
if (row < height-1 && tiles[getIndex(row+1, col)] == Cell.Floor) {return false}
return true;
}
const drawCells = () => { const drawCells = () => {
const tilesPtr = world.tiles(); const tilesPtr = world.tiles();
const tiles = new Uint8Array(memory.buffer, tilesPtr, width * height); const tiles = new Uint8Array(memory.buffer, tilesPtr, width * height);
const tile_size = 39;
ctx.beginPath(); ctx.beginPath();
@ -99,16 +112,28 @@ const drawCells = () => {
for (let col = 0; col < width; col++) { for (let col = 0; col < width; col++) {
const idx = getIndex(row, col); const idx = getIndex(row, col);
ctx.fillStyle = tiles[idx] == Cell.Floor var tile_x = 0;
? DEAD_COLOR var tile_y = 0;
: ALIVE_COLOR; if (tiles[idx] == Cell.Floor) {
tile_x = 3;
ctx.fillRect( tile_y = 2;
col * (CELL_SIZE + 1) + 1, } else if (is_inner_wall(tiles, col, row)){
row * (CELL_SIZE + 1) + 1, tile_x = 18;
tile_y = 0;
} else {
tile_x = 0;
tile_y = 3;
}
ctx.drawImage(
tiles_image,
tile_x * tile_size+3,
tile_y * tile_size+3,
tile_size-3,
tile_size-3,
col * CELL_SIZE,
row * CELL_SIZE,
CELL_SIZE, CELL_SIZE,
CELL_SIZE CELL_SIZE);
);
} }
} }

2
demo/www/webpack.config.js
View File

@ -9,6 +9,6 @@ module.exports = {
}, },
mode: "development", mode: "development",
plugins: [ plugins: [
new CopyWebpackPlugin(['index.html', 'favicon.ico']) new CopyWebpackPlugin(['index.html', 'assets'])
], ],
}; };