0% found this document useful (0 votes)
218 views

CSS Microproject Report On Ludo Game 1

Css Microproject report on Ludo Board Design with easy code

Uploaded by

pratikshaghore9
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
218 views

CSS Microproject Report On Ludo Game 1

Css Microproject report on Ludo Board Design with easy code

Uploaded by

pratikshaghore9
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

RAJGAD DNYANPEETH TECHNICAL CAMPUS POLYTECHNIC

DHANGAWADI
Tal-Bhor ,Dist-Pune 412206(Maharashtra) India.

A MICRO PROJECT REPORT ON

“Ludo Board Design”

Is submitted by

Mrs. Ghore Pratiksha Ankush(2215320037)

Under the guidance of

Prof.”Wankhede.S.M.”

Topic Name – Ludo Board Design


In Partial fulfillment of Diploma in
T.Y COMPUTER ENGINEERING

Academic year (2024-25)


CERTIFICATE
This is certify that following student
Mrs. Ghore Pratiksha Ankush(2215320037)

Has Successfully submitted their Micro project Report On


“Ludo Board Design” During the academic year 2024-245in the partial
fulfillment towards the completion of micro project in T.Y Computer
Engineering Under MSBTE MUMBAI.

Project Guide Head of Department


Prof.Wankhede.S.M Prof. Khutwad.S.S
ACKNOWLEDGEMENT

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.

Mrs. Ghore PratikshaAnkush(2215320037)


ABSTRACT

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, also known as Parcheesi, is a popular board game


that originated in India. The game involves two to four players
rolling dice to move their pieces around the board, with the
objective of being the first to get all pieces to the “Home” or “Safety”
area.
Traditional board games have been a staple of entertainment
for centuries. However, with the advent of digital technology, there
has been a growing interest in developing digital versions of these
games. JavaScript, with its versatility and widespread adoption, has
become a popular choice for developing interactive web applications,
including games.
This project aims to create a digital version of the Ludo game
using JavaScript, HTML, and CSS. The primary motivation is to
demonstrate the capabilities of JavaScript in game development and
provide an engaging experience for players.
*Scope*
This project focuses on developing a basic Ludo game with
two-player functionality. Future enhancements will consider
additional features, such as AI opponents, multiplayer support, and
improved game login

Special areas of the ludo board are typically colored


Yellow,green,blue,red.Each player is given a color and possesses four
tokens(coins) Of one color in their game.

The board is normally square with a cross-shaped game track,


with each Arm of the cross consisting of three columns with six
squares per each column. The Middle column consists of five colored
squares which represent the player’s Respective home column.
A sixth colored square which is not on the home column
represents the Player’s starting square. At the center of the
board is a large finishing square often Composed of triangles
in the four colors atop the player’s home column thus
Literature Review
The development of digital board games has gained significant attention in recent
years. Researchers and developers have explored various aspects of game
development, including game engines, artificial intelligence, and user experience.
This literature review highlights the relevance of JavaScript game development, board
game digitization, and user experience research to the Ludo game implementation.

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.

This system is achieved by writing a computer program that allows players to


roll a dice randomly, take decisions and move the pawn based on the outcome of the dice
on a well-designed graphical interface. The design of the adequate gaming simulation
system helps and plays an important role supporting the organizational learning,
changing mental models, fostering alternative interpretation patterns of the reality.

It is also helpful in developing new communication and action patterns, and


reconstructing the sociotechnical aspects of people. Furthermore, any game involving
numbers can aid the children early mathematics development.

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.

➢ By using this design, I proposed a new application of ludo in system.

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 is proposed to create a game similar to board game.

➢ 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

-The dice must properly working.


-The coins must follow the right direction.
-The center of the board must be clearly visible.

Non-Functional Requirements

In systems engineering, a non-functional requirement is a requirement that specifies

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:

1. *Responsive Design*: The board adapts to various screen sizes, ensuring an


optimal user experience.
2. *Color Scheme*: A vibrant and contrasting color scheme distinguishes
between players and game elements.
3. *Intuitive Layout*: The design ensures easy navigation and understanding of
game rules.
4. *Interactive Elements*: Clickable starting points and pathways enable user
interaction.
5. *Scalability*: The design allows for easy addition of new features and game
modes.

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

You might also like