Share your repls and programming experiences

← Back to all posts
shadows — Multiplayer Shadowy Halloween Maze Game!
fuzzyastrocat (1859)

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



Controls:

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

Enjoy!

Comments
hotnewtop
RayhanADev (2513)

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

fuzzyastrocat (1859)

@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!

DynamicSquid (4893)

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

fuzzyastrocat (1859)

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

DynamicSquid (4893)

@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?

fuzzyastrocat (1859)

@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.

realTronsi (929)

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

fuzzyastrocat (1859)

@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".

[deleted]

i like this

realTronsi (929)

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

realTronsi (929)

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

fuzzyastrocat (1859)

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

realTronsi (929)

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

realTronsi (929)

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

fuzzyastrocat (1859)

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

realTronsi (929)

@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)

fuzzyastrocat (1859)

@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)

realTronsi (929)

@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

fuzzyastrocat (1859)

@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.

realTronsi (929)

@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

fuzzyastrocat (1859)

@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.

realTronsi (929)

@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

fuzzyastrocat (1859)

@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.

realTronsi (929)

@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

fuzzyastrocat (1859)

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

realTronsi (929)

@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

fuzzyastrocat (1859)

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

realTronsi (929)

I think he will accept late submissions

fuzzyastrocat (1859)

@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?)

realTronsi (929)

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

realTronsi (929)

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

fuzzyastrocat (1859)

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