Uploaded January 2023 | Updated September 2026, 2 weeks ago
We use what we learned in this course to make a final project: An interactive snowman that follows the mouse with its eyes, has text and images on its body and plays a song when pressing a key on the keyboard.
We use what we learned in this course to make a final project: An interactive snowman that follows the mouse with its eyes, has text and images on its body and plays a song when pressing a key on the keyboard.
![A Virtual World - JavaScript Course: Final Lesson [Coding a MiniMap with JavaScript]](https://i.ytimg.com/vi/ecZRuuLjGQA/mqdefault.jpg "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, youll 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. Lets learn to code one using JavaScript and HTML Canvas. 🗺️
Have Fun! :-)
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
10. OpenStreetMap = follow along
11. MiniMap = code after this lesson
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐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")
