131 lines
No EOL
3.5 KiB
JavaScript
131 lines
No EOL
3.5 KiB
JavaScript
import Player from "./player.js";
|
|
import GameBasic from "./game_basic.js";
|
|
|
|
const cs = 1024;
|
|
const assets = [
|
|
'assets/player.svg',
|
|
'assets/head.svg',
|
|
];
|
|
|
|
class Game extends GameBasic {
|
|
constructor() {
|
|
super();
|
|
|
|
let assetsIn = {};
|
|
|
|
for (let asset in assets) {
|
|
assetsIn[asset] = new Image();
|
|
assetsIn[asset].src = assets[asset];
|
|
}
|
|
|
|
let canvas = document.querySelector("#canvas");
|
|
|
|
canvas.width = canvas.height = cs;
|
|
|
|
this.canvas = canvas;
|
|
this.ctx = canvas.getContext("2d");
|
|
this.assetsIn = assetsIn;
|
|
}
|
|
render() {
|
|
let { ctx, assetsIn, entities, player } = this;
|
|
|
|
ctx.clearRect(0, 0, cs, cs);
|
|
|
|
ctx.save();
|
|
|
|
ctx.translate(player.camera.x + cs / 2, player.camera.y + cs / 2);
|
|
|
|
for (let ent of entities) {
|
|
if (ent.health <= 0) continue;
|
|
|
|
ctx.save();
|
|
|
|
ctx.translate(ent.pos.x, ent.pos.y);
|
|
ctx.rotate(ent.rot);
|
|
ctx.drawImage(assetsIn[1], -64 / 2, -128, 64, 128);
|
|
|
|
ctx.restore();
|
|
|
|
ctx.drawImage(assetsIn[0], ent.pos.x - 64 / 2, ent.pos.y - 64 / 2, 64, 64);
|
|
|
|
ctx.fillStyle = ent.you.split('-')[0];
|
|
ctx.strokeStyle = "rgb(255,255,255)";
|
|
ctx.lineWidth = "8";
|
|
ctx.textAlign = "center";
|
|
ctx.textBaseline = "bottom";
|
|
ctx.font = "bold 16px sans-serif";
|
|
|
|
let args = [`HP: ${ent.health} KO: ${ent.headCount} XY: ${Math.round(ent.pos.x)}, ${Math.round(ent.pos.y)}`, ent.pos.x, ent.pos.y - 64 / 2];
|
|
|
|
ctx.strokeText(...args);
|
|
ctx.fillText(...args);
|
|
}
|
|
|
|
ctx.restore();
|
|
|
|
if (player.health <= 0) {
|
|
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);
|
|
}
|
|
}
|
|
click() {
|
|
let { player } = this;
|
|
|
|
if (player.health <= 0) {
|
|
this.ws = new WebSocket(window.location.href);
|
|
this.player = new Player(false, true);
|
|
this.entities.push(this.player);
|
|
} else {
|
|
player.bump();
|
|
this.ws.send(JSON.stringify({ vel, dir, you }));
|
|
}
|
|
}
|
|
sync() {
|
|
let { player } = this;
|
|
|
|
let { vel, dir, you } = player;
|
|
|
|
this.ws.send(JSON.stringify({ vel, dir, you }));
|
|
}
|
|
recv({data}) {
|
|
let {player} = this;
|
|
let you = player.you;
|
|
|
|
let entList = JSON.parse(data);
|
|
entList = entList.map(x => {
|
|
x.handleTick = Player.prototype.handleTick;
|
|
return x;
|
|
})
|
|
|
|
let matchingPlayer = entList.filter(x => x.you == you)
|
|
|
|
this.player = Object.assign(this.player || new Player(false,false),matchingPlayer[0]);
|
|
|
|
this.entities = entList;
|
|
|
|
if (this.entities.length == 0) this.entities = [this.player];
|
|
}
|
|
init() {
|
|
super.init();
|
|
|
|
let that = this;
|
|
|
|
this.ws = new WebSocket(window.location.href);
|
|
|
|
this.ws.addEventListener('message',function(e) { that.recv(e) });
|
|
|
|
setInterval(function () { that.render() }, 1000 / 60);
|
|
setInterval(function () { that.sync() }, 1000 / 5);
|
|
|
|
game.canvas.onclick = () => that.click();
|
|
}
|
|
}
|
|
|
|
var game = new Game();
|
|
|
|
game.init(); |