Skip to content
← Back to Community
Presenting... 🟠 Rolling Forests! 🌳 | Awesome 3D Infinite Runner
Profile icon
h
has Hacker Plan
RayhanADev

Warning: You will experience infinite fun times ahead!!!

Hiya! This is an awesome little 3D runner game I made, drawing some inspiration from games like Rolling Sky and Subway Surfers. Now, without any further delay:

Presenting... Rolling Forests

demo

Play It On Fullscreen

CLICK THIS LINK

How to Play?

Just avoid the trees and keep rolling to get new high scores! But watch out, the game gets progressively harder the longer you roll.

Controls:

KeyAction
Left Arrow/Swipe or ASwitch to Left Lane
Right Arrow/Swipe or DSwitch to Right Lane
Up Arrow/Swipe or W or SpaceJump Up
P/Q Key or Down SwipePause the Game

Good luck, I can't wait to see your scores!

* Note, this will probably be my last ThreeJS game for a while :)

Voters
Profile icon
debugt
Profile icon
Abd-el-Rahmane6
Profile icon
YousifFaisal
Profile icon
Fungal
Profile icon
JonLittle1
Profile icon
SAMGAMING2
Profile icon
GraysonWang
Profile icon
vmaxplayz
Profile icon
xXToluwaXx
Profile icon
G0RG3
Comments
hotnewtop
Profile icon
Baconman321
let stop = false; let time = 0; let betweenlanes = () => { let left = false; const iter = () => { const evt = new KeyboardEvent("keydown", {keyCode: left ? 37 : 39}); document.dispatchEvent(evt); left = !left; if(!stop){ window.setTimeout(iter, time); } }; iter(); }; betweenlanes();

This will go between the lanes, where it's safe because the trees only spawn in each lane. It is a bit flawed though - it oftentimes goes too close to the actual lane in which it hits a tree, but clicking the up arrow and with a few tries, I got this high score with the "hack":

Screenshot 2021-04-08 at 8.07.13 PM

I really would like to make a machine learning program for this, but I haven't even done ML yet lol.

Profile icon
RayhanADev

@Baconman321 oooOooOh
you figured that bit out didn't you :)
Yeah I noticed you could slip through the lanes between trees and I kinda thought that was fine, you know one of those really weird speedrun glitchs so i'll let it slide ;D

if you manage to make a silver bullet out of that code I might make a patch for it though...

Profile icon
Baconman321

@RayhanADev Not necessarily possible (at least with what I thought out).

I could fork the game and edit it so the positions are globally exposed, then make a program to dodge the trees, but I'm not that good at game design :/

Profile icon
RayhanADev

@Baconman321 ah, well then I guess I could (not that I have any reason to make the game easier for hacking xD)

you tried I certainly give you credit for that xD

Profile icon
Baconman321

@RayhanADev IDK how you're going to fix this (unless you make the ball "teleport" - which would then look weird.

Oh wait, there is a way, but I ain't tellin :)

Profile icon
Dont0click0here

Don't click on my profile

Profile icon
Baconman321

@Dont0click0here I did it lol.

Don't post if you don't want people looking at your profile (it decreases the chances of someone knowing you exist dramatically).

Profile icon
Dont0click0here

@Baconman321

Never gonna let you down,

Never gonna give you up,

Profile icon
Baconman321

@Dont0click0here Ah, so that's what the tiny.cc url is.

I was cautious since url shorteners often lead to trouble >:(

Profile icon
[deleted]

I clicked on it anyway and looked at your repl.

Profile icon
[deleted]

@RayhanADev I think he used inspect element like I did:

8

Profile icon
Baconman321

@RoboRobert Uhh, nope :)

It was primarily luck tho, I only got 167 as a high after that :/

Profile icon
RayhanADev
Profile icon
dragonslayor

I got 268, but I couldn't get a screenshot as it just continues to roll after dying, and restarts really quickly. But I like the game. Good Job!

Profile icon
RayhanADev

@dragonslayor nice score, and thanks!
Also quick tip, you don't die you run forever and it shows your high score right below your current score ;D

Profile icon
dragonslayor

HOW DID I NOT NOTICE THAT!!! I am actually really bad at looking, sorry didn't see that. @RayhanADev

Profile icon
RayhanADev

@dragonslayor nah it's kewl, glad I could help xD

Profile icon
Flazer27

@Baconman321 teleport the hit box but not the ball? is that the way you arent telling or is it to expand the tree hit box or have I not guessed it

