I built my first Maze JavaScript game
I used;
- Vue.Js framework,
- JavaScript,
- CSS
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;
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;
You only win by going passed start, if you try to go to the finish via another entry it tells you that's 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 😊
Top comments (20)
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
querySelector
s to make it even more pefrect. 💯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
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!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
this is a cute idea
Great game and congrats., but there is a way to close the Gandalf Cage picture?
Keep it up
So cool!
What challenges did you find that you didn't expect?
Great work, keeping..