Create Ludo Game in Vanilla JavaScript | JavaScript Project Tutorial

In this video we will create the Ludo game in Vanilla #Javascript completely from scratch without using any frameworks or libraries like Angular or React. A lot of people jump into frameworks too early when learning web development and miss out on understanding the core javascript parts.

If you want to improve your Vanilla JavaScript skills, then this is a perfect project to do plus it will be a great project for your resume!

📜 Sections
00:00 Intro
00:35 Setup
02:15 HTML & CSS
10:20 JavaScript
36:59 Completing Game flow

🧠 Concepts covered:
- ES6 classes to organize code
- OOP
- DOM Manipulation
- Event Bubbling

📚 Don't know the topics used in the video? Don't worry, I got you!

🧑🏻‍💻 Who am I:
JavaScript lover ❤️. I am a passionate Frontend Engineer and love making challenging web apps in Vanilla JavaScript (and of course tutorials) in a simple way so that it benefits someone who is learning web development.

❤️ Follow Me Here:

Hey!
This is my very first video on YouTube. If you enjoy the video, please consider subscribing (and like, comment & share)

If you have reached till here, then salute to you!
Please sabasscrribe.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
#javascriptprojects #javascript_tutorial
javascript web app tutorial, javascript project tutorial, advanced javascript project tutorial, advanced web app tutorial, game development in javascript, javascript app from scratch, advanced javascript projects with source code, cool javascript projects with source code, unique javascript projects with source code

[JavaScriptWithSohail]

Features you can add in this project:
- Save game data in local storage
- Add more cool styles
- What else?

[ExplorewithZac]

Oh man, my approach was totally different.
First I made a CSS grid.
Then I assigned each grid space a number.
Then I defined the player paths manually as an array of every single space (number) they land on.

My board is created using HTML and CSS so the fidelity is always great.
But overall your method is MUCH more practical and simple!
Thanks for the video, it's helped me see a completely different way to do this.

[secondpc-obqx]

wow one of the greatest video on vanila and dom manipulation javascript continue brother ❤

[prwt]

Great video. Learned a lot.

Btw, To make debugging easy and for better visualization purpose, you can insert the co-ordinates of each boxes directly into the UI

/* index.html */

<div class="ludo">
...

<div class="debug"></div>
</div>

/* style.css */

.debug .coordinate {
position: absolute;
pointer-events: none;
}

/* ui.js */

export default class UI {
...

static debug() {
const debugEl =
const fragment = new DocumentFragment();

for (const coordinate in COORDINATES_MAP) {
const el =

el.textContent = coordinate;

const [x, y] = COORDINATES_MAP[coordinate];
el.style.top = y * STEP_LENGTH + "%";
el.style.left = x * STEP_LENGTH + "%";

fragment.appendChild(el);
}


}
}

/* ludo.js */

export default class Ludo {
constructor() {
...
UI.debug();
}
}

[PranjalNiroula-ht]

wow cant stop my mouse to click subscribe thanks bro you helped me a lot hoping more for your great content😍

[vasukalluru]

You got an another Subscriber and Student 🤩, Great work bro ✌🔥

[naijagamingseries]

Thanks so much💓
I just subscribed boss, I love it

[DanielSacramento]

Great video Sohail! You could do a Darkest Dungeon Fight clone with some AI. Please continue mading videos. You are the best!

[MOUSE_MUSIC_LOFI]

hey buddy you have very good idea . keep it up

[bhavanalingam]

I am not able run this project.. when I run the project in chrome, no number is displaying when I roll the dice...please anyone help me with this problem.

[user.isUnknown]

This is very nice project and tutorial was easy to follow along,
i had a question how can we create a game like carrom or pool game in vanilla js without using frameworks, can u do a tutorial for that?

[ReaganImongo]

Le lien où télécharger le background image