Profile icon
Baconman321

@Flazer27 No I'm basically having the program rapidly move between the lanes so that the trees won't hit it.

Profile icon
lilp6k

@Baconman321 there is a user on github called The Code bullet who has a Neat algorithm repository which can be implemented in any game you want. you should go check it out! https://github.com/Code-Bullet/NEAT-Template-JavaScript

Profile icon
CyberDaDev

me whos been trying to find a good hac: (╯°□°)╯︵ ┻━┻ @RayhanADev

Profile icon
CyberDaDev

dude thats amazing bro [email protected]

Profile icon
RyanWright212

@RayhanADev i now have 137 as new highscore

Profile icon
220723j

@dragonslayor dude, it shows high score under your current score

Profile icon
Classfied3D

@Dont0click0here Wrong way round. You can find the full lyrics here

Profile icon
Baconman321

@Classfied3D You don't even hide the rickroll!

If you're going to rickroll us, at least conceal it somewhat.

Profile icon
Classfied3D

@Baconman321 What was that?
rickroll-roll

Profile icon
Classfied3D

@Classfied3D *Gets rickrolled* on-site

Profile icon
Baconman321

@Classfied3D Never clicked it so technically it's not a rickroll :)

Profile icon
Classfied3D

@Baconman321 well you clicked on the link to my reply so...

Profile icon
Baconman321

@Classfied3D Wasn't a rickroll since you never directed me to do so in the first place :)

It's the same reason why I wouldn't be rickrolling myself if I clicked on the yt link to the song.

Profile icon
Classfied3D

@Baconman321 I played a rickroll to a friend, and told him there was a really funny twist at the end and it only made sense is you watched it all the way through. He watched the whole thing from start to end, only to realise that there was nothing at the end and he was 100% rickrolled. Even worse though, it was on loop lmao

Profile icon
Baconman321
Profile icon
GurveerKhosa

@dragonslayor i got 298
:/

Profile icon
Bookie0

Screen Shot 2021-04-09 at 10.42.33 AM

This just proves that the earth is..

Round!

Edit: yes actually more like a sphere
Profile icon
RayhanADev

@Bookie0 hahahahhahahaha, good one
from what I can see, the Earth seems to actually be a semi-almost-sphere though :>?

Profile icon
Bookie0

@RayhanADev ah um yes a sphere!

Profile icon
RayhanADev
Profile icon
FlaminHotValdez

@Bookie0 EXCUSE ME?!?!?!

THE EARTH IS FLAT!!!

Profile icon
RayhanADev

@FlaminHotValdez the Earth is a pentagonal dodecahedron what's up with ya'll xD

Profile icon
FlaminHotValdez

@RayhanADev

Let's compromise.

It's a triangular icosahedron.

Profile icon
Bookie0

@FlaminHotValdez oH yEs It Is!!!

Profile icon
RayhanADev
Profile icon
iSimoo
Profile icon
DylanWatlington

no its an octahedron @FlaminHotValdez

Profile icon
sweetmango88

liar the earth is a cylinder! how didn't you know?

Profile icon
dragonslayor

Nah more like a million-ahedron

Profile icon
breannsmith130
Profile icon
FlaminHotValdez
Profile icon
Flazer27

no the earth is in the shape of a chicken leg

Profile icon
FlaminHotValdez

@Flazer27

IT IS FLAT

Profile icon
Flazer27

@FlaminHotValdez fine dino chicken nugget

Profile icon
CyberDaDev

i dont get why ppl think the earth is flat, i mean since covid 19 started the 6ft rule would make someone fall of the edge if the earth was flat xDDDDDDDDDddd @Bookie0

Profile icon
CyberDaDev

@FlaminHotValdez
I DECLARE PEACE!!!
ITS BASIC EVIDENCE WE EVEN WENT TO SPAVE BRUV!!!
Screenshot 2021-04-12 at 11.42.40 AM

Profile icon
AhsenKhan

@FlaminHotValdez An icosahedron that's subdivided and smoothed a lot with noise applied for the height map

Profile icon
Myztiq

@Bookie0 checkmate flat earthers!

Profile icon
Myztiq

@Bookie0 yall are so dumb dont you know? the earth is.......... SHREK

Profile icon
SeamusDonahue

as for shape is is round, however due to the fact the earth is made up of mainly of uncarbonated water it is by definition flat. @FlaminHotValdez

Profile icon
PixelRunner

@SeamusDonahue technically the truth

