From b4976a0d947b85955d28861969e190b20db5d63a Mon Sep 17 00:00:00 2001 From: HyperOnion <> Date: Fri, 23 Jun 2023 11:37:25 +0200 Subject: [PATCH] basic player movement and general cleanup. --- js/graphics.mjs | 49 ++++++++++++++++++++++++++++++-------------- js/graphics_core.mjs | 25 ++++++++++++++++++++++ js/input.mjs | 11 ++++++++++ js/main.mjs | 30 ++++++++------------------- js/player.mjs | 34 ++++++++++++++++++++++++++++++ js/utils/range.mjs | 22 ++++++++++---------- js/world.mjs | 12 +++++++++++ 7 files changed, 136 insertions(+), 47 deletions(-) create mode 100644 js/graphics_core.mjs create mode 100644 js/input.mjs create mode 100644 js/player.mjs create mode 100644 js/world.mjs diff --git a/js/graphics.mjs b/js/graphics.mjs index 008d569..ddd7bdb 100644 --- a/js/graphics.mjs +++ b/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); } diff --git a/js/graphics_core.mjs b/js/graphics_core.mjs new file mode 100644 index 0000000..008d569 --- /dev/null +++ b/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); +} diff --git a/js/input.mjs b/js/input.mjs new file mode 100644 index 0000000..296165a --- /dev/null +++ b/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); + }); +} diff --git a/js/main.mjs b/js/main.mjs index bc36428..defb484 100644 --- a/js/main.mjs +++ b/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); diff --git a/js/player.mjs b/js/player.mjs new file mode 100644 index 0000000..ef683ad --- /dev/null +++ b/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); +}); diff --git a/js/utils/range.mjs b/js/utils/range.mjs index 8e298f1..1e6ead7 100644 --- a/js/utils/range.mjs +++ b/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); + } + } +} diff --git a/js/world.mjs b/js/world.mjs new file mode 100644 index 0000000..2a093a8 --- /dev/null +++ b/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]; +}