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 |
Index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>JS LUDO</h1>
<div class="dice">
<p>Player 1</p>
<img src="images/dice1.png" id="check1">
</div>
<div class="dice">
<p>Player 1</p>
<img src="images/dice6.png" id="check2">
</div>
<div>
<button onclick="ludogame()"> Click ME</button>
</div>
</div>
<script>
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 "; }
}
</script>
</body>
</html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>JS LUDO</h1>
<div class="dice">
<p>Player 1</p>
<img src="images/dice1.png" id="check1">
</div>
<div class="dice">
<p>Player 1</p>
<img src="images/dice6.png" id="check2">
</div>
<div>
<button onclick="ludogame()"> Click ME</button>
</div>
</div>
<script>
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 "; }
}
</script>
</body>
</html>
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; }
h1{
margin: 30px;
text-shadow: 5px 5px white;
font-size: 6rem;
color: #f6b93b;
}
p{
font-size: 2rem; color: #00b894;
text-shadow: 1px 1px white;
}
button{
padding:10px; background-color:#00b894; color: white;
border:none;
}
img{ width: 75%; }
2: Wright WR 800 Condenser Microphone with Free USB Sound Card: https://amzn.to/2TjRUmc
3: Wright Wp 101 Pop Filter For Dynamic Condenser Microphone Voice Recording: https://amzn.to/2B67lro
4: AmazonBasics Ventilated Laptop Stand (Black): https://amzn.to/2DDs1Zd
5: Generic NB-35 Professional Recording Microphone Stand: https://amzn.to/2HBDbC1
6: JBL T160 in-Ear Headphones with Mic (Black): https://amzn.to/2HwbJp0
7: AmazonBasics Braided HDMI Cable - 6-Feet: https://amzn.to/2TkCTkc
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
Website Link: https://www.thapatechnical.com
Instagram Link: https://www.instagram.com/vinodthapa55
Facebook Link: https://www.facebook.com/vinodthapa55
Twitter Link: https://twitter.com/vb55thapa
Facebook ThapaTechnical Page Link: https://www.facebook.com/vinodbahadurthapa/
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; }
h1{
margin: 30px;
text-shadow: 5px 5px white;
font-size: 6rem;
color: #f6b93b;
}
p{
font-size: 2rem; color: #00b894;
text-shadow: 1px 1px white;
}
button{
padding:10px; background-color:#00b894; color: white;
border:none;
}
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): https://amzn.to/2DErOoG2: Wright WR 800 Condenser Microphone with Free USB Sound Card: https://amzn.to/2TjRUmc
3: Wright Wp 101 Pop Filter For Dynamic Condenser Microphone Voice Recording: https://amzn.to/2B67lro
4: AmazonBasics Ventilated Laptop Stand (Black): https://amzn.to/2DDs1Zd
5: Generic NB-35 Professional Recording Microphone Stand: https://amzn.to/2HBDbC1
6: JBL T160 in-Ear Headphones with Mic (Black): https://amzn.to/2HwbJp0
7: AmazonBasics Braided HDMI Cable - 6-Feet: https://amzn.to/2TkCTkc
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: https://www.thapatechnical.com
Instagram Link: https://www.instagram.com/vinodthapa55
Facebook Link: https://www.facebook.com/vinodthapa55
Twitter Link: https://twitter.com/vb55thapa
Facebook ThapaTechnical Page Link: https://www.facebook.com/vinodbahadurthapa/
sir image nahi mil rahi
ReplyDeleteSir image ni aa rhe hai
ReplyDeleteHi,
ReplyDeleteI need ludo hame developed in html and css it should be working very smooth and can be play using website .
Let me know if you can do it :add me on whatsapp for more discussion : +919111803533
Lets decide price
Sure brother I can do it.I can successfully make your project .Mail me at ajay5689pal@gmail.com if you are interested
DeleteThis article is an appealing wealth of informative data that is interesting and well-written. This is exceptionally instructive substance and composed well for a change. It's pleasant to see that a few individuals still see how to compose a quality post! Currently, online casinos can be considered the right place where one can easily train yourself in their favourite games. It is the only place where one can improve their gambling skills slightly than playing. 188loto
ReplyDeletephoto send
ReplyDeleteReally awesome and inspiring post. Best thing about your blog is you share things in clear and transparent manner. Very informative blog and Thanks for sharing usefull content. Everybody knows that there are no guarantees in winning the lottery. It is all a game of chance. mơ thấy ma nữ đánh con gì
ReplyDelete
ReplyDeleteEach time you discharge a token with a 'SIX' demonstrates that each new section of your life begins perfectly.e.g.the day you were conceived,apk mod got hitched or found another line of work, yet the excursion thereof is so eccentric.
Very well written coding for creating Ludo Game. Thanks for this beneficial post.
ReplyDeleteThank you for sharing, But since I was recommended by a friend to the site: https://gameschurch.com/, the site to share free Mod Apk games. I like so much.
ReplyDeletei want images of dice
ReplyDeletehow to gett them
Whoah this blog is magnificent i really like reading your articles. Keep up the good paintings! You realize, a lot of persons are searching round for this information, you could aid them greatly. website designers nyc
ReplyDeleteThank you so much for giving my family an update on this issue on your web-site. Please realise that if a brand new post appears or if perhaps any adjustments occur to the current post, I would be interested in reading a lot more and focusing on how to make good use of those strategies you reveal. Thanks for your efforts and consideration of other people by making this web site available. new york web designs
ReplyDeleteThis website is my breathing in, real fantastic design and perfect content . branding agencies in san francisco
ReplyDeleteI believe you have remarked some very interesting details , thankyou for the post. branding agency san francisco
ReplyDeletethapa sir where is image ?/
ReplyDeletereview
ReplyDeletevideo game
video game consoles
video game news
video game reviews
review
video game
video game consoles
video game news
video game reviews
review
video game
video game consoles
video game news
video game reviews
review
video game
video game consoles
video game news
video game reviews
review
video game
video game consoles
video game news
video game reviews
review
video game
video game consoles
video game news
video game reviews
Hi there, I found your blog via Google while searching for such kinda informative post and your post looks very interesting for me. Ludo King Mod
ReplyDelete