From 506e6be65d9b26f0d3ea0faec5df98325c041e23 Mon Sep 17 00:00:00 2001 From: biglyderv Date: Mon, 25 Nov 2024 14:14:20 -0500 Subject: [PATCH] split up game code using new es5 syntax or whatever --- common/game_basic.js | 24 ++++++ {static/js => common}/player.js | 0 index.js | 2 + static/index.html | 1 + static/js/index.js | 148 ++++++++++++++------------------ 5 files changed, 93 insertions(+), 82 deletions(-) create mode 100644 common/game_basic.js rename {static/js => common}/player.js (100%) diff --git a/common/game_basic.js b/common/game_basic.js new file mode 100644 index 0000000..d7c1e6e --- /dev/null +++ b/common/game_basic.js @@ -0,0 +1,24 @@ +class GameBasic { + constructor() { + let player = new Player(true); + let entities = [player]; + + for (let i = 0; i < 50; i++) { + entities.push(new Player()) + } + + this.player = player; + this.entities = entities; + } + main() { + let { entities } = this; + + for (let ent of entities) { + ent.handleTick(this); + } + } + init() { + let that = this; + setInterval(function () { that.main() }, 1000 / 60); + } +} \ No newline at end of file diff --git a/static/js/player.js b/common/player.js similarity index 100% rename from static/js/player.js rename to common/player.js diff --git a/index.js b/index.js index 1d1fbf0..f2342b2 100644 --- a/index.js +++ b/index.js @@ -4,6 +4,8 @@ import expressW from "express-ws"; var app = express(); expressW(app); + +app.use('/js',express.static('./common')); app.use(express.static('./static')); app.ws('/', function (ws, req) { diff --git a/static/index.html b/static/index.html index 5688d67..099e061 100644 --- a/static/index.html +++ b/static/index.html @@ -21,6 +21,7 @@ + diff --git a/static/js/index.js b/static/js/index.js index 848ba33..45fc5bf 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -4,96 +4,80 @@ const assets = [ 'assets/head.svg', ]; -function Game() { - let assetsIn = {}; - - for (let asset in assets) { - assetsIn[asset] = new Image(); - assetsIn[asset].src = assets[asset]; +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; } - - let canvas = document.querySelector("#canvas"); - let player = new Player(true); - let entities = [player]; - - for (let i = 0; i < 50; i++) { - entities.push(new Player()) - } - - canvas.width = canvas.height = cs; - - this.canvas = canvas; - this.ctx = canvas.getContext("2d"); - this.assetsIn = assetsIn; - this.player = player; - this.entities = entities; -} - -Game.prototype.main = function () { - let { entities, player } = this; - - if (player.health <= 0) { - return; - } - - for (let ent of entities) { - ent.handleTick(this); - } -} - -// todo: move into its own file -Game.prototype.render = function () { - 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) { + render () { + let { ctx, assetsIn, entities, player } = this; + + ctx.clearRect(0, 0, cs, cs); + 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(player.camera.x + cs / 2, player.camera.y + cs / 2); + + for (let ent of entities) { + 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.restore(); - - ctx.drawImage(assetsIn[0], ent.pos.x - 64 / 2, ent.pos.y - 64 / 2, 64, 64); + + 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); + } } - - 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); - } -} - -Game.prototype.ui = function() { - document.querySelector('.ui-text').textContent = `HP: ${this.player.health}` -} - -Game.prototype.click = function () { - let { player } = this; - - if (player.health <= 0) { - game = new Game(); - } else { - player.bump(); + ui() { + document.querySelector('.ui-text').textContent = `HP: ${this.player.health}` + } + click() { + let { player } = this; + + if (player.health <= 0) { + game = new Game(); + } else { + player.bump(); + } + } + init(){ + super.init(); + + setInterval(function () { game.render() }, 1000 / 60); + setInterval(function () { game.ui() }, 1000 / 10); } } var game = new Game(); -setInterval(function () { game.main() }, 1000 / 60); -setInterval(function () { game.render() }, 1000 / 60); -setInterval(function () { game.ui() }, 1000 / 10); +game.init(); game.canvas.onclick = () => game.click(); \ No newline at end of file