add emotes and npcs. this really needs a cleanup
This commit is contained in:
parent
da4b0f5df8
commit
f8b014507f
11 changed files with 267 additions and 85 deletions
BIN
static/assets/Elec Piano Loop.wav
Normal file
BIN
static/assets/Elec Piano Loop.wav
Normal file
Binary file not shown.
BIN
static/assets/No.wav
Normal file
BIN
static/assets/No.wav
Normal file
Binary file not shown.
BIN
static/assets/Troll.wav
Normal file
BIN
static/assets/Troll.wav
Normal file
Binary file not shown.
BIN
static/assets/Yes.wav
Normal file
BIN
static/assets/Yes.wav
Normal file
Binary file not shown.
67
static/assets/npc.svg
Normal file
67
static/assets/npc.svg
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="110"
|
||||
height="110"
|
||||
viewBox="0 0 110 110"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="npc.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#000000"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="4.1121712"
|
||||
inkscape:cx="61.403085"
|
||||
inkscape:cy="49.608829"
|
||||
inkscape:window-width="1860"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="46"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(5,5)">
|
||||
<circle
|
||||
style="fill:#508341;fill-opacity:1;stroke:#fcf9f9;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="path1"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="50" />
|
||||
<path
|
||||
id="circle4"
|
||||
style="fill:#35582b;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
|
||||
d="M 50 0 A 50 50 0 0 0 4.5566406 29.15625 C 2.0495143 38.07249 0.46754838 45.280484 0.095703125 48.669922 A 50 50 0 0 0 0 50 C 0 59.3151 34.053758 47.505859 61.667969 47.505859 C 89.282178 47.505859 93.717713 56.877787 100 50 A 50 50 0 0 0 50 0 z " />
|
||||
<path
|
||||
style="fill:#fcf9f9;fill-opacity:1;stroke:#fcf9f9;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
d="M 44,11.529728 V 88.470272"
|
||||
id="path2" />
|
||||
<path
|
||||
style="fill:#fcf9f9;fill-opacity:1;stroke:#fcf9f9;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
d="M 56,11.529728 V 88.470272"
|
||||
id="path3" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#fcf9f9;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
d="M 66.225624,23.599481 C 42.814,24.14986 33.037139,27.938889 30.631342,44.149849 c -2.405797,16.21096 33.147924,6.497412 38.240878,10.246612 5.092954,3.7492 -23.18558,23.936516 -37.818455,21.834495"
|
||||
id="path4"
|
||||
sodipodi:nodetypes="czzc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -1,13 +1,26 @@
|
|||
import Player from "./player.js";
|
||||
import GameBasic from "./game_basic.js";
|
||||
import NPC from "./npc.js";
|
||||
|
||||
const cs = 1024;
|
||||
const assets = [
|
||||
'assets/player.svg',
|
||||
'assets/head.svg',
|
||||
'assets/map.svg'
|
||||
'assets/map.svg',
|
||||
'assets/npc.svg'
|
||||
];
|
||||
const origin = 'https://ub.zenoverse.net/'
|
||||
const legalTypes = {
|
||||
Player,
|
||||
NPC
|
||||
}
|
||||
const options = [
|
||||
'Troll',
|
||||
'Exit',
|
||||
'Elec Piano Loop',
|
||||
'No',
|
||||
'Yes'
|
||||
]
|
||||
const origin = (window.location.href.indexOf('localhost') != -1) ? window.location.href : 'https://ub.zenoverse.net/'
|
||||
|
||||
class Game extends GameBasic {
|
||||
constructor() {
|
||||
|
|
@ -42,20 +55,33 @@ class Game extends GameBasic {
|
|||
for (let ent of entities) {
|
||||
if (ent.health <= 0) continue;
|
||||
|
||||
ctx.save();
|
||||
if (ent.type == 'Player') {
|
||||
ctx.save();
|
||||
|
||||
ctx.translate(ent.pos.x, ent.pos.y);
|
||||
ctx.rotate(ent.rot);
|
||||
ctx.drawImage(assetsIn[1], -64 / 2, -128, 64, 128);
|
||||
ctx.translate(ent.pos.x, ent.pos.y);
|
||||
ctx.rotate(ent.rot);
|
||||
ctx.drawImage(assetsIn[1], -64 / 2, -128, 64, 128);
|
||||
|
||||
ctx.restore();
|
||||
ctx.restore();
|
||||
|
||||
ctx.fillStyle = ent.you.split('-')[0];
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(ent.pos.x, ent.pos.y, 32,0,2*Math.PI);
|
||||
ctx.fill();
|
||||
ctx.drawImage(assetsIn[0], ent.pos.x - 64 / 2, ent.pos.y - 64 / 2, 64, 64);
|
||||
if (ent.playing) {
|
||||
ctx.strokeStyle = 'white';
|
||||
ctx.lineWidth = "20";
|
||||
ctx.beginPath();
|
||||
ctx.arc(ent.pos.x, ent.pos.y, 32, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
ctx.fillStyle = ent.you.split('-')[0];
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(ent.pos.x, ent.pos.y, 32, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
ctx.drawImage((ent.type == 'NPC') ? assetsIn[3] : assetsIn[0], ent.pos.x - 64 / 2, ent.pos.y - 64 / 2, 64, 64);
|
||||
|
||||
if (ent.type != 'Player') continue;
|
||||
|
||||
ctx.strokeStyle = "rgb(255,255,255)";
|
||||
ctx.lineWidth = "8";
|
||||
|
|
@ -71,14 +97,20 @@ class Game extends GameBasic {
|
|||
|
||||
ctx.restore();
|
||||
|
||||
if (player.health <= 0) {
|
||||
if (player.health <= 0 || player.isMenu) {
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.5)';
|
||||
ctx.fillRect(0, 0, cs, cs);
|
||||
ctx.fillStyle = 'rgb(255,255,255)';
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.font = "bold 48px sans-serif";
|
||||
ctx.fillText('You died! Click to respawn', cs / 2, cs / 2);
|
||||
if (player.health <= 0) ctx.fillText('You died! Click to respawn', cs / 2, cs / 2);
|
||||
if (player.isMenu) {
|
||||
let r = Math.floor(Math.abs(player.rot / 1.2) % options.length);
|
||||
ctx.fillText(`Click to react ${options[r]}`, cs / 2, cs / 2)
|
||||
ctx.font = "bold 16px sans-serif";
|
||||
ctx.fillText(`Wait for options ${options.join(', ')}`, cs / 2, cs / 2 + 50)
|
||||
}
|
||||
}
|
||||
}
|
||||
click() {
|
||||
|
|
@ -88,6 +120,10 @@ class Game extends GameBasic {
|
|||
this.ws = new WebSocket(origin);
|
||||
this.player = new Player(false, true);
|
||||
this.entities.push(this.player);
|
||||
} else if (player.isMenu) {
|
||||
player.r = Math.floor(Math.abs(player.rot / 1.2) % options.length);
|
||||
player.isMenu = false;
|
||||
this.sync();
|
||||
} else {
|
||||
player.bump();
|
||||
this.sync();
|
||||
|
|
@ -96,17 +132,34 @@ class Game extends GameBasic {
|
|||
sync() {
|
||||
let { player } = this;
|
||||
|
||||
let { vel, dir, you, ticks } = player;
|
||||
let { vel, dir, you, ticks, isMenu, r, playing } = player;
|
||||
|
||||
this.ws.send(JSON.stringify({ vel, dir, you, ticks }));
|
||||
this.ws.send(JSON.stringify({ vel, dir, you, ticks, isMenu, r, playing }));
|
||||
}
|
||||
recv({ data }) {
|
||||
let { player } = this;
|
||||
let you = player.you;
|
||||
|
||||
let that = this;
|
||||
|
||||
let entList = JSON.parse(data);
|
||||
entList = entList.map(x => {
|
||||
x.handleTick = Player.prototype.handleTick;
|
||||
let type = (Object.keys(legalTypes).indexOf(x.type) == -1) ? Player : legalTypes[x.type];
|
||||
x.handleTick = type.prototype.handleTick;
|
||||
if (x.r != 1) {
|
||||
let a = new Audio(`assets/${options[x.r]}.wav`);
|
||||
a.addEventListener('ended', () => {
|
||||
if (x.you == you) {
|
||||
that.player.playing = false;
|
||||
that.sync();
|
||||
}
|
||||
a.remove();
|
||||
})
|
||||
if (you != x.you) {
|
||||
x.r = 1;
|
||||
}
|
||||
a.play();
|
||||
}
|
||||
return x;
|
||||
})
|
||||
|
||||
|
|
@ -114,6 +167,12 @@ class Game extends GameBasic {
|
|||
|
||||
this.player = Object.assign(this.player || new Player(false, false), matchingPlayer[0]);
|
||||
|
||||
if (this.player.r != 1) {
|
||||
this.player.playing = true;
|
||||
this.player.r = 1;
|
||||
that.sync();
|
||||
}
|
||||
|
||||
this.entities = entList;
|
||||
|
||||
if (this.entities.length == 0) this.entities = [this.player];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue