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/

49 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
    Replies
    1. Sure brother I can do it.I can successfully make your project .Mail me at ajay5689pal@gmail.com if you are interested

      Delete
  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
  3. Really 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

  4. Each 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.

    ReplyDelete
  5. Very well written coding for creating Ludo Game. Thanks for this beneficial post.

    ReplyDelete
  6. Thank 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.

    ReplyDelete
  7. i want images of dice
    how to gett them

    ReplyDelete
  8. 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

    ReplyDelete
  9. Thank 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

    ReplyDelete
  10. This website is my breathing in, real fantastic design and perfect content . branding agencies in san francisco

    ReplyDelete
  11. I believe you have remarked some very interesting details , thankyou for the post. branding agency san francisco

    ReplyDelete
  12. 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
  13. year ek domain he dilwa de ma bitchara garib student Hu...small page banana Hu ek bar test karma hai ke upload kaise kerta hai.....help...

    ReplyDelete
  14. Fake luso game, dont waste time here

    ReplyDelete
  15. They like to get things done with the individuals they like. They become weary of attempting to state the best thing, wear the correct dresses, hang with the correct group. Hell, they become weary of simply attempting to make sense of what the entirety of that is. They need some agreeable time with no large results -https://jenga-game.com/reviews/best-board-games-for-5-players/

    ReplyDelete
  16. Most of the time I don’t make comments on websites, but I'd like to say that this article really forced me to do so. Really nice post! سایت یلماس بت

    ReplyDelete
  17. I want 8 players Ludo game source code and synopsis

    ReplyDelete
  18. This is really a nice and informative, containing all information and also has a great impact on the new technology. Check it out here:dewiqq

    ReplyDelete
  19. We have sell some products of different custom boxes.it is very useful and very low price please visits this site thanks and please share this post with your friends. eggy

    ReplyDelete
  20. The table or potentially poker chips could be your greatest costs.bonus member baru 200% slot

    ReplyDelete
  21. This post is really nice and informative. The explanation given is really comprehensive and informative. Visit Here

    ReplyDelete
  22. There are several points that a game localization services does, nonetheless, their most significant task is to adjust the computer game that was when in Japanese, to English for you to delight in without needing to review captions throughout video game play.

    ReplyDelete
  23. I wanted to thank you for this excellent read!! I definitely loved every little bit of it. I have you bookmarked your site to check out the new stuff you post. word unscrambler

    ReplyDelete
  24. However, gambling as a fundamental component of sound, confident living that takes us past the daily schedule. situs dominoqq


    ReplyDelete
  25. Nice post. Thanks for sharing such a piece of worthy information.

    incor lake city

    ReplyDelete
  26. Fantastic article. I find something innovative in a bunch of sites each day. It will always be rousing to find out subject material out of different consultants plus understand a tad there. I’d choose to make use of a number of this post in my own , personal weblog if you ever don’t thought process. Natually I’ll offer a great attribution to the web-site. Thanks a ton pertaining to spreading. slot online indonesia

    ReplyDelete
  27. Thanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for. nha cai chau a

    ReplyDelete
  28. Hi there! Nice stuff, do keep me posted when you post again something like this! csgo smurfs accounts

    ReplyDelete
  29. Nice post! This is a very nice blog that I will definitively come back to more times this year! Thanks for informative post. 먹튀사이트

    ReplyDelete
  30. This is just the information I am finding everywhere. An obligation of appreciation is all together for your site, I essentially buy in your online diary. This is a tolerable blog.. 먹튀검증업체

    ReplyDelete
  31. Most game lovers have debated about subscribing to an online video game rental website. There are many, many benefits to online video game renting. Valorant Smurf Accounts

    ReplyDelete
  32. Looking to develop a mobile game? Just connected with BR Softech, we have ludo game development specialist which provides better graphics, advanced development technology, Colour, theme, Payment integration, chatbot AI, Machine learning integration etc. Ludo game development company has proficient and experienced ludo game developers who have expertise in their mobile game development fields.

    ReplyDelete
  33. Archipelago Learning Adalah Agen SBOBET situs khusus judi bola Online serta Daftar Sbobet juga Daftar Slot Online Terbesar Di Indonesia.

    ReplyDelete
  34. daftar slot online For fresh produce, and a general feast for the eyes, head to this small covered market a block west of the cathedral. Stalls, some of ...

    ReplyDelete
  35. A simple bookmarking tool that makes it easy to save, organize and share your favorite web pages. Access your bookmarks from any computer, phone or tablet. Listango works on all modern web browsers… Shop Health Insurance

    ReplyDelete
  36. Great post 조개모아! I am actually getting 무료성인야동ready to across this information 무료야동사이트, is very helpful my friend 한국야동. Also great blog here 실시간야동 with all of the valuable information you have 일본야동. Keep up the good work 성인사진 you are doing here 중국야동. 무료야동

    ReplyDelete
  37. Hi there mates, how is all, and what you would like to say concerning this
    article, in my view its truly awesome in favor of me.
    오피

    OMG~!!!!! into your huge blog for almost the last hour.|I think the admin of this website is really working a lot.|Thanks for posting this up on your blog.|I am surprised at how slow your article loaded on my lap top.|Thank you for writing these great website.|The shorter response is that I don't know very much about the subject, a longer answer is that I'm going to understand what I'm able to Thanks for this post. I found it to be very encouraging. I really learned a lot because of you.

    ReplyDelete
  38. Yes i am totally agreed with this article and i just want say that this article is very nice and very informative article.I will make sure to be reading your blog more. You made a good point but I can't help but wonder, what about the other side? !!!!!!Thanks https://thegameroof.com/where-can-you-get-cheap-boost-in-wow-shadowlands

    ReplyDelete