5 ms·
Most of this code dates back to 1998, when I built a little 2 player Joust game to push the bounds of what you could do with Div (and at the time Layer) tags in
by jasonkester 5y ago
Most of this code dates back to 1998, when I built a little 2 player Joust game to push the bounds of what you could do with Div (and at the time Layer) tags in the latest browsers such as IE4 and Netscape 3. Surprisingly, most of it still worked when I thawed it out recently, provided your browser knew about document.all.
Over the weekend, I brought it up to date a bit and introduced it to Socket.io. Thus far it hasn't seen more than a dozen players at a time, so I'm curious to see what happens when a bunch of folks jump in at once.
I'll stick around to answer questions (and likely post-mortem the bits that catch on fire).
- Majestic121 5y agoIt's probably obvious for people who already played the game, but a quick note mentioning 'the highest one win' would make things easier for newcomers. I was a bit confused about how to fight, before checking the wikipedia page
- interblag 5y agoI just joined for a quick session - just wanted to say that this is really fun and very well done (especially for someone who has played Joust before). Thanks for sharing!
- stuaxo 5y agoFantastic :) It would be nice if you could change the scaling to use nearest neighbour on the players so they don't look all smooged,
- Scaevolus 5y agoThe modern way to implement this is with <canvas>, which lets you do that sort of thing pretty easily-- and is more performant to render.
- aidenn0 5y agoI don't know what the obsession is with blocky graphics; they didn't look blocky back in the day, so maybe faux-nostalgia?
- jasonkester 5y agoIt's just vanilla javascript, html and css. Pull up dev tools and notice this in the css: img { image-rendering: pixelated; } Lop that off (or uncheck it in dev tools) and you can have things as blurry as you please.
- rjsw 5y agoI played Joust a lot as a kid, the character movement looks a really good reproduction of the original to me.
- airhead969 5y agoWhich platform(s)?
- rjsw 5y agoAtari 400 (cartridge).
- Scaevolus 5y agoIf you can figure out a way to only send inputs for each player instead of their full state, it should significantly reduce network traffic and lag for each player-- right now it's sending ~1KB/frame!
- airhead969 5y agoOperational transformations (OTs).
- kgwxd 5y agoI don't see "game" mentioned in the wiki at all. Is that something typically used for games or do they tend to use something else?
- sib301 5y agoCollaborative text editing is what it’s traditionally used for.
- airhead969 5y agoIt can also be used to mutate hard game state (I wouldn't try it with dynamic, interpolated values like object position, angle, acceleration, or velocity.) There are many other methods, some are more precise and compressible than others: Trailing State Synchronization https://www.cs.ubc.ca/~krasic/cpsc538a/summaries/38/ https://www.cs.ubc.ca/~krasic/cpsc538a/summaries/38/ Basic ideas https://www.gafferongames.com/post/state_synchronization/ https://www.gafferongames.com/post/state_synchronization/ https://engineering.monstar-lab.com/2021/02/09/Game-server-Synchronization https://engineering.monstar-lab.com/2021/02/09/Game-server-S... https://www.gabrielgambetta.com/client-side-prediction-server-reconciliation.html https://www.gabrielgambetta.com/client-side-prediction-serve...
- rtkwe 5y agoYou'd have to resync fairly often to avoid desync especially for Joust where positioning during fighting is pretty important.
- airhead969 5y agoThat's pretty awesome. I remember making a CGI (that's an ancient, simple server backend for the young-ins) IM chat in 1996. It used the keep connection open trick present in HTTP 1.0 and a tiny bit of Netscape JS.
- yoz 5y agoThis is superb, addicting as hell, and now I have to force myself to stop because I have real work to do. The game gets increasingly jittery as it gets busier. It might be worth writing some tests to simulate lots of players moving around so it's easier to tune the performance.
- westoncb 5y agoGlancing at the code, it looks like he's rendering everything via DOM elements. I think player sprites are positioned using the top/left properties; could potentially optimize by keeping those props constant and just updating `transform: translate(x,y)` instead...
- jasonkester 5y agoThat's a holdout from 1998. Can't go changing things up after all that time, can we? I imagine today I would have built the whole thing in canvas. But it's cool how quick you can get something up and running if you let the browser do most of the work.