Share your repls and programming experiences

← Back to all posts
[GAME] MULTIPLAYER 3D Survival Game! SNEAK PEEK
fuzzyastrocat (769)

EDIT: Check out the update here!

Many games here are 2D, so I thought I'd try my hand at 3D with THREE.js. I'm not done with the game yet, but I thought I'd post a sneak peek so that I can get feedback for it!

As of right now, there's no real goal (you can't win or lose). But you can go around and do stuff. Here's the controls:

  • Arrow Keys or WASD to move
  • Q and E or rightclick+drag to rotate the camera
  • Click and hold to saw stuff (when not placing — you have to be touching an object too)
  • Click on an item in the upper-left to craft it (these items will appear when you have the necessary resources to make them)
  • Click on a item you've crafted in the bottom bar to start placing it (a ghost version of it should appear in front of you, you can move around to position it as you like) and then click again to place it or right click to cancel.
  • NEW: Enter to chat!

As of now, you can build walls (with wood) and campfires (with stone and wood). There's a day and night cycle in place too, so your campfires will look good :D

And yes, this game is fully (server) multiplayer, so you can build a base with others! (Try opening two tabs if there's no one else around)

Enjoy! If you find any bugs or have any suggestions, please post them!

IMPORTANT: If the land is empty at first (no trees, rocks, etc), please let me know! (And then reload the page until it isn't.) I think I've fixed that bug but I'm not certain.

Commentshotnewtop
DJWang (1238)

Keep up the good work! This is so amazing I have no words for it.

Only suggestion: Make the mouse able to shift the view. It's a bit annoying having to keep pressing q and e

fuzzyastrocat (769)

@DJWang Wow thanks! I will definitely keep it up!

fuzzyastrocat (769)

@DJWang (seeing your updated suggestion) Ah ok. I will implement that soon!

fuzzyastrocat (769)

@DJWang Ah actually, there's a problem here. Since mouse click also means [use tool], clicking and dragging would mean doing two things at once. I'll probably just keep it this way for now (the camera isn't intended to move around too much), but when I get around to it or if I have more requests I will add it.

DJWang (1238)

@fuzzyastrocat

Ok, thanks! Just an idea: If Nodejs includes right click as well, would that give you an idea? :)

fuzzyastrocat (769)

@DJWang (The game itself is actually written in browser JS, nodejs is only for the backend.) I'll make rightclick+drag move the camera.

DJWang (1238)

Yay! Tell me when you've added it! @fuzzyastrocat

DJWang (1238)

@fuzzyastrocat Yesss This is what I'm talking about! Great job!!!

oculusquest (7)

@DJWang I wish that the character would rotate with the view

fuzzyastrocat (769)

@oculusquest Yeah, I've been thinking about that... I tried it out and it was weird, but I might try it again.

fuzzyastrocat (769)

@dabombdgdzjr Mouse locking would not work with this game because of how much the mouse must be used to interact with the ui (which will increase as the game gets more developed). But thanks for the idea anyway!

dabombdgdzjr (45)

Oh lol i forgot about the clicking crafting XD @fuzzyastrocat

pepelaugh (429)

One of the smoothest and best looking 3js games i've seen. can't believe how good this is.

DynamicSquid (3609)

Yo this game's legit good!

fuzzyastrocat (769)

@DynamicSquid Thanks! I tried to make it as smooth and clean as possible. More updates coming (hopefully) soon!

DynamicSquid (3609)

@fuzzyastrocat Which cube is you? I'm the one spinning in circles

DynamicSquid (3609)

@fuzzyastrocat okay I actually have some stuff I need to get done today, but yeah this is an awesome game! can't wait until you release the full version!

NicholasWhite6 (0)

@fuzzyastrocat do you have a way of making the view stay behind the kube to where its not like cube is wandering off

fuzzyastrocat (769)

@NicholasWhite6 The camera will follow your cube. You might be getting confused with other players.

NicholasWhite6 (0)

@fuzzyastrocat my bad lol, there was alot of people one the server. Great game tho!

fuzzyastrocat (769)

@NicholasWhite6 Oh actually, it's my bad, I broke the camera tracking mechanism with a new update. I'll fix that promptly!

NicholasWhite6 (0)

@fuzzyastrocat your good, its good it just doesnt follow it around other than direction of camera

fuzzyastrocat (769)

@NicholasWhite6 Yeah. It used to work perfectly, but I added an update because people wanted rightclick+drag to rotate the camera which broke it.

NicholasWhite6 (0)

@fuzzyastrocat great game, if i might add one other thing, when i go to place somethin i crafted it doesnt place it just disapears after i "place" it

fuzzyastrocat (769)

@NicholasWhite6 That probably means the server is overloaded. I'll look into it.

fuzzyastrocat (769)

@NicholasWhite6 Hmm weird, I have zero idea why that's happening. Just this morning it was working fine, now it's broken.

fuzzyastrocat (769)

@NicholasWhite6 Fixed! (Also, thanks for saying "great game" even when 99% of the coolness of the game was broken :D )

NicholasWhite6 (0)

@fuzzyastrocat i mean it is a great game ive been messing around in it and so far nothing so good job and on listening to the comunity and fixing any glitches

NicholasWhite6 (0)

@fuzzyastrocat if i might ask, how long did it take you to make this

fuzzyastrocat (769)

@NicholasWhite6 A couple days, 2-3 hours each on average (not contiguous so just an estimate)

fuzzyastrocat (769)

@DynamicSquid In case you're interested, there's a new update out: https://repl.it/talk/share/GAME-Askew-MAJOR-UPDATE-Age-of-steel/60050

(sorry if this is spammy, I'm not very experienced with this kinda stuff)

fuzzyastrocat (769)

ANNOUNCEMENT: I've implemented an anti-hack for the build system! Please don't try to hack anyway.

fuzzyastrocat (769)

Hey everyone! If the camera tracking was weird or if you were unable to craft anything, it's because I accidentally broke it while adding a new feature. Try it again, I've fixed it now!

fuzzyastrocat (769)

oh my gosh, amasad upvoted...

DynamicSquid (3609)

@fuzzyastrocat Awesome!! there should be an achivement: eren (wait how do you spell eren) amasads upvote or something like that. Or at least naie it so that his upvotes counts as 2 lol

DynamicSquid (3609)

@fuzzyastrocat wow i suck at typeing on my phone

fuzzyastrocat (769)

@DynamicSquid (earn?) Yeah that would be cool!

fuzzyastrocat (769)

@DynamicSquid (in response to the "typeing on my phone" one) Heh... I suppose the edit button would be a fix for that

fuzzyastrocat (769)

@DynamicSquid YAY I'm on the cycles leaderboard

fuzzyastrocat (769)

@DynamicSquid I have 492 cycles... come on 500, come on 500... :D

DynamicSquid (3609)

@fuzzyastrocat ah... don't you love writing actual good code? it works, clean syntax, and easy to understand. I'm doing it right now and I feel awesome!

fuzzyastrocat (769)

@DynamicSquid It's great! Unless you make something like this, and then everyone comes in and hacks it so you have to do a bunch of anti-hack.

DynamicSquid (3609)

@fuzzyastrocat lol! Oh, I have a quick question about lang dev. So if there's an expression, that get's turned into an Expression AST in the Parser. But what does the Interpreter do with it? I know how to take an Expression AST and have the Interpreter evaluate it down to a single value, but I have to modify the original AST to do so. But that's a problem if I still need the original AST (for example in a loop). So should I make a copy of an AST in the Interpreter and evaluate that? Or is there a better way?

fuzzyastrocat (769)

@DynamicSquid Yay lang dev, now I can get back to doing what I really want to do not fixing bugs in games lol :D

Could you invite me to the repl? If not I'll make a repl to demonstrate, since I think it would be easier to do it in code rather than try to explain it in words. (The answer in short is "no, don't make a copy, by all means don't make a copy, but you don't have to modify it in place either", but I'd like to show what I mean.)

DynamicSquid (3609)

@fuzzyastrocat I guess you could invite me to a repl, that'd be fine

fuzzyastrocat (769)

@DynamicSquid Ah ok. I'll make a C++ repl to demonstrate, and I'll invite you.

ZDev1 (653)

WOW! This is amazing! Now I know why @rjlevy recommended you to our team!

RolandJLevy (498)

@ZDev1 yes, this is so awesome! :)

techde (92)

@ZDev1 Ye, this is so awesome! One suggestion though: It's so good there are no suggestions!

fuzzyastrocat (769)

@techde Ha! There's definitely improvements I want to make though, this is only a sneak peek after all :D

Glare (229)

Wow! This is very good. I think I should get into this. Nice job :)

fuzzyastrocat (769)

@Glare Thanks! If you're looking for a 3D game framework, I think THREE.js is your best option.

fuzzyastrocat (769)

@NicholasWhite6 THREE.js is a JS module. You can find more on the docs at threejs.org.

Bookie0 (4007)

woo great work! I like the shapes, pretty aesthetic! :)

