THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

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

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>

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%; }     





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/2DErOoG
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.


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/

5 comments:

  1. Hi,
    I 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

    ReplyDelete
  2. This 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

    ReplyDelete