DEV Community

Lou Willoughby
Lou Willoughby

Posted on

I built my first JS game! 🎉

I built my first Maze JavaScript game

I used;

  • Vue.Js framework,
  • JavaScript,
  • CSS

Maze Preview

I've recently been learning DOM manipulation and so I decided to put my knowledge to practice and built a little maze game using the skills I learnt and also learnt new ones along the way.

It's only small and silly BUT i'm super chuffed with it. There are definitely things I could improve on or do differently so if you do have a look at the code, I am always open to constructive feedback as it will only help me code better.

A few things I used to make my Maze;

  • To make the maze itself I used CSS Grid;
    CSS Grid
    This is something i'm still new to using but I felt it was the best way to get an even 6x6 grid.

  • I used mouseover effects to make the game more interactive, when you hit the 'wall' it shows this by turning red;
    Wall Hover Effect

  • You only win by going passed start, if you try to go to the finish via another entry it tells you that's cheating!
    No Cheating

  • There may be a little surprise or two along the way 👀

I hope you enjoy this as much as I had fun building it, you can win it's not a trick 😉

GitHub Code: https://github.com/Louise-Ann93/mazegame
Game: https://mazegamepractice.netlify.app/

Enjoy 😊

Discussion (23)

Collapse
kissu profile image
Konstantin BIFERT

Haha, that one reminds me of a jump scare game that I've played once, really scary one. Here it's just nic-cage-gandalf so it's fine at least. 😹

Great work! I'll recommend using ESlint + Prettier to tidy up all of those indentations etc, and template $refs rather than querySelectors to make it even more pefrect. 💯

Collapse
the_one profile image
Roland Doda

Awesome job! I did something similar more advanced though. I solved TrustPilot challenge of a maze.

Since the game was boring though, I added a betting-like functionality and a challenge for developers to hack the APP -> github.com/Rolanddoda/pony-challenge

Collapse
arjenpostma profile image
Arjen Postma

Great job! Small issue: If you move your mouse from start real quick to finish it says you won, even though you went through the wall. (I guess the duck just flew over)

Collapse
bukunmikuti profile image
Bukunmi Ransome-kuti

Yeah this happens on mobile also
Clicking start and immediately clicking finish will make an easy win.

Would be nice if the game implemented swipe gestures for mobile 😄
Great work still

Collapse
_mikeusa profile image
Mike

Likewise, if you go to start, pull back down to go off-maze and then come back on at finish, it'll say you've won.

Collapse
alesbe profile image
alesbe

Using grid for this was so convenient! Also, if you start the maze, and instead of continuing, yo go outside and then, enter through the finish it counts it as a win, maybe changing MazeGame.started to false every time the cursor hovers outside the maze can fix it!

Collapse
natescode profile image
Nathan Hedglin

Great job! Creative game idea.

Collapse
bias profile image
Tobias Nickel

this is a cute idea

Collapse
nuclearzzet profile image
Nik

Keep it up

Collapse
andrewbaisden profile image
Andrew Baisden

So cool!

Collapse
walterwf profile image
Walter

Great game and congrats., but there is a way to close the Gandalf Cage picture?

Collapse
drwrongmo profile image
Jon Wright

What challenges did you find that you didn't expect?

Collapse
mattstuddert profile image
Matt Studdert

Love it! Nice work, Lou! 🙌

Collapse
jacksonkasi profile image
Jackson Kasi

Great 🤞

Collapse
m9hmood profile image
Mahmood Abbas

Nice idea, I would love to see something like random maze on each time I lose

Collapse
peterpark88 profile image
PeterPark88

Great work, keeping..

Collapse
justinmaker profile image
Justinmaker

Congratulations, this is a lot of progress.

Collapse
rehanjvd profile image
Rehan javed

Very nice loved it.

Collapse
judeson_joby profile image
JUDESON JOBY

Nice game

Collapse
irvinmx profile image
Irvin-Mx

Amazing!

Collapse
andrerodrigues profile image
andrerodrigues • Edited on

I too created a game. Code:
gitlab.com/andrerodrigues1/projeto-nave

Collapse
jovi profile image
João Victor (Jovi)

Nice 😁😁