elipie (97)

umm all i see is this

fuzzyastrocat (769)

@elipie Just reload the page, I think that means the repl was sleeping.

elipie (97)

@fuzzyastrocat yeah, lol i reloaded it like 8 times

fuzzyastrocat (769)

@elipie Weird, I've never had that issue until now. I checked in the console and it said something like "ERR_NETWORK_RELOADED", which definitely suggests its a repl issue not a game issue.

elipie (97)

@fuzzyastrocat okie so should I just wait another day? Because it did the same thing yesterday

fuzzyastrocat (769)

@elipie Uh no, just reload until it isn't. (If it never gets normal, check the console and tell me what error you're getting.)

Whippingdot (3)

You are godly. THIS IS SOOO GOOD!!!

The only thing is I got stuck in the desert. If you got too far there is nothing left. I could pick up something by pressing the right click too btw:

but I think that is a glitch, so if it is please fix it. Thank you for making this awesome prototype of a game. I hope you finish the game and post it here.

fuzzyastrocat (769)

@Whippingdot Thanks!

Yes, you can currently go too far. As the game gets more features there will be more biomes and I will make the map have a fixed size so you can't just get stranded.

And yes, I've never encountered that glitch. I'll fix it soon!

RolandJLevy (498)

@fuzzyastrocat you are on fire! this is awesome!!! 🔥 it runs so smoothly - well done!

