Uploaded May 2025 | Updated September 2026, 2 weeks ago
Results from the challenge I gave in this tutorial: youtu.be/pY56OxewRjI
All entries can be found on my Discord server: discord.gg/gJFcF5XVn9
⭐OTHER LINKS⭐
Bad Apple: youtube.com/watch?v=FtutLA63Cp8
Inspiration by @elmusfire : youtube.com/watch?v=waF0LQ5S0BU
Color channel variant: youtu.be/L8oiOvD8vDQ
⚡️Join this Channel⚡️
youtube.com/@Radu/join
☕Buy me a Coffee?☕
buymeacoffee.com/radum
Results from the challenge I gave in this tutorial: youtu.be/pY56OxewRjI
All entries can be found on my Discord server: discord.gg/gJFcF5XVn9
⭐OTHER LINKS⭐
Bad Apple: youtube.com/watch?v=FtutLA63Cp8
Inspiration by @elmusfire : youtube.com/watch?v=waF0LQ5S0BU
Color channel variant: youtu.be/L8oiOvD8vDQ
⚡️Join this Channel⚡️
youtube.com/@Radu/join
☕Buy me a Coffee?☕
buymeacoffee.com/radum
![A Virtual World - JavaScript Course: Lesson 7 / 11 [Road Marking Editor with JavaScript]](https://i.ytimg.com/vi/kS4zDKC7LLs/mqdefault.jpg "A Virtual World - JavaScript Course: Lesson 7 / 11 [Road Marking Editor with JavaScript]
Welcome to the course where we build a self-driving car simulation in a virtual world using HTML, CSS and JavaScript. Now, its time to introduce road markings to enforce traffic rules. These rules are not just about creating realistic road behavior; they are the key to unlocking the full potential of phase 3, where we dive into more advanced AI techniques.
Given that our world remains predominantly 2D, well implement these rules as markings on the road. These markings will snap to the road and always maintain the correct orientation. The philosophy is simple: users should have to do as little as possible to create something nice. This user-centric approach is a guiding principle in all UI development.
Have Fun! :-) 🚗🛣️
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
6. Fake3D = follow along
7. Markings = code after this lesson (including the part for channel members)
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐Emojis I used in the video⭐
🌐🛑🚶🚙🅿️🚦⚠️🎯
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00:00 Introduction
00:01:09 Preparing for 2 Editors
00:08:44 Bind in JavaScript
00:14:53 Implementing the Stop Editor
00:40:10 Implementing the Crossing Editor
00:48:51 Refactoring using Inheritance
01:01:13 Implementing the Start Editor
01:04:26 Four more Markings")