Profile icon
Classfied3D

@Bookie0 You are all wrong. The earth is round flat an impossible triangle #myProfilePic
250px-Penrose-dreieck.svg

Profile icon
AtlantianNet

@RayhanADev Nah earth is obviously a rhombicosidodecahedron

Profile icon
tussiez

Three.js?

✅
pogger
This is great!
However, try not to use var and maybe less function(?)s.
Threejs also recommends importing the library as a module.

Profile icon
RayhanADev

@tussiez lol thanks xD
i did get that bit from the tutorial seemed pretty senseless to me, but I did it anyways; will fix :D
I always use use the actual file if possible on smaller projects, doesn't make sense to use the cdn :)

Profile icon
tussiez

@RayhanADev Which CDN? https://threejs.org/build/three.module.js - not minified

Profile icon
RayhanADev

@tussiez yeah, but why use the cdn when you can host your own copy?

Profile icon
tussiez

@RayhanADev Either works

Profile icon
RayhanADev

@tussiez yep :). I'd rather use a cdn when there is a lot more going on in the project and it's taking up file space but that's just me imo

Profile icon
tussiez
Profile icon
RoBlockHead

Very cool game!

Profile icon
RayhanADev

Thank you @RoBlockHead ! :D

Profile icon
IOP3

poggss

Profile icon
RayhanADev

@IcynHackz poggers!

Profile icon
IOP3
Profile icon
FlaminHotValdez

I just realized.

Jump OP, it slows your speed while you're midair

Profile icon
RayhanADev

@FlaminHotValdez hahahaha
try jumping and switching a lane and then immediately pause as soon as you press

Profile icon
FlaminHotValdez

@RayhanADev Ah noice...definitely gonna help lol

Profile icon
RayhanADev
Profile icon
NotMrMan

This is great!

It would be cool if the game had audio.

If you want to add it, but need samples, I can help!

Profile icon
RayhanADev

@NotMrMan thanks! I suppose I could add audio why not :)
If you have any samples just point me to them and I'll take a listen :D

Profile icon
NotMrMan

@RayhanADev i'll work on some!

Profile icon
NotMrMan

@RayhanADev here is the zip file: https://host.notmrman.repl.co/sounds.zip

The rock sound didn't come out very good. it sounds weird, since i used SFXR for the rest of the sounds.

I included menu sounds, just in case you wanted to add a menu. There is a hit sound, a jump sound, a menu cursor move sound, a menu select sound, a rock rolling sound, and a pause sound.

i'm not sure if the sounds will fit the game, but it's worth a try.

Profile icon
RayhanADev

@NotMrMan dude these are great! also I use sfxr too
I think I'll add these :)

Profile icon
NotMrMan

@RayhanADev thanks! glad you like them :)

Profile icon
ZacCode0

173 score im beatin this lmao
u could make this into an app, and put it in google play honestly, it's so addicting

Profile icon
RayhanADev

@ZacCode0 hahahahah I have gotten that recommendation
you know what, i'll look into it ;D

Profile icon
GhostKing007

Got 51. There's always two trees together that are impossible to get out of lmao

Profile icon
GhostKing007

Great game btw! (I finally have something to kill time during online class)

Profile icon
RayhanADev

@GhostKing007 thanks!
also did you know you can jump and go through that small space between the trees :>?

Profile icon
GhostKing007

My god that is a fast reply! Yeah, I discovered the jump thing after 2-3 mins of playing, I didn't read the post lol

Profile icon
RayhanADev
Profile icon
TariqAlBayer

@RayhanADev you can also just jump over them

Profile icon
tokasenpai

this is kool

Profile icon
RayhanADev

@tokasenpai glad you like it :D

Profile icon
tokasenpai

@RayhanADev no problem

Profile icon
tokasenpai
Profile icon
IntellectualGuy

My high score is 116

Profile icon
RayhanADev
Profile icon
GeditEdger

@IntellectualGuy
haha-ez-go-brrr
smhh....

Profile icon
VofaDev

You should make the particles fade out and not just disappear. Would make it feel more polished. Otherwise, this is soo cool!

Profile icon
RayhanADev

@gearDev good suggestion, and thanks!

Profile icon
tussiez

@RayhanADev
image
Make sure to set transparent:true or changing the opacity won't work. When you move the particles, just reduce the opacity like this:

someParticleMaterial.opacity -= 0.05; // speed
Profile icon
RayhanADev