fuzzyastrocat (769)

@rjlevy Thank you! The smooth interpolation was a goal for this game, I think it works pretty well!

RolandJLevy (498)

@fuzzyastrocat, great job! Can you summarise the stack you used?

fuzzyastrocat (769)

@rjlevy Thanks! Sorry for my ignorance (I don't have much formal background so I'm not good with terms), by stack you mean "the software platforms/languages/etc I used" right?

RolandJLevy (498)

@fuzzyastrocat yes, that's what I meant, thanks!

fuzzyastrocat (769)

@rjlevy Ok. So, for client-side, I used HTML/CSS for all the UI elements and THREE.js for the interactivity along with the main 3D game view. On the server side, I used node.js to handle all the shared state and socket.io to communicate with all the clients.

RolandJLevy (498)

Hi @fuzzyastrocat, thanks for explaining. I'm interested in how you've been able to run Node in an HTML repl. Are you using an endpoint from a different Node repl?

fuzzyastrocat (769)

@rjlevy Great question! I'm actually not running node in an HTML repl. I like to separate out my servers and my clients (so that I can make quick fixes to either without having to restart the entire system), so I have a separate repl (AskewServer) which runs the nodejs server. The HTML repl is just the client alone. Hope that helps!

RolandJLevy (498)

Hi @fuzzyastrocat, great - that's what I thought! It's good to know that's how you did it. I've been taking the same approach recently, mainly to hide API keys in .env files so people can't use them. Here is a very basic example I made:

This is the front end (client) code in an HTML repl
https://repl.it/@rjlevy/html-unsplash-search-getting-api-keys-from-node-app

Here is a demo: https://html-unsplash-search-getting-api-keys-from-node-app.rjlevy.repl.co/

It connects to a Node repl via an endpoint like this which provides JSON for the front end: https://node-api-keys.rjlevy.repl.co/json?s=smile

Here is the Node repl which provides the JSON
https://repl.it/@rjlevy/node-api-keys-for-unsplash which can be tested here:

I hope that makes! :)

fuzzyastrocat (769)

@rjlevy Cool! Glad to know I could be of assistance (and those are really cool!) Hiding things in .env's is definitely very useful!

RolandJLevy (498)

Hey @fuzzyastrocat, thanks, your game is going viral whoop, whoop!

By the way, are you a student or do you work as a software developer?

ZDev1 (653)

@rjlevy most of repl users are very young...

fuzzyastrocat (769)

@rjlevy Yay viral-y!

Actually neither. I'm not (and have never been) in any formal software education program, but I don't work as a developer either. I'd describe myself as a hobbyist.

RolandJLevy (498)

Hey @fuzzyastrocat, you're up to 153 cycles, wow and well done! Amazing that you've never had any formal software training. I think you could quite easily get work as a developer. Is that something you're aiming for?

Progemmernav (1)

OMG! The graphics are sick compared to other browser games! Keep going seriously

fuzzyastrocat (769)

@Progemmernav Thanks! I definitely will continue working on it!

Cheesehasman (4)

wow... I am so speechless. Also this would make a good io game lol.

