Skip to content
← Back to Community
shadows — Multiplayer Shadowy Halloween Maze Game!
Profile icon
fuzzyastrocat

Welp, I misread the timestamp on the bramjam, so I guess I can't submit this, but I'm posting it here anyway! ( @bramley that is right, correct?)

This was a little experiment in raycasting and FOV graphics. The goal is to get to the green light at the end of the maze... the problem is that you only have a tiny lantern which casts light in one direction! So, it's basically a maze game where you can't see the goal, only what you could see in real life. Sounds fun, eh? :D

There is a server, so you can race your friends to the end. Additionally, you can drop beacons to help others out... provided that you're going the right way!

Gameplay Images

Screen Shot 2020-10-31 at 12.53.00 PM
Screen Shot 2020-10-31 at 12.52.49 PM
Screen Shot 2020-10-31 at 12.52.21 PM

Controls:

  • WASD/Arrow keys to move
  • SPACE to drop beacon

Enjoy!

Voters
Profile icon
cdCreepArghhh
Profile icon
madison2
Profile icon
programmeruser
Profile icon
badst
Profile icon
Whippingdot
Profile icon
SwaroopBappanad
Profile icon
GeumjuKim
Profile icon
JasonLiu19
Profile icon
MatthewX
Profile icon
dabs364
Comments
hotnewtop
Profile icon
[deleted]

i like this

Profile icon
fuzzyastrocat

@bowmand117 Thanks!

Profile icon
RayhanADev

@fuzzyastrocat be honest, have you ever made anything that isn’t super duper amazing xD. Nice project, bramley better accept this lol.

Profile icon
fuzzyastrocat

@RayhanADev LOL yes, I would link some projects from bad coder me (me as of years ago) but they're too embarrassing :D

Thank you though!

Profile icon
DynamicSquid

How'd you do ray casting? Is it just extending a line until you hit a wall? But if that's the case it would seem very inefficient

Profile icon
fuzzyastrocat

@DynamicSquid It would seem very inefficient, but math says no!

Profile icon
DynamicSquid

@fuzzyastrocat So do you just check all the walls, and the end point of the light, and if the end point of the light isn't touching a wall, then keep moving it?

Profile icon
fuzzyastrocat

@DynamicSquid Basically, there are a bunch of "rays" each going from the player to the edge of the FOV (the angle of the ray being the variable). For each ray, it finds the nearest wall that it intersects and passes that to the player. The player then renders the walls based on that data.

The way it finds that nearest wall is lines 122 to 148. It's standard raycasting math, so I won't explain it here, but basically it calls cast on each wall and takes the closest point.

Profile icon
realTronsi

@DynamicSquid you can just use line intersection formula. Get the angle of the ray and see which line it intersects with

Profile icon
fuzzyastrocat

@DynamicSquid Also, one thing I forgot to mention: thanks to math, it's not an iterative solution (it's not "extend line until you hit"), instead it's just "do math on each wall and from that find where the line hits that wall".

Profile icon
realTronsi

But just to be safe still send your submission to him via email

Profile icon
realTronsi

@realTronsi btw is this non euclidian? the map seems to change everytime I loop around. Anyhow really nice simplistic graphics!

Profile icon
fuzzyastrocat

@realTronsi No, it's not non-euclidian. But there's quite a few similar paths, which would explain what's going on!

Profile icon
realTronsi

@fuzzyastrocat ah okay lol, I got slightly confused, are the spawnpoints the same?

Profile icon
fuzzyastrocat

@realTronsi Yep, always the same spawn!

Profile icon
realTronsi

@fuzzyastrocat and the raycasting is done on the client side?

Profile icon
fuzzyastrocat

@realTronsi Yes, so you could "hack" the graphics. But you can't hack the movement since that's all server-side.

Profile icon
realTronsi

@fuzzyastrocat yeah, I mean I understand why you choose to do it client side, it would be exponentially harder on server, but just slightly disappointing lol

Still very good though, maybe you could make a version where your lanterns light up the map for other players as well

(also I see you used msgpack! basically no one uses msgpack for websockets except for me and the people I've talked to lol)

Profile icon
fuzzyastrocat

@realTronsi I'm not really sure what the value of doing it server-side would be.

That was planned, I just didn't have time to implement it. I was also worried that you'd end up with a situation where there's a billion players all lighting up the maze, which ruins the fun part.

(Lol it's so useful, mega compressor)

Profile icon
realTronsi

@fuzzyastrocat yeah true, server side would be hard, but I have this idea of just sending the line segments over. The math might slow things down a bit considering this is repl, but otherwise it should actually not slow down too much

Profile icon
fuzzyastrocat

@realTronsi The math is surprisingly fast, and I've got it at a ray density where it's good enough that weird things don't happen often but it's not extremely slow.

Profile icon
realTronsi

@fuzzyastrocat well what method are you taking? I never tried raycasting but I think I know the ideas behind it. If you use line intercepts, which in this case you could easily do so since all the walls are perfect mod 90 and the player rotation is also stored, it won't be a toll on the server

If you're just doing like a while loop and incrementing some coordinate by 1 each time then seeing if it is on a line or something, then that's really inefficient and slow

Profile icon
fuzzyastrocat

@realTronsi OH gosh no, that's not at all what I'm doing. It's just "do math and boom insta-get the coordinate of intersect":

// the math part const den = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4); if (den == 0) { return; } const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / den; const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / den; if (t > 0 && t < 1 && u > 0) { const pt = new p5.Vector(x1 + t * (x2 - x1), y1 + t * (y2 - y1)); return pt; } else { return; }

And I still don't really get how having it on the server would help. It'll just mean a lot more socket traffic. And doing those calculations has basically no performance drag on the client.

Profile icon
realTronsi

@fuzzyastrocat well the point of having it on the server is so people don't cheat, because that's really what makes multiplayer difficult.

I mean with raycasting on the client side, although from a efficiency standpoint it might make sense, but people are able to cheat the main theme of your game which is quite unfortunate

Profile icon
fuzzyastrocat

@realTronsi Ah, I see. Well, since there isn't any points system or leaderboard, I couldn't care less if people try to cheat. All cheating at this game does is make it boring, so honestly they kinda deserve it if they try.

Profile icon
realTronsi

@fuzzyastrocat okay. kinda like how people cheat Among Us lmao. But just an fyi for the future though it is the best practice to keep everything that affects gameplay on the server side

Profile icon
fuzzyastrocat

@realTronsi Ye, that's an issue I'm having to deal with on Askew

Profile icon
realTronsi

@fuzzyastrocat mhm, to be fair the other main reason that thes gameplay affecting things are on the server side is for uniformity, so that people don't have different results or displays due to different framerates, systems, etc

Profile icon
fuzzyastrocat

@realTronsi Yeah. I always do that though, even if I do things client-side I use time delta to normalize everything.

Profile icon
realTronsi

I think he will accept late submissions

Profile icon
fuzzyastrocat

@realTronsi Oh, that's nice. (I don't want to use my email here, but there's a comment on the BramJam page saying that it's ok just to mention bramley in your post. @bramley can you confirm?)

Profile icon
realTronsi

@fuzzyastrocat I think bramley would need to email/dm you a winning voucher though since you're going to win obviously

Profile icon
realTronsi

@fuzzyastrocat win as in you get 1 month hacker by just participating, and also bc this is a very good project

Profile icon
fuzzyastrocat

@realTronsi lol thx, if that happens we can figure something out