@tussiez oh wow I completely forgot to work on that thanks 😅

Edit: done!

Profile icon
tussiez

@RayhanADev Awesome!

Profile icon
JWZ6

so so so so pog poggity pog pog o wow! me high score: 67 gud job

Profile icon
RayhanADev

@JWZ6 nice!

Profile icon
JWZ6
Profile icon
IAmTrashAtLife

i got 81 lol

Profile icon
haha0201

Purposely died at 420. I am satisfied with life now.

Profile icon
RayhanADev

@haha0201 lmfao xD.

Profile icon
haha0201

@RayhanADev yes god gamer has tryharded forest game for an hour

Profile icon
RayhanADev

@haha0201 you played this for an hour and only got to 420 :thonk: xD

Profile icon
haha0201

@RayhanADev what do you expect, it gets impossible to dodge and you just have to hope for good rng

Profile icon
RayhanADev
Profile icon
haha0201
Profile icon
LaneMartin

sighs another game on my addiction list

Profile icon
ch1ck3n
Profile icon
KookiesandBerris

@LaneMartin no kidding ;-;

Profile icon
StarletDevil

Handy trick:
You can switch lanes while in the air.
So I invented a "fake-out" technique, which is to jump to another lane, and while in the air, switch back to the lane you started in.

Profile icon
RayhanADev

@AstrumDeorum hahahha yep! I don't think many people realize that but it's very useful :)

Profile icon
StarletDevil

@RayhanADev Indeed.

Oh btw, no intent to plug, but I did want to inform you, that I found S4ND to be hilarious enough that I gave it something of a shoutout in a Headline for the News Ticker of my Cookie Clicker:
"Scientist Rayhan Creates Water That Acts Like Sand, Scientists Perplexed!"

I like what you've been making, keep going!

Edit: Now there's also
Scientist Rayhan Creates Ball That Doesn't Collide With Trees, Scientists Flabbergasted!

Profile icon
TSelden

Really great game!
Maybe you could store the player's high score as a browser cookie.

Profile icon
RayhanADev

@TSelden wow great idea!

I just added it :)

Profile icon
KookiesandBerris

This is such a fun little game! This is really impressive. Nic ework @RayhanADev
I got to a high score of 99!

Profile icon
RayhanADev
Profile icon
yzhacker

OMG this is really good.

Profile icon
RayhanADev

@QEREWRAD thank you!

Profile icon
CookieSnowOwl

well...

image
i got a good gaming chair
either that or i cheated
by making a program that spams w every like 1/60 second...
LOL
hmmm
i might make an AI

Profile icon
RayhanADev

@CookieSnowOwl LMAO
good luck with that AI xD

Profile icon
CookieSnowOwl

I may or may not have made the fork 50% easier
by jumping
now i will improve... >:)@RayhanADev

Profile icon
CookieSnowOwl

Continuous jumping no matter what.
Except when you are in the air or you're paused @CookieSnowOwl

Profile icon
CookieSnowOwl

Because I guess an AI can spam [email protected]

Profile icon
CookieSnowOwl