fuzzyastrocat (769)

@Cheesehasman Thank you! Yeah, it would fit as an io game, unfortunately io domains cost money :D

uhmansoori (46)

Great game man!! Really love it. Just the sensitivity is too high for me, other than that its great.

fuzzyastrocat (769)

@uhmansoori Thanks! Which sensitivity do you mean?

uhmansoori (46)

@fuzzyastrocat When i try to turn left or right, the character moves very much.

fuzzyastrocat (769)

@uhmansoori Ah ok. That's because I'm turning relative to the browser's framerate (the naive solution, works for testing), so I'll implement a time-delta based normalization soon.

EpicGamer007 (590)

Should I learn threejs? It seems reallyyyy cool

EpicGamer007 (590)

You might even be able to pair it with electron and make it an app.

fuzzyastrocat (769)

@EpicGamer007 If you're looking for a 3D game framework, then in my opinion THREE.js is your best option! It might take a while to learn, but it's definitely worth it!

(And yes, if it works with HTML it will work with electron, so you could make an app with THREE.js)

EpicGamer007 (590)

@fuzzyastrocat , yea... I am always inspired by your projects keep up the great work!

HahaYes (1220)

You should add names though

fuzzyastrocat (769)

@HahaYes Definitely planned. This was basically just to get the core functionality down.

fuzzyastrocat (769)

@HahaYes A few days, avg. 2-3 hrs each (not contiguous)

HahaYes (1220)

@fuzzyastrocat ye I saw really good. Do you know that there is going to be a game jam soon? You should participate and also have me on the team

fuzzyastrocat (769)

@HahaYes Thanks! And no, I didn't know. Believe it or not, I actually don't really like making games, so I'm not sure if I'll participate, but I'll consider it.

HahaYes (1220)

@fuzzyastrocat hrmmm ye maybe if prizes are good...

hello1964 (22)

Wow that's really cool. I know I could never do that XD

fuzzyastrocat (769)

@hello1964 Thanks! But don't say that, if you practice and work hard you can make anything you want to!

hello1964 (22)

@fuzzyastrocat I barley even know how to use HTML, CSS, and JavaScript

fuzzyastrocat (769)

@hello1964 That doesn't mean you can't learn to though!

aiden765 (12)

Crazy. I had almost forgot how powerful 3js was.

fuzzyastrocat (769)

@aiden765 Thanks! Yeah, THREE.js is super cool.

CarlosRosiles (184)

Its a great game! I would recommend a chat and some usernames!

fuzzyastrocat (769)

@CarlosRosiles Those are definitely planned, I was trying to get the core functionality down first. Thanks!

fuzzyastrocat (769)

ANNOUNCEMENT: There's been an update, released here!

RobertFurr (59)

If this gets big and has a large player base, I would totally recommend adding a chat filter at some point

fuzzyastrocat (769)

@RobertFurr Ha, it already has a chat filter. It's npm's bad-words, so obviously it's a bad package. The problem is, chat filters are extremely easy to get around, and there's really no way to truly block everything.

fuzzyastrocat (769)

@RobertFurr Yeah, it's unfortunately pretty much impossible for chat filters to truly filter out everything without using some kind of AI algorithm, and even then they could fail.

RobertFurr (59)

@fuzzyastrocat Alright, you have a very nice game coming along. Keep up the good work! :)

MrTheCool (1)

@fuzzyastrocat this game is cool!!
Kinda gives me maze runner vibes!

Come find me XD

fuzzyastrocat (769)

@MrTheCool Oh did you build that spiral? Nice work lol

MrTheCool (1)

@fuzzyastrocat haha XD
Nice work on the game!!

Jeydin21 (35)

@HyperGamerStuds @NicholasWhite6 Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

parker02311 (2)

Very nice, maybe add some way to disable chat.

fuzzyastrocat (769)

@parker02311 Agreed. It seems that people are abusing it often now, which is really sad but I suppose I'll have to compensate.

parker02311 (2)

@fuzzyastrocat Thanks! I am in the middle of school checking this out and I would like to have an option to disable chat because some people are spamming inappropriate things. Anyway thanks for the amazingly quick reply. Looks great so far though, keep up the great work. The best I can do is make Roblox games.

[deleted]

*D**Pics "SUP LOSERS" lol idk y that even popped up when I test-played XD

fuzzyastrocat (769)

@HyperGamerStuds There are clearly some hackers here.

[deleted]

@fuzzyastrocat hop on to the game rn, XD some dude is spammin' XD