A Virtual World - JavaScript Course: Final Lesson [Coding a MiniMap with JavaScript]

Welcome to the course where we build a self-driving car simulation in a virtual world using HTML, CSS and JavaScript. This is the final video of Phase 2. In it, you'll learn to load the large world from the last lesson and implement a mini-map.

The mini-map really helps when the world we create is very big. Let's learn to code one using JavaScript and HTML Canvas. 🗺️

Have Fun! :-)

⭐PLAYLIST⭐

⭐FINAL APP⭐

💻CODE💻
10. OpenStreetMap = follow along
11. MiniMap = code after this lesson

⭐ALL PREREQUISITES⭐

☕Buy me a Coffee?☕

⚡️Join this Channel⚡️

⭐Timestamps⭐
00:00 Introduction
00:42 Including the Large World File
02:49 Preparing for the MiniMap
05:48 MiniMap Implementation
07:58 Scaling the MiniMap
11:00 Marking the MiniMap center
11:49 Outro

[axonile]

I watched the 11 vids and here is the main lesson : the most important is not the code and the math but what you actually want to do. Those are just tools to be wisely used .

[sunfaija]

Awesome project, thank you! Learned a lot about JS so far and looking forward to phase 3!

[JeremiKress]

I've started recommending your videos to my class. We absolutely love your enthusiasm for Computer Science 💜💜💜

[javifontalva]

Amazing 🎉. This is probably the project I have learnt the most (also the most difficult one by far). Thanks

[thespiritninja]

You're an absolute genius man, Thank you for this!

[pablovaldes]

love these projects man, ever since i stumbled upon creative coding i've enjoyed it so much more

[wagnerperin]

Mannn.... you're amazing!!! Will try to follow all videos... but for now... congrats from Brazil.

[difficultdo]

Thank you for this very interesting course. 12 out of 11 👍👍👍. That's impressive!

[javifontalva]

My goodness! This was probably the easiest past of the project! Great job! Actually I know when I start doing the minimap it won't be as easy as you make it look. Terrific vid!

[AdilsonBuset]

Muito obrigado, Mestre Radu! Concluí o projeto e foi no mínimo muito divertido.

[mahmoudtarek]

I have just finished phase 1 and 2. thank you for the unbelievable effort you put into this, it helped me a lot for educational purposes. I just want to ask you for another favor, the final run of phase 2 that you hosted on your site have more features and enhancements, I just need the code of it if that's possible. it will help me to understand some things I am really curious about it, thank you again, you really KILLED IT !😉

[AyorindeAdesugba]

This is wonderful content. Waiting for Phase 3

[Shalaby]

When are you going to start implementing Phase 3, man? By the way, this is an absolute masterpiece!

[himanshurai]

Thank you for making such projects for us . I learnt a lot from these videos of yours, but I wanna know How did you create your virtual world app? How did you add destination feature?

[陳聖文-nk]

These programs are so beautiful! I'm wondering, in the final version, if the buildings and landscapes inside have different styles. How are those customized? I want to use them in the maps I create during the course.

[inowatchvideos]

Will you be doing any viewport culling? It’s crazy how you can just draw all items and its performant. (I’m thinking of simondev latest video). (I’m still on part 4, but i took a sneak peak, the cheat!)

[hau]

Can you show me how to make a sensor like in Final App?

[karthikm.]

can we run bfs algorithm in this map to find distance between any two location?

[RandomBurfness]

The final app is bugged. The cars stop at the stop markings yes, but they never actually keep driving after that.

[lahcsinayrahca]

Still waiting for next phase bro... 🎉❤