Maze Generation Game using HTML CSS JavaScript - SIMPLE TUTORIAL
ฝัง
- เผยแพร่เมื่อ 28 ก.พ. 2023
- Maze Generation Game using HTML CSS JavaScript - DEPTH FIRST SEARCH TUTORIAL
Are you looking for a fun and engaging project to practice your HTML, CSS, and JavaScript skills? Look no further! In this simple tutorial, I'll guide you through the process of creating a Maze Generation Game using HTML, CSS, and JavaScript.
You'll learn how to set up the basic HTML structure and style it using CSS to create a visually appealing game interface. Then, we'll dive into the JavaScript code and use an algorithm called Depth-First Search to generate the maze.
By the end of this tutorial, you'll have a fully functional Maze Generation Game that you can customize and build upon further. Plus, you'll gain a better understanding of how HTML, CSS, and JavaScript work together to create dynamic web applications.
This tutorial is suitable for beginners and experienced programmers alike, so grab your computer and join me!
Source code: github.com/devression/Maze-Game
Tags:
maze generation javascript,javascript maze game,maze game html css javascript,javascript maze game project,javascript project,html css javascript project,maze game html css js,maze generation algorithm,maze generator js,maze generator javascript,javascript game tutorial,javascript game development,javascript game tutorial for beginners,javascript game project,javascript game dev,devression,html,css,javascript,javascript beginner,html css project
What project should I make next?
Your work is so motivational. You should make something with the front end tools such as React.js, Next.js, Vite.js, Solid.js etc..
Thank you for everything..
@@beingwhale I am learning React.js at the moment so that sounds like a good idea!
@@dev_ression yes it’s worth learning React. Keep going 🚀
any chance to make this game in 3d? like a first-person maze generator? move with arrows but try to find a pat without seeing the maze itself.
that whould be cool, you can even make it a game for mobile, sell it, maybe add ester eggs in mazes...
Can you try to make any type of airplane game
Thanks a lot for this straight forward demonstration!
In case anyone wondered what could be done if the lines in "hard" and "extreme" mode are blurring out because they are too thin...
In your script.js file at about line 226 (in the original github file) within the "function drawCell()" just add following line underneath the var y definition
ctx.lineWidth =3;
Have a nice day!
script line no. 492
at "this.bindKeyDown();"
where was it created?
its jumping up an error for me and if i fix it to "unbindKeyDown()"
it works, it even runs the log saying true and "Runs" but screen still emepty, and there is no error?
What should I adjust to make the maze a little wider? I'm planning on replacing the key with other things and I want it to fit right in the maze , thankyou in advance.
Hey I need help with the Images. How do I add the folder functionally?
I have a problem with the project, the project just stays at the text only, no maze is generated, if you could help, that would be awesome!
Thank you so much for your collaboration bro...
Maze not showing up for me but everything else working. Why is that I wonder?
is the function "genMap" in the function "maze" or not as I am not sure
Bro can you use different row and column value?
Does this work ok in Edge? I get the buttons, but the maze doesn't display. Thanks for the video, I'm enjoying the content and good choice of music!
this is so cool! I was wondering how can I add more images/goals for the person to collect?
U putting in work lately love it ! Im at your quiz .. need to finish that first 😄 keep up the great work bro ! And i like ur editing !
Thank you for the kind words, it means a lot!
Love the projects but as a beginner it's hard to follow because you jump straight to coding with music. Any chance you could upload a beginner tutorial where you explain the code and what you're doing and why etc? Would be really helpful for newbies
Sounds like a good idea, I’ll do that! Thanks for watching :)
WHAT AN INCREADIBLE TUTORIAL 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
Thanks for watching!
in hard/xtreeme i coudlnt see the lines proparly
is there any extension needed to be install?, the maze didn't appear on my browser only the button
No extensions necessary :)
i love this, i'm new to js and this is so cool!
glad this helped bro!
wth?
@@dev_ression
Hi owner of this maze game how can i fix error. I download it in your github i think it is restriction??
Wow, so wonderful
Thank you for watching!
Some things here might not work. For example, the default map is 10x10. If you select another level, it will render a new maze map, but the old one will be still there, or at least the key from the default map. So, when you move the key, the previous one will also move across the map. It took me a while to figure out, and at the end, you need the callback of the start button to loop over the map and set all values to false (default). After that, you can call makeMaze() function. After all, this is a great project to learn JS classes.
Yo nice tutorial ! I have a question. I am trying to learn JS and i saw many times people saying dont use var, and you used it a lot in this tutorial, can you tell me why?
For the purpose of this tutorial, var was used but in your bigger/more important projects, using the “let” keyword is much better practice! :)
How to do it using cursor, and if the cursor touches the maze the user have to restart from the beginning.
Great tutorial✨
Thank you so much!
Didnt work : Uncaught TypeError: Cannot read properties of null (reading 'getContext')
at script.js:496:24
wow great .....man
Thank you bro
how to running the code i cant running the code!
The javascript part did not work for me can anyone help?
also me
Sir can u please make a project based on N-queen or Dijkstra algorithm ❤️
Nahi
But you didn't tell us how to add image
thx
Thanks for watching
can u just teach why we are using this codes and more pls
Can you give me the source code of this
source code is in the description bro :)
please make a car game too. pleeeeeeeease
Devression
I agree with qwerty
maybe sudoko
please
make a snake game
I have made a Java snake game. There is a video on my channel :)
cooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooool
idk
yeah
0
that is so fast and faces objects and i am actually copying you so i could make a game like you iam subscribed i am your biggest fan but please make it slower so i could copy you
🥺🥺🥺🥺🥺🥺🥺🥺