const canvas_width = 600;
const canvas_height = 400;
-const camera_init = () => {
- return {
- x: 0,
- y: 0,
- };
-};
-
let context;
let events = new Map();
-let anims = {
- idle_right: {
- from: 16 * 0,
- frame_count: 1,
- length: 0,
- },
- idle_left: {
- from: 16 * 2,
- frame_count: 1,
- length: 0,
- },
- move_right: {
- from: 16 * 0,
- frame_count: 2,
- length: 5,
- },
- move_left: {
- from: 16 * 2,
- frame_count: 2,
- length: 5,
- },
-};
-
-let camera = camera_init();
+let camera = { x: 0, y: 0 };
let images = new Map();
let entities = [];
let state;
let requests_funcs = new Map();
-const event_strength = (event) => {
- return events.get(event) ? 1 : 0;
-};
-
-const image_load = (images, path) => {
+const image_load = (path) => {
let image = new Image();
image.src = path;
entity.anim_counter = 0;
};
-const entity_update_anim = (entity) => {
- let anim = anims[entity.anim];
-
- if (anim.length === 0) {
- return;
- }
-
- entity.anim_counter += 1;
-
- if (entity.anim_counter < anim.length) {
- return;
- }
-
- entity.anim_counter = 0;
- entity.anim_frame += 1;
-
- if (entity.anim_frame < anim.frame_count) {
- return;
- }
-
- entity.anim_frame = 0;
-};
-
const scene_clear = () => {
entities = [];
};
-const request = (content, func) => {
+const request = (type, content, func) => {
+ if (socket_state !== "connected") {
+ return;
+ }
+
let id = Math.floor(Math.random() * 1000000000);
while (requests_funcs.has(id)) {
requests_funcs.set(id, func);
- socket.send(`${id} ${content}`);
+ socket.send(`${id} |${type}| ${content}`);
};
const handle_message = (event) => {
let func = requests_funcs.get(id);
- func(content);
+ if (func !== null) {
+ func(content);
+ }
requests_funcs.delete(id);
};
+const init_game = () => {
+ scene_clear();
+ state = "game";
+};
+
+const init_error = () => {
+ scene_clear();
+
+ state = "error";
+
+ let server_down = {
+ x: 0,
+ y: 0,
+ width: 26 * 3,
+ height: 49 * 3,
+ anchor: "center",
+ sheet_rect: { x: 0, y: 0, width: 26, height: 49 },
+ image: "cattoland/server-down.png",
+ shadow: false,
+ };
+
+ entities.push(server_down);
+};
+
const socket_connect = () => {
socket = new WebSocket("ws://localhost:3000");
socket_state = "connecting";
socket.onopen = (event) => {
socket_state = "connected";
- request("Gimme catto pleaz.", (content) => {
+ request("Gimme catto pleaz", "", (content) => {
player_id = parseInt(content, 10);
});
socket.onmessage = handle_message;
};
-const init_game = () => {
- scene_clear();
- state = "game";
-};
-
-const init_error = () => {
- scene_clear();
-
- state = "error";
-
- let server_down = entity_init();
- server_down.width = 26 * 3;
- server_down.height = 49 * 3;
- server_down.anchor = "center";
- server_down.sheet_rect = { x: 0, y: 0, width: 26, height: 49 };
- server_down.image = "cattoland/server-down.png";
- server_down.shadow = false;
-
- entities.push(server_down);
-};
-
const loop = (delta) => {
- { // Events.
- if (player !== undefined) {
- let dir_x = event_strength("KeyD") - event_strength("KeyA");
- let dir_y = event_strength("KeyS") - event_strength("KeyW");
-
- let dir_len = Math.sqrt(Math.pow(dir_x, 2) + Math.pow(dir_y, 2));
+ let events_obj = Object.fromEntries(events);
- if (dir_len !== 0) {
- let unit_x = dir_x / dir_len;
- let unit_y = dir_y / dir_len;
-
- player.x += player.speed * unit_x;
- player.y += player.speed * unit_y;
- }
-
- if (dir_x < 0 && player.anim !== "move_left") {
- entity_play_anim(player, "move_left");
- }
-
- if (dir_x > 0 && player.anim !== "move_right") {
- entity_play_anim(player, "move_right");
- }
-
- if (dir_x === 0 && dir_y === 0) {
- if (player.anim === "move_right") {
- entity_play_anim(player, "idle_right");
- }
-
- if (player.anim === "move_left") {
- entity_play_anim(player, "idle_left");
- }
- } else {
- if (player.anim === "idle_right") {
- entity_play_anim(player, "move_right");
- }
-
- if (player.anim === "idle_left") {
- entity_play_anim(player, "move_left");
- }
- }
-
- for (let entity of entities) {
- if (entity.anim === undefined) {
- continue;
- }
-
- let anim = anims[entity.anim];
-
- entity_update_anim(entity);
-
- entity.sheet_rect.x = anim.from + entity.anim_frame_size * entity.anim_frame;
- }
- }
- }
+ request("Take me events", JSON.stringify(events_obj), null);
{ // Update.
if (state === "error") {
socket_connect();
}
} else if (state === "game") {
- request("Update plz.", (content) => {
+ request("Update plz", "", (content) => {
entities = JSON.parse(content);
})
}
);
}
- { // Draw catto.
+ { // Draw entity.
let anchor_x;
let anchor_y;
}
}
+ // Update events.
for (let [event, state] of events) {
if (state === "pressed") {
events.set(event, "down");
};
const main = () => {
- image_load(images, "cattoland/catto.png");
- image_load(images, "cattoland/server-down.png");
- image_load(images, "cattoland/shadow.png");
+ image_load("cattoland/catto.png");
+ image_load("cattoland/server-down.png");
+ image_load("cattoland/shadow.png");
socket_connect();