CSS Microproject Report On Ludo Game 1
CSS Microproject Report On Ludo Game 1
DHANGAWADI
Tal-Bhor ,Dist-Pune 412206(Maharashtra) India.
Is submitted by
Prof.”Wankhede.S.M.”
I Am personally indebted to a number of people who gave me their useful insights to aid
in my overall progress for this project. A complete acknowledgement would therefore be
encyclopedic. First of all, I would like to give my deepest gratitude to my parents for permitting
me to take up this course. My heartfelt sense of gratitude goes to our respected Principal Prof.
Khopade D.K
For all his efforts and administration in educating us in his premiere institution. I take this
opportunity to also thank our Head of the Department, Prof.Khutwad.S.S. for her encouragement
throughout the seminar. I would like to express my sincere thanks and gratitude tomy guide Prof.
Wankhede.S.S for her commendable support and encouragement for the completion of Project
with perfection. I also convey my sincere thanks to Prof Khutwad. S.S. forhis invaluable
suggestions and for his technical support rendered during the course of my project. I would like
to thank all faculty members and staff of the Department of Computer Engineering for their
generous help in various ways for the guidance of this project.
Creating a Ludo Board Design using advanced Java involves implementing graphical user
interface (GUI) components and utilizing advanced Java libraries. In such a project, you'd
typically use classes and methods from libraries like JavaFX or Swing to design the graphical
interface for theOnline Voting System.
This project presents a simplified JavaScript implementation of the popular board game Ludo.
The game allows two players to roll dice and move their pieces around the board. The
implementation utilizes HTML for game board rendering, CSS for styling, and JavaScript for
game logic. The game features basic functionality, including player piece initialization, dice
rolling, and piece movement. Future enhancements include implementing game logic for
winning conditions, adding AI opponents, and incorporating multiplayer support.
*Keywords:* Ludo game, JavaScript, HTML, CSS, game development, board
game.
Ludo, also known as Parcheesi, is a popular board game of Indian origin, played between 2-4 players.
The game objective is to move all of one’s pieces (tokens) around the board, reaching the final
destination before opponents.
*Key Features:*
1. Classic Ludo gameplay with standard rules
2. Customizable board designs and themes
3. Multiplayer support (2-4 players) with online and offline modes
4. Single-player mode with AI opponents and varying difficulty levels
5. Roll-a-dice mechanism with random number generation
6. Token movement and capture logic
7. Score tracking and game statistics
8. Undo/Redo functionality
9. Game saving and loading
10. Social features: leaderboards, chat, and friend challenges
INTRODUCTION
Ludo is a computer program that imitates the manual method of Playing the ludo board
game. The motivation behind this project work is the need to strengthen the understanding of
processes and digital literacy and more specifically their reflective understanding of the video
games.
LUDO has two modules which are Player Module, and Game Module. First of
all, Player’s Module is that players are ones to roll the die and to click on the coins to move
them according to the number on the dice. The Game’s Module is the one that provides all
the features like the dice, coins, directions which are necessary to play the game.
EXISTING SYSTEM
In the existing system this game application is used only as a default game that is
either
Downloaded or the operating system will be given into use along with it.
➢ The basic Ludo is a board game that is in use from many years.
➢ The ludo game is well played along with other board games like chess.
➢ The player has to roll the die and move coin with his/her bare hand.
PROPOSED SYSTEM
The main goal of the proposed work is to improve the ludo game by adding the
necessary
Additional features and new technologies into the application. The most important
things that are
To be considered in this system are-
➢ This project provides the user all of the features that are needed to play the
game.
➢ The project uses images and required coding so that the user won’t find any
difficulty to Understand.
Functional Requirements
The Functional Requirements Specification gives the operations and activities that a
system must be able to perform. Functional requirements should include functions
performed by specific screens, outlines of work-flows performed by the system, and other
business or compliance requirements the system must meet. It also depends upon the type
of software, expected users and the type of system where the software is used
Non-Functional Requirements
criteria that can be used to judge the operation of a system, rather than specific behaviours.
They are contrasted with functional requirements that define specific behaviour or
functions. The non-functional requirements can be considered as quality attributes of a
system.
Performance.
EFFICIENCY REQUIREMENT
When a game like this ludo will be implemented player will easily access it without
having
any trouble.
RELIABILITY REQUIREMENT:
The system should accurately performs coin movements, dice rolling and killing .
USABILITY REQUIREMENT:
The system is designed for a user friendly environment so that the player can perform.
Source code:
<style type=”text/css”>
.green{
Background-color: #009900;
}
.red{
Background-color: #FF0000;
}
.blue{
Background-color: #66CCFF;
}
.yellow{
Background-color: #FFCC00;
}
.row{
Display: flex;
}
.board{
Width: fit-content;
Border: 10px solid #11262e;
Border-radius: 5px;
Margin: 10px auto;
}
.white-box{
Background-color: white;
Width: 150px;
Height: 150px;
Margin: 20% auto;
Border: 1px solid black;
}
.red-box{
Background-color: #FF0000;
Width: 250px;
Height: 250px;
Border: 1px solid black;
}
.green-box{
Background-color: #009900;
Width: 250px;
Height: 250px;
Border: 1px solid black;
}
.blue-box{
Background-color: #66CCFF;
Width: 250px;
Height: 250px;
Border:1px solid black;
}
.yellow-box{
Background-color: #FFCC00;
Width: 250px;
Height: 250px;
Border:1px solid #000;
}
.white-box .circle{
Border-radius: 50%;
Width: 40px;
Height: 40px;
Float: left;
Margin: 16px;
Border: 1px solid black;
}
.cell{
Width: 40px;
Height: 40px;
Border: 1px solid #000;
}
.destination{
Border-top: 63px solid #009900;
Border-left: 63px solid #FF0000;
Border-right: 63px solid #FFCC00;
Border-bottom: 63px solid #66CCFF;
}
</style>
<div class=”board”>
<div class=”row”>
<div class=”red-box”>
<div class=”white-box”>
<div class=”red circle”></div>
<div class=”red circle”></div>
<div class=”red circle”></div>
<div class=”red circle”></div>
</div>
</div>
<div class=”cell-container”>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
</div>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell green”></div>
<div class=”cell green”></div>
</div>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell green”></div>
<div class=”cell”></div>
</div>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell green”></div>
<div class=”cell”></div>
</div>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell green”></div>
<div class=”cell”></div>
</div>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell green”></div>
<div class=”cell”></div>
</div>
</div>
<div class=”green-box”>
<div class=”white-box”>
<div class=”green circle”></div>
<div class=”green circle”></div>
<div class=”green circle”></div>
<div class=”green circle”></div>
</div>
</div>
</div>
<div class=”row”>
<div class=”cell-container”>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell red”></div>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
</div>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell red”></div>
<div class=”cell red”></div>
<div class=”cell red”></div>
<div class=”cell red”></div>
<div class=”cell red”></div>
</div>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
</div>
</div>
<div class=”destination”></div>
<div class=”cell-container”>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
</div>
<div class=”row”>
<div class=”cell yellow”></div>
<div class=”cell yellow”></div>
<div class=”cell yellow”></div>
<div class=”cell yellow”></div>
<div class=”cell yellow”></div>
<div class=”cell”></div>
</div>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell yellow”></div>
<div class=”cell”></div>
</div>
</div>
</div>
<div class=”row”>
<div class=”blue-box”>
<div class=”white-box”>
<div class=”blue circle”></div>
<div class=”blue circle”></div>
<div class=”blue circle”></div>
<div class=”blue circle”></div>
</div>
</div>
<div class=”cell-container”>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell blue”></div>
<div class=”cell”></div>
</div>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell blue”></div>
<div class=”cell “></div>
</div>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell blue”></div>
<div class=”cell”></div>
</div>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell blue”></div>
<div class=”cell”></div>
</div>
<div class=”row”>
<div class=”cell blue”></div>
<div class=”cell blue”></div>
<div class=”cell”></div>
</div>
<div class=”row”>
<div class=”cell”></div>
<div class=”cell”></div>
<div class=”cell”></div>
</div>
</div>
<div class=”yellow-box”>
<div class=”white-box”>
<div class=”yellow circle”></div>
<div class=”yellow circle”></div>
<div class=”yellow circle”></div>
<div class=”yellow circle”></div>
</div>
</div>
</div>
</div>
Output of the Program:
CONCLUSION
This project is one of the basic GUI applications of the javascript programming .
This game can be played and enjoyed by all the people who are very much interested.
All the players whoever they are, will become much attracted to the game as long as they are
Playing it.
There will be no trouble playing the “ LUDO”
The Ludo board design project successfully achieved its objective of creating a
visually appealing and functional digital board game. The design incorporates
all the essential elements of a traditional Ludo board, including starting points,
pathways, safety zones, and home zones.
Key Achievements:
Final Thoughts:
The Ludo board design project demonstrates the potential for digital board
game development. By combining creativity, technical skills, and user-centric
design principles, we can create engaging and immersive gaming experiences.
This conclusion summarizes the key achievements, lessons learned, and future
directions for the Ludo board design project.
References
https://youtu.be/yzvg8Zi2h6g?si=v4efeWnaE8k7Qjjx