@RayhanADev
image
lol :( the new AI with the left right can't even beat me... welp i'll go fix it

Profile icon
CodingCactus

hahahah yes
image

but now my fingers hurt :(

Profile icon
RayhanADev

@CodingCactus lmao nice score! xD
any suggestions to make fingers not hurt (or is that just good ;D)?

Profile icon
CodingCactus

@RayhanADev the problem is that it changes lanes so slowly so you have to end up spam switching and jumping to stay between lanes rather than changing to the lane with no trees in

Profile icon
RayhanADev

@CodingCactus hmm, gotcha
I changed the amount of time it takes switch lanes, if you get the chance let me know how it feels now :D

Profile icon
Blackout4344

@CodingCactus
Screen Shot 2021-04-10 at 12.03.35 PM

Profile icon
CodingCactus

@RayhanADev wow yeah it's much better now

Profile icon
RayhanADev

@CodingCactus yay awesome!

Profile icon
[deleted]

WOW

THIS IS AMAZING POG HOWWWWWW

I LOVE ITTTTT

High Score: 32 :)

Profile icon
RayhanADev

@TheC0derGirl lmao thank you (^ヮ^)/

Profile icon
[deleted]

@RayhanADev (^ヮ^)

Profile icon
lilykhan

Cool✨

Profile icon
RayhanADev

:O thanks @lilykhan !

Profile icon
Trex10

Wow this is a really cool project. I wish I was as good at HTMl, CSS, JS as you.
(P.S. I upvoted )

Profile icon
RayhanADev

@Trex10 lol thank you xD, and trust me you can be good at web dev just put in effort and you'll be rewarded ;D

Profile icon
Trex10

@RayhanADev
Ok! I really just want to know how you can change the screen easily without going to the blank white screen that the js remove screen thingy does.

Profile icon
RayhanADev

@Trex10 hmm wdym?

Profile icon
Trex10

@RayhanADev
How do you make an HTML, CSS, JS repl that's interactive and can change the screen when a user does something?

Profile icon
RayhanADev

@Trex10 probably you should learn HTML, CSS, JS (I recommend w3schools)? Then create an html, css, and js repl!

Profile icon
Trex10

@RayhanADev
I do know some html, I can make a webpage pretty easily, but in order to make games I need to learn how to change screens so its not just a background with text and pictures and stuff that cant change.

Profile icon
RayhanADev

@Trex10 learn the <canvas> element! That's how most games are made.

Profile icon
Trex10

@RayhanADev
Ok I'll try that. ty!

Profile icon
BuddyRaider

RollingForests
Let's goooooooooooooooooo!
High Score of 1764!

Profile icon
RayhanADev
Profile icon
BuddyRaider

lol yeah, look at my bio XD @PyCoder01

Profile icon
BuddyRaider

@RayhanADev are ya gonna put up a WR list lol XD

dat would be cool lol
Profile icon
BuddyRaider

@PyCoder01 :C

sadness

lol

Profile icon
BuddyRaider

@PyCoder01 @RayhanADev (sorry for the pings, but um... yeeeeaaaahhh...)
RollingForests

That run took a whole half hour to complete (I definitely paused a few times lol)

Profile icon
BuddyRaider

@PyCoder01 chill, you did not ask for a ping, but you dont have to bite my head off lol

Profile icon
BuddyRaider

@PyCoder01 it is a figure of speech

Profile icon
RayhanADev

@BuddyRaider @PyCoder01 woah chillax you two xD
this is a nice place just go your separate ways lol

Profile icon
BuddyRaider

@RayhanADev lol yes XD

I am not complaining with that :P
Profile icon
coding1001

Add to your css file to prevent it from moving when you press the up arrow key

html,body{ overflow:hidden; }
Profile icon
RayhanADev

@coding1001 done, thanks for the tip :D

Profile icon
Bunnytoes

after like 5 minutes 147!

Profile icon
RayhanADev
Profile icon
Bunnytoes

@RayhanADev 154 now. this game is awesome!

Profile icon
IntellectualGuy

This looks like a game from the app store.

Profile icon
RayhanADev

@IntellectualGuy lol people say it should be

Profile icon
IntellectualGuy

@RayhanADev I mean this game is probably like 3-5 times better than a few games I've played on the app store. What might be hard about that though is like making it in swift instead.

Profile icon
RayhanADev
Profile icon
IntellectualGuy

@RayhanADev
Also I had a stroke of ingenuity, and I got a few ideas

  • A pause menu instead of simply just stopping the game, consisting of
    • Score
    • High Score
    • Resume
    • Restart
  • Pause and Arrow Key Buttons
  • When you die instead of just resuming with a zero score, maybe you go to the pause menu?
  • Background Music, and a sound when someone destroys a tree
  • As you go farther more types of obstacles
  • Powerups
  • Unrelated, but maybe a Favicon
Profile icon
Wilke000

YES @IntellectualGuy POWERUPS!!!!

Profile icon
FloCal35
Profile icon
RayhanADev

@IntellectualGuy okay, I've done a few of these!
pause and arrows (and swiping for mobile 🎉)
o wait that's actually it... let me work on some more 😅

Profile icon
IntellectualGuy

@RayhanADev I don't see any buttons

Profile icon
RayhanADev

@IntellectualGuy well you either use a keyboard or swiping (see the post). Are buttons necessary?

Profile icon
randomcodingdude

I love this game so much that I even opened the output in a new tab and bookmarked it. It's only that the ball takes to long to go from side to side.

Profile icon
RayhanADev

@aarav170109 :) yeah I'm working on side to side movement because to me it feels jut right but I guess I didn't take into account different processing powers.

Profile icon
SeamusDonahue

you should be able to use deltaTime (time since last frame) to make framerate independent movement, you can get deltaTime using three.js you can use this: https://threejs.org/docs/#api/en/core/Clock @RayhanADev