basic player movement and general cleanup.

js/graphics.mjs

@@ -1,25 +1,44 @@
-const canvas = document.createElement("canvas");
-const ctx = canvas.getContext("2d");
+import * as graphics from "./graphics_core.mjs";
+export * from "./graphics_core.mjs";
 
-export function set_size (w, h) {
-	canvas.width = w;
-	canvas.height = h;
+import { range, iter_2d } from "./utils/range.mjs";
+
+
+
+const canvas = document.getElementById("canvas");
+const canvas_context = canvas.getContext("2d");
+graphics.set_size(canvas.width, canvas.height);
+
+const SCALE = 64;
+
+export function draw_tile (x, y) {
+	graphics.fill_rect(x * SCALE, y * SCALE, SCALE, SCALE);
 }
 
-export function set_color (color) {
-	ctx.fillStyle = color;
-	ctx.strokeStyle = color;
+function checkerboard (x, y) {
+	return ((x ^ y) & 1) === 0;
 }
 
-export function clear (color = "#000") {
-	set_color(color);
-	ctx.fillRect(0, 0, canvas.width, canvas.height);
+export function draw_floor (box_size) {
+	graphics.clear("#888");
+	graphics.set_color("#aaa");
+	iter_2d(range(0, box_size - 1), (x, y) => {
+		if (checkerboard(x, y)) draw_tile(x, y);
+	});
 }
 
-export function fill_rect (x, y, w, h) {
-	ctx.fillRect(x, y, w, h);
+export function draw_world (box_size, get_tile) {
+	draw_floor(box_size);
+
+	iter_2d(range(0, box_size - 1), (x, y) => {
+		const tile = get_tile(x, y);
+		if (tile === "player") {
+			graphics.set_color("#0f0");
+			draw_tile(x, y);
+		}
+	});
 }
 
-export function render (target_canvas) {
-	target_canvas.drawImage(canvas, 0, 0);
+export function render () {
+	graphics.render(canvas_context);
 }

js/graphics_core.mjs

@@ -0,0 +1,25 @@
+const canvas = document.createElement("canvas");
+const ctx = canvas.getContext("2d");
+
+export function set_size (w, h) {
+	canvas.width = w;
+	canvas.height = h;
+}
+
+export function set_color (color) {
+	ctx.fillStyle = color;
+	ctx.strokeStyle = color;
+}
+
+export function clear (color = "#000") {
+	set_color(color);
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+export function fill_rect (x, y, w, h) {
+	ctx.fillRect(x, y, w, h);
+}
+
+export function render (target_canvas) {
+	target_canvas.drawImage(canvas, 0, 0);
+}

js/input.mjs

@@ -0,0 +1,11 @@
+export function on_press (key, callback) {
+	document.body.addEventListener("keydown", e => {
+		if (e.key === key) callback(key);
+	});
+}
+
+export function on_release (key, callback) {
+	document.body.addEventListener("keyup", e => {
+		if (e.key === key) callback(key);
+	});
+}

js/main.mjs

@@ -1,27 +1,15 @@
 import * as graphics from "./graphics.mjs";
-import { range } from "./utils/range.mjs";
+import { BOX_SIZE, get_tile } from "./world.mjs";
+import "./player.mjs";
 
-const canvas = document.getElementById("canvas");
-const canvas_context = canvas.getContext("2d");
-graphics.set_size(canvas.width, canvas.height);
 
-const BOX_SIZE = 9;
-const SCALE = 64;
 
-function draw_tile (x, y) {
-	graphics.fill_rect(x * SCALE, y * SCALE, SCALE, SCALE);
+function render (timestamp) {
+	graphics.clear();
+	graphics.draw_world(BOX_SIZE, get_tile);
+	graphics.render();
+
+	requestAnimationFrame(render);
 }
 
-function draw_box_floor () {
-	graphics.clear("#888");
-	graphics.set_color("#aaa");
-	for (const x in range(0, BOX_SIZE)) {
-		for (const y in range(0, BOX_SIZE)) {
-			if (((x ^ y) & 1) === 0)
-				draw_tile(x, y);
-		}
-	}
-}
-
-draw_box_floor();
-graphics.render(canvas_context);
+requestAnimationFrame(render);

js/player.mjs

@@ -0,0 +1,34 @@
+import { BOX_SIZE, get_tile, set_tile } from "./world.mjs";
+import { on_press } from "./input.mjs";
+
+
+
+const player = {
+	x: 2,
+	y: 1,
+};
+set_tile(player.x, player.y, "player");
+
+export function set_player_pos (x, y) {
+	set_tile(player.x, player.y, 0);
+	set_tile(x, y, "player");
+	player.x = x;
+	player.y = y;
+}
+
+export function move_player (d_x, d_y) {
+	set_player_pos(player.x + d_x, player.y + d_y);
+}
+
+on_press("ArrowLeft", _ => {
+	move_player(-1, 0);
+});
+on_press("ArrowRight", _ => {
+	move_player(1, 0);
+});
+on_press("ArrowUp", _ => {
+	move_player(0, -1);
+});
+on_press("ArrowDown", _ => {
+	move_player(0, 1);
+});

js/utils/range.mjs

@@ -1,16 +1,8 @@
-export {
-	is_in_range,
-	clamp,
-	range,
-};
-
-
-
-function is_in_range (number, min, max) {
+export function is_in_range (number, min, max) {
 	return number >= min && number <= max;
 }
 
-function clamp (number, min, max) {
+export function clamp (number, min, max) {
 	return number < min
 		? min
 		: number > max
@@ -18,10 +10,18 @@ function clamp (number, min, max) {
 		: number;
 }
 
-function range (start, end) {
+export function range (start, end) {
 	const result = [];
 	for (let n = start; n <= end; n++) {
 		result.push(n);
 	}
 	return result;
 }
+
+export function iter_2d (range_1d, callback) {
+	for (const y in range_1d) {
+		for (const x in range_1d) {
+			callback(x, y);
+		}
+	}
+}

js/world.mjs

@@ -0,0 +1,12 @@
+export const BOX_SIZE = 9;
+
+
+const world = Array(BOX_SIZE).fill(0).map(_ => Array(BOX_SIZE).fill(0));
+
+export function set_tile (x, y, tile) {
+	world[x][y] = tile;
+}
+
+export function get_tile (x, y) {
+	return world[x][y];
+}