Тёмный

Maze Generation Game using HTML CSS JavaScript - SIMPLE TUTORIAL 

Devression
Подписаться 9 тыс.
Просмотров 27 тыс.
50% 1

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

Опубликовано:

 

28 фев 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 60   
@dev_ression
@dev_ression Год назад
What project should I make next?
@beingwhale
@beingwhale Год назад
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..
@dev_ression
@dev_ression Год назад
@@beingwhale I am learning React.js at the moment so that sounds like a good idea!
@beingwhale
@beingwhale Год назад
@@dev_ression yes it’s worth learning React. Keep going 🚀
@earthssatisfaction6878
@earthssatisfaction6878 Год назад
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...
@shahzadsatti4016
@shahzadsatti4016 9 месяцев назад
Can you try to make any type of airplane game
@thomaskuhn7143
@thomaskuhn7143 Год назад
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!
@sharikshahfans
@sharikshahfans 7 месяцев назад
Bro can you use different row and column value?
@vigneshwarvenugopal922
@vigneshwarvenugopal922 9 месяцев назад
Thank you so much for your collaboration bro...
@djamelbgd301
@djamelbgd301 5 месяцев назад
WHAT AN INCREADIBLE TUTORIAL 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
@dev_ression
@dev_ression 5 месяцев назад
Thanks for watching!
@FlowsenFresh
@FlowsenFresh Год назад
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 !
@dev_ression
@dev_ression Год назад
Thank you for the kind words, it means a lot!
@crafty_tams
@crafty_tams Год назад
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!
@hemamuni3857
@hemamuni3857 11 месяцев назад
this is so cool! I was wondering how can I add more images/goals for the person to collect?
@shaib3331
@shaib3331 Год назад
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?
@watchuganado
@watchuganado 2 месяца назад
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.
@MetalX-zt2ws
@MetalX-zt2ws 6 месяцев назад
Hey I need help with the Images. How do I add the folder functionally?
@MidoBroski
@MidoBroski Год назад
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
@dev_ression
@dev_ression Год назад
Sounds like a good idea, I’ll do that! Thanks for watching :)
@marv4581
@marv4581 Год назад
i love this, i'm new to js and this is so cool!
@dev_ression
@dev_ression Год назад
glad this helped bro!
@Deaddevil346
@Deaddevil346 3 месяца назад
wth? @@dev_ression
@ravidahmed8866
@ravidahmed8866 10 месяцев назад
is the function "genMap" in the function "maze" or not as I am not sure
@nemanja7289
@nemanja7289 6 месяцев назад
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.
@hoangvangantv
@hoangvangantv 7 месяцев назад
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!
@ibrahimoztekin5697
@ibrahimoztekin5697 Год назад
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?
@dev_ression
@dev_ression Год назад
For the purpose of this tutorial, var was used but in your bigger/more important projects, using the “let” keyword is much better practice! :)
@techieandrew31
@techieandrew31 Год назад
Great tutorial✨
@dev_ression
@dev_ression Год назад
Thank you so much!
@seaskimmer
@seaskimmer 10 месяцев назад
Maze not showing up for me but everything else working. Why is that I wonder?
@CodeAtUsman
@CodeAtUsman Год назад
wow great .....man
@dev_ression
@dev_ression Год назад
Thank you bro
@Deaddevil346
@Deaddevil346 4 месяца назад
in hard/xtreeme i coudlnt see the lines proparly
@youtubejeff3315
@youtubejeff3315 8 месяцев назад
The javascript part did not work for me can anyone help?
@Haechiemita
@Haechiemita 7 месяцев назад
also me
@sumandutta944
@sumandutta944 Год назад
Sir can u please make a project based on N-queen or Dijkstra algorithm ❤️
@scripter7676
@scripter7676 Год назад
Nahi
@user-dl8eg4yo8d
@user-dl8eg4yo8d 5 месяцев назад
is there any extension needed to be install?, the maze didn't appear on my browser only the button
@dev_ression
@dev_ression 5 месяцев назад
No extensions necessary :)
@omniaabdalaziz7917
@omniaabdalaziz7917 2 месяца назад
please make a car game too. pleeeeeeeease Devression
@programingbisdak
@programingbisdak Месяц назад
Hi owner of this maze game how can i fix error. I download it in your github i think it is restriction??
@kasihafrilia2229
@kasihafrilia2229 26 дней назад
how to running the code i cant running the code!
@PlumpPenguin
@PlumpPenguin 2 месяца назад
Didnt work : Uncaught TypeError: Cannot read properties of null (reading 'getContext') at script.js:496:24
@AnimatedLyrics-Songs
@AnimatedLyrics-Songs 10 месяцев назад
thx
@dev_ression
@dev_ression 10 месяцев назад
Thanks for watching
@HaiderPlaysOfficial.333
@HaiderPlaysOfficial.333 Год назад
But you didn't tell us how to add image
@mattexs-de9rr
@mattexs-de9rr 5 месяцев назад
can u just teach why we are using this codes and more pls
@omniaabdalaziz7917
@omniaabdalaziz7917 2 месяца назад
maybe sudoko please
@abdullahsalik
@abdullahsalik 11 месяцев назад
Can you give me the source code of this
@dev_ression
@dev_ression 11 месяцев назад
source code is in the description bro :)
@omniaabdalaziz7917
@omniaabdalaziz7917 2 месяца назад
make a snake game
@dev_ression
@dev_ression 2 месяца назад
I have made a Java snake game. There is a video on my channel :)
@lexusluxurious3803
@lexusluxurious3803 2 месяца назад
yeah 0
@devil12144
@devil12144 6 месяцев назад
idk
@user-bd6rv5up2t
@user-bd6rv5up2t 9 месяцев назад
cooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooool
@omniaabdalaziz7917
@omniaabdalaziz7917 2 месяца назад
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 🥺🥺🥺🥺🥺🥺🥺🥺
Далее
Build this JS calculator in 15 minutes! 🖩
15:20
Просмотров 324 тыс.
Lens Removal Hack
00:32
Просмотров 2,7 млн
Блэк Кити в Биг Сити  😼
12:13
Просмотров 857 тыс.
JavaScript Tetris
1:14:37
Просмотров 57 тыс.
Create Flappy Bird clone in Javascript HTML CSS
48:59
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 881 тыс.
The Easiest Javascript Game Ever
8:34
Просмотров 946 тыс.
Programming Mazes
27:11
Просмотров 188 тыс.
♟️ Code CHESS in JavaScript (Super simple!)
1:28:06
Просмотров 126 тыс.
Simple Maze Generation | Scratch Tutorial
25:29
Просмотров 1,1 млн
HTML5 Canvas API Crash Course
53:56
Просмотров 187 тыс.
12 VS Code Extensions to INCREASE Productivity 2024
27:13