better map bg renderer
|
@ -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;
|
||||
|
|
BIN
client/img/pac.gif
Normal file
After Width: | Height: | Size: 1,004 B |
BIN
client/img/wall_atlas.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 563 B |
Before Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 4.4 KiB |
|
@ -1,9 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/css/main.css"/>
|
||||
<link rel="stylesheet" href="css/main.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<img src="img/wall_atlas.png" id="atlas" style="display: none;"/>
|
||||
<div id="container" style="display: none;">
|
||||
<canvas id="canvas" style="display: none;"></canvas>
|
||||
</div>
|
||||
<style id="style"></style>
|
||||
<div id="center">
|
||||
<div id="fps"></div>
|
||||
<form id="join" autocomplete="off">
|
||||
|
@ -16,8 +21,7 @@
|
|||
<div id="players"></div>
|
||||
<input type="button" id="start" value="Start Game"/>
|
||||
</div>
|
||||
<canvas id="can"></canvas>
|
||||
</div>
|
||||
<script src="/js/main.js" type="module"></script>
|
||||
<script src="js/main.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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;
|
||||
|
@ -19,13 +19,6 @@ const gen_style = (map, style) => {
|
|||
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 {
|
||||
width: var(--scaleX);
|
||||
|
@ -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 = ""
|
||||
|
||||
gen_map(this, container)
|
||||
let canvas = document.getElementById("canvas")
|
||||
canvas.style.display = ""
|
||||
|
||||
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
|
||||
}
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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
|
||||
|
|