AI Racing Game in JavaScript [Understanding AI - Lesson 8 / 15]

PLAYLIST: • Self-driving Car :: Ph...
Welcome to Lesson 8 of the "Understanding AI" course, where I'll guide you through the process of transforming a self-driving car simulation into an exhilarating racing game using JavaScript! In this tutorial, I'll show you how to take control of the main car while letting AI handle the others. We'll implement crucial features like a countdown timer, progress monitoring, and a scoreboard for a complete gaming experience.
In our racing game, I've made a deliberate choice to exclude collisions between cars, ensuring a fair and competitive environment. After all, who wants their AI-controlled car to be unexpectedly smashed by others on race day?
Now, fire up your JavaScript editors, as it's time to dive into the world of racing game development! Join me as we code the non-collision racing experience you've been eagerly waiting for. Let the race begin, and don't forget to like, share, and subscribe for more lessons on AI and game development in JavaScript!
💻CODE💻
github.com/gniziemazity/under...
Follow Along: 3. Dijkstra Part 2
Code After This Lesson: 4. Racing Game
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: • Self-driving Car :: Ph...
Trackmania Video: • Training an unbeatable...
#RacingGame #RacingGameJavaScript #UnderstandingAI #LearnJavaScript
⭐TIMESTAMPS⭐
00:00 Introduction
01:36 Racing Game Interface
11:20 Measuring the Progress
25:02 Showing the Stats
41:04 Fine-tuning
45:11 Start Counter
51:20 Extending the Road at the End

[@juritronics]

I like the way you show how powerful javascript is... Keep up the good work. From Zimbabwe.🔥🔥🔥🔥🔥🔥

[@Radu]

Thanks :-) I'll try!

[@smnomad9276]

I am so blessed to have found your channel! You have literally the best AI programming content on KZbin, no one comes close to you! You deserve at least 500k followers! Keep up the awesome work🔥🔥

[@Radu]

Thanks for watching :-)

[@charlesukanga4835]

🎉radu is definitely the god of JavaScript

[@Radu]

I doubt :-D

[@pizdaxyu]

that was some setTimeout callback maze, my AI over-the-shoulder was fuming

[@Radu]

Haha, yeah... Not sure why I did that... I mean, if the countdown would have been from 10, I'm sure I would have used setInterval instead and clearInterval when reaching zero. But this was... maybe, at the limit of how deep I accept my 'callback hell' to be :-))

[@cazpfitl]

GREAT, Thank you professor. 😃

[@Radu]

You're welcome! :-)

[@javifontalva7752]

This is just amazing!!!

[@Radu]

Thanks :-) it was really fun coding it!

[@autozone5335]

Awesome !

[@Radu]

Thanks!

[@2difficult2do]

Thanks Radu, this is really interesting and usefull ☝️😼👍

[@Radu]

Happy to hear :-)

[@adilsonbuset738]

Merci, Radu.

[@Radu]

No problem :-)

[@StephanGiga99]

Did I miss something or you didn’t implement the behavior that the car should have with traffic lights, stop markings, other cars, etc? Are you going to do it in the next videos or will you skip that part? Because I think it was pretty cool

[@Radu]

You didn't miss anything. I did teach the stop, and traffic lights in lesson 4, but using the playground. I also mentioned then that the logic for cars is the same as the traffic lights but with a sensor looking for cars in front and to the right. I also explained at the end of lesson 5 how to load a car from the playground and how to update it and the neural network to work with the speed as an extra sensor to apply the right-hand-rule. And from now on will stick with that one and focus on adding features to the racing game. Initially I had some lesson showing how to implement the behavior you describe, but decided to cancel it because I wanted to move to the racing scenario where those rules are not needed, so it would affect the flow of the course. I also think the techniques I've been teaching so far should make it possible for you to implement that behavior yourselves. But... you're not the only one asking this, so, one day I may make a live stream or short lesson where I teach how to do it (it would be about 15 minutes, I think).

[@AZHARakaGoat]

Hey Sir I'm back after a long time I havent watched your videos for almost 6 months But I have a question For eg i have an array of points like this [[3,4],[4,8]....] These are actually x and y points of racing track which has a radius Amd I have a car so I want just little code to achieve the pathfinding like the car stops and avoid collisions with road Plz help me

[@Radu]

You're describing very much the virtual world we created in phase 2 of the course. Maybe the 'integration' lesson from that playlist can help you out?

[@AZHARakaGoat]

@@RaduThanks Sir i have now downloaded tge playlist I will watch tomorrow if i have some question I will ask

[@ChandrashekarCN]

💖💖💖💖

[@Radu]

❤️

[@javifontalva7752]

any idea why I can't see the target onrace.html or sim.html but I do on index.html (I don't get any error and I passed target.js and targetEditor.js

[@Radu]

Not really... because the world object and its draw method are the same... Just a guess, maybe you load a world that contains a target in index.html, but the world you load in race.html and sim.html doesn't actually contain a target?

[@javifontalva7752]

@@Radu it does contain a target since I console.log world.markings and I see Start and Target and I get the corridor. It is so weird but... I'm just going to leave it like that.

[@Radu]

If you could share your entire codebase somehow (like on Discord or send a github link) I can have a look.

[@andresgardiol8111]

First comment!

[@Radu]

:-) yes indeed!

[@javifontalva7752]

I'd like to share my change in the method update in minimap to draw the cars on the map. .... // Draw cars' positions this.ctx.restore(); this.ctx.arc(this.size / 2, this.size / 2, 150, 0, Math.PI * 2); this.ctx.strokeStyle = "transparent"; this.ctx.clip(); for (const car of cars) { const carPosition = car.getPosition(); const scaledCarX = (carPosition.x - viewPoint.x) * scaler + this.size / 2; const scaledCarY = (carPosition.y - viewPoint.y) * scaler + this.size / 2; this.ctx.fillStyle = car.color; this.ctx.beginPath(); this.ctx.arc(scaledCarX, scaledCarY, 6, 0, Math.PI * 2); this.ctx.fill(); if (car.type === "KEYS") { this.point.draw(this.ctx, { color: car.color, fill: true, dash: [3, 3], time, }); } I hope you like it (you need to pass cars in the minimap.update as a parameter

[@Radu]

Hi, I couldn't test because looks like you've added some more things, like a 'getPosition' method to the car among other things. But I got the idea of what you did and I think it's nice :-)