diff --git a/client/css/main.css b/client/css/main.css
index d1d97e8..86b8fd8 100644
--- a/client/css/main.css
+++ b/client/css/main.css
@@ -72,6 +72,16 @@ input {
margin-bottom: .215rem;
}
+#container img {
+ image-rendering: pixelated;
+}
+
+#canvas {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
#fps {
position: absolute;
left: 0;
diff --git a/client/img/pac.gif b/client/img/pac.gif
new file mode 100644
index 0000000..4b0608b
Binary files /dev/null and b/client/img/pac.gif differ
diff --git a/client/img/wall_atlas.png b/client/img/wall_atlas.png
new file mode 100644
index 0000000..bd3a5df
Binary files /dev/null and b/client/img/wall_atlas.png differ
diff --git a/client/img/wall_cross.png b/client/img/wall_cross.png
deleted file mode 100644
index 9553645..0000000
Binary files a/client/img/wall_cross.png and /dev/null differ
diff --git a/client/img/wall_dot.png b/client/img/wall_dot.png
deleted file mode 100644
index 2e7fa15..0000000
Binary files a/client/img/wall_dot.png and /dev/null differ
diff --git a/client/img/wall_empty.png b/client/img/wall_empty.png
deleted file mode 100644
index 6ca5e29..0000000
Binary files a/client/img/wall_empty.png and /dev/null differ
diff --git a/client/img/wall_end.png b/client/img/wall_end.png
deleted file mode 100644
index 752f73b..0000000
Binary files a/client/img/wall_end.png and /dev/null differ
diff --git a/client/img/wall_straight.png b/client/img/wall_straight.png
deleted file mode 100644
index 2dc5448..0000000
Binary files a/client/img/wall_straight.png and /dev/null differ
diff --git a/client/img/wall_tee.png b/client/img/wall_tee.png
deleted file mode 100644
index 31742bd..0000000
Binary files a/client/img/wall_tee.png and /dev/null differ
diff --git a/client/img/wall_turn.png b/client/img/wall_turn.png
deleted file mode 100644
index dbe5837..0000000
Binary files a/client/img/wall_turn.png and /dev/null differ
diff --git a/client/index.html b/client/index.html
index 50ae8ef..fb1e66e 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,9 +1,14 @@
-
+
+ 
+
+
+
+
-
-
+
diff --git a/client/js/gfx/graphics.js b/client/js/gfx/graphics.js
index b406ab1..8ee4a6f 100644
--- a/client/js/gfx/graphics.js
+++ b/client/js/gfx/graphics.js
@@ -20,6 +20,12 @@ const draw_players = (data, players, sprites) => {
sprites[id].rotate(180)
break
}
+
+ if (data.players[id].moving) {
+ sprites[id].set_img("img/pac.gif")
+ } else {
+ sprites[id].set_img("img/pac.png")
+ }
}
}
@@ -34,7 +40,7 @@ const update_player_sprites = (data, players, sprites) => {
new_sprites.fill(undefined)
for (let id of players) {
- let sprite = new Sprite("/img/pac.png", data.map)
+ let sprite = new Sprite("img/pac.png", data.map)
sprite.layer(3)
sprite.resize(1,1)
sprite.show()
@@ -45,7 +51,7 @@ const update_player_sprites = (data, players, sprites) => {
}
const create_map_dot = (data, x, y) => {
- let dot = new Sprite("/img/dot.png", data.map)
+ let dot = new Sprite("img/dot.png", data.map)
dot.move(x, y)
dot.resize(.2,.2)
dot.show()
diff --git a/client/js/gfx/map.js b/client/js/gfx/map.js
index e629b17..a9ef0ad 100644
--- a/client/js/gfx/map.js
+++ b/client/js/gfx/map.js
@@ -1,6 +1,6 @@
import { ItemType, get_item_key } from "../logic.js";
-const gen_style = (map, style) => {
+const update_style = (map, style) => {
const css = `
* {
--scale: 100;
@@ -18,13 +18,6 @@ const gen_style = (map, style) => {
vertical-align: top;
line-height: 0;
}
-
- #container img {
- display: inline-block;
- width: ${100/map.width}%;
- height: ${100/map.height}%;
- image-rendering: pixelated;
- }
@media (max-aspect-ratio: ${map.width}/${map.height}) {
#container {
@@ -58,86 +51,87 @@ const Direction = {
WALL_END_WEST: 16
}
-const place_tile = (container, type) => {
+/**
+ * @param {CanvasRenderingContext2D} context
+ */
+const draw_tile = (context, x, y, w, type) => {
- const img = document.createElement("img")
-
- let image_src, class_name;
+ let atlas_index, rotation;
switch(type) {
case Direction.EMPTY:
- image_src = "/img/wall_empty.png"
- class_name = ""
- break
+ return
case Direction.WALL_HZ:
- image_src = "/img/wall_straight.png"
- class_name = ""
+ atlas_index = [1, 1]
+ rotation = 0
break
case Direction.WALL_VT:
- image_src = "/img/wall_straight.png"
- class_name = "rotate90"
+ atlas_index = [1, 1]
+ rotation = 90
break
case Direction.TURN_Q1:
- image_src = "/img/wall_turn.png"
- class_name = ""
+ atlas_index = [2, 0]
+ rotation = 0
break
case Direction.TURN_Q2:
- image_src = "/img/wall_turn.png"
- class_name = "rotate270"
+ atlas_index = [2, 0]
+ rotation = 270
break
case Direction.TURN_Q3:
- image_src = "/img/wall_turn.png"
- class_name = "rotate180"
+ atlas_index = [2, 0]
+ rotation = 180
break
case Direction.TURN_Q4:
- image_src = "/img/wall_turn.png"
- class_name = "rotate90"
+ atlas_index = [2, 0]
+ rotation = 90
break
case Direction.TEE_NORTH:
- image_src = "/img/wall_tee.png"
- class_name = "rotate180"
+ atlas_index = [1, 0]
+ rotation = 180
break
case Direction.TEE_EAST:
- image_src = "/img/wall_tee.png"
- class_name = "rotate270"
+ atlas_index = [1, 0]
+ rotation = 270
break
case Direction.TEE_SOUTH:
- image_src = "/img/wall_tee.png"
- class_name = ""
+ atlas_index = [1, 0]
+ rotation = 0
break
case Direction.TEE_WEST:
- image_src = "/img/wall_tee.png"
- class_name = "rotate90"
+ atlas_index = [1, 0]
+ rotation = 90
break
case Direction.CROSS:
- image_src = "/img/wall_cross.png"
- class_name = ""
+ atlas_index = [0, 0]
+ rotation = 0
break
case Direction.DOT:
- image_src = "/img/wall_dot.png"
- class_name = ""
+ atlas_index = [2, 1]
+ rotation = 0
break
case Direction.WALL_END_NORTH:
- image_src = "/img/wall_end.png"
- class_name = ""
+ atlas_index = [0, 1]
+ rotation = 0
break;
case Direction.WALL_END_EAST:
- image_src = "/img/wall_end.png"
- class_name = "rotate90"
+ atlas_index = [0, 1]
+ rotation = 90
break;
case Direction.WALL_END_SOUTH:
- image_src = "/img/wall_end.png"
- class_name = "rotate180"
+ atlas_index = [0, 1]
+ rotation = 180
break;
case Direction.WALL_END_WEST:
- image_src = "/img/wall_end.png"
- class_name = "rotate270"
+ atlas_index = [0, 1]
+ rotation = 270
break;
}
- img.setAttribute("class", class_name)
- img.setAttribute("src", image_src)
-
- container.appendChild(img)
+ let atlas = document.getElementById("atlas")
+ context.save()
+ context.translate((x+.5)*w, (y+.5)*w)
+ context.rotate(rotation * Math.PI / 180)
+ context.drawImage(atlas, atlas_index[0]*w, atlas_index[1]*w, w, w, -w/2, -w/2, w, w)
+ context.restore()
}
const get_point = (width, height, data, x, y) => {
@@ -209,10 +203,11 @@ const gen_walls = (width, height, data) => {
return walls
}
-const gen_map = (map, container) => {
+const update_canvas = (map, canvas) => {
+ let context = canvas.getContext("2d");
for (let y = 0; y < map.height; y++) {
for (let x = 0; x < map.width; x++) {
- place_tile(container, map.walls[y * map.width + x])
+ draw_tile(context, x, y, map.tile_width, map.walls[y * map.width + x])
}
}
}
@@ -256,47 +251,42 @@ export class Map {
constructor(width, height, data) {
- let last = document.getElementById("container")
- if (last) last.remove()
-
this.width = width
this.height = height
this.data = data
this.walls = gen_walls(width, height, data)
this.items = gen_items(this)
this.visible = false
+ this.tile_width = 32
+
+ canvas.width = this.width * this.tile_width
+ canvas.height = this.height * this.tile_width
+
+
}
show() {
- this.hide()
let container = document.getElementById("container")
- if (!container) {
- container = document.createElement("div")
- container.id = "container"
- document.body.appendChild(container)
- }
+ container.style.display = ""
+
+ let canvas = document.getElementById("canvas")
+ canvas.style.display = ""
- gen_map(this, container)
-
let style = document.getElementById("style")
- if (!style) {
- style = document.createElement("style")
- style.id = "style"
- document.body.appendChild(style)
- }
-
- gen_style(this, style)
+
+ update_canvas(this, canvas)
+ update_style(this, style)
this.visible = true
}
hide() {
- let container = document.getElementById("container")
- if (container) container.remove()
- let style = document.getElementById("style")
- if (style) style.remove()
+
+ let canvas = document.getElementById("canvas")
+ canvas.style.display = "none"
+ container.style.display = "none"
this.visible = false
}
diff --git a/client/js/gfx/sprite.js b/client/js/gfx/sprite.js
index b793d89..07360f1 100644
--- a/client/js/gfx/sprite.js
+++ b/client/js/gfx/sprite.js
@@ -47,6 +47,10 @@ export class Sprite {
this.#update_pos()
}
+ set_img(src) {
+ this.element.src = src
+ }
+
rotate(d) {
this.d = d
this.#update_pos()
diff --git a/client/js/logic.js b/client/js/logic.js
index cb063d4..395e4f0 100644
--- a/client/js/logic.js
+++ b/client/js/logic.js
@@ -27,7 +27,7 @@ export const ItemType = {
*
* @typedef {{[key: number]: Key}} InputMap
*
- * @typedef {{pos: Vec2, move_rot: Rotation, input_rot: Rotation, name?: string}} Player
+ * @typedef {{pos: Vec2, move_rot: Rotation, input_rot: Rotation, moving: boolean, name?: string}} Player
* @typedef {{start: boolean, key: Key, name?: string}} PlayerInput
* @typedef {{players: {[key: number]: PlayerInput}, added?: number[], removed?: number[] }} Input
*
@@ -96,7 +96,8 @@ function processInput(pastData, input) {
data.input[added] ||= {
pos: [1, 1],
input_rot: Rotation.EAST,
- mov_rot: Rotation.EAST
+ mov_rot: Rotation.EAST,
+ moving: false
};
if(!(added in data.players)) {
data.players[added] = structuredClone(data.input[added])
@@ -314,8 +315,10 @@ const update_players = (data) => {
let tile_in_front = get_tile_with_rot(data.map, current_pos, move_dir)
if (tile_in_front != 1 && tile_in_front != 2) {
data.players[id].pos = move_pos
+ data.players[id].moving = true
} else {
data.players[id].pos = round_pos(current_pos)
+ data.players[id].moving = false
}
// eat items