get basic graphics set up.
This commit is contained in:
commit
82a1cd243a
Binary file not shown.
After Width: | Height: | Size: 127 B |
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
|
|
||||||
|
<title>boxes</title>
|
||||||
|
|
||||||
|
<script defer type="module" src="js/main.mjs"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<canvas id="canvas" width="576" height="576"></canvas>
|
||||||
|
</body>
|
|
@ -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);
|
||||||
|
}
|
|
@ -0,0 +1,27 @@
|
||||||
|
import * as graphics from "./graphics.mjs";
|
||||||
|
import { range } from "./utils/range.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 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);
|
|
@ -0,0 +1,27 @@
|
||||||
|
export {
|
||||||
|
is_in_range,
|
||||||
|
clamp,
|
||||||
|
range,
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function is_in_range (number, min, max) {
|
||||||
|
return number >= min && number <= max;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clamp (number, min, max) {
|
||||||
|
return number < min
|
||||||
|
? min
|
||||||
|
: number > max
|
||||||
|
? max
|
||||||
|
: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function range (start, end) {
|
||||||
|
const result = [];
|
||||||
|
for (let n = start; n <= end; n++) {
|
||||||
|
result.push(n);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
Loading…
Reference in New Issue