Create a Ludo Game In JavaScript HTML and CSS with Source Code

Create a Ludo Game In JavaScript HTML and CSS with Source Code

Welcome, all we will see How to create Ludo Game in  JavaScript HTML & CSS from Scratch. Dice Game in Javascript.  It is a web implementation of Ludo. I have used simple HTML, CSS and Javascript and ECMAScript for developing this game. The layout is made using a div element with google fonts. 

Ludo Game in JavaScript


<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="" rel="stylesheet">

<div class="container">
<h1>JS LUDO</h1>

<div class="dice">
<p>Player 1</p>
<img src="images/dice1.png" id="check1">
<div class="dice">
<p>Player 1</p>
<img src="images/dice6.png" id="check2">

<button onclick="ludogame()"> Click ME</button>


 ludogame = () => { 
const play1 = Math.floor(Math.random() * 6) + 1; 
const play1dice = `images/dice${play1}.png`;
document.getElementById('check1').setAttribute('src', play1dice);

const play2 = Math.floor(Math.random() * 6) + 1; 
const play2dice = `images/dice${play2}.png`;
document.getElementById('check2').setAttribute('src', play2dice);

if(play1 > play2) 
{ document.querySelector('h1').innerHTML="Player 1 won :)";
} else if(play1 < play2) {
document.querySelector('h1').innerHTML="Player 2 won :)";
} else{ document.querySelector('h1').innerHTML="DRAW "; }


CSS coding Part

     margin:0; padding:0; 
     font-family: 'Acme', sans-serif;

body{ background-color: #0a3d62; }

.container{ width: 70%; margin: auto; text-align: center; }

.dice{ text-align:center; display: inline-block; }

    margin: 30px;
    text-shadow: 5px 5px white;
    font-size: 6rem;
    color: #f6b93b;

font-size: 2rem; color: #00b894; 
text-shadow: 1px 1px white;

padding:10px; background-color:#00b894; color: white;

img{ width: 75%; }     

Tools I used to record videos

1: Dell Inspiron 15 5570 2018 15.6-inch FHD Laptop (8th Gen Core i3-8130/4GB + 16GB Optane Memory/1TB/Windows 10):
2: Wright WR 800 Condenser Microphone with Free USB Sound Card:
3: Wright Wp 101 Pop Filter For Dynamic Condenser Microphone Voice Recording:  
4: AmazonBasics Ventilated Laptop Stand (Black):
5: Generic NB-35 Professional Recording Microphone Stand:
6: JBL T160 in-Ear Headphones with Mic (Black): 
7: AmazonBasics Braided HDMI Cable - 6-Feet: 

Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.

Don't Forget to Follow  me on all Social Network, 

Website Link:
Instagram Link:
Facebook Link:
Twitter       Link:

Facebook ThapaTechnical Page Link: