Dice game using HTML and Java script

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script

1. INTRODUCTION

Ever since Dungeons & Dragons was published in 1974, randomization has, with a
few exceptions, been a part of role playing games. Randomization has been used for
creating characters, determining if actions are successful, determining the amount of
damage dealt by a weapon, determining encounters (“wandering monsters”, etc.) and
so on. We will look mainly at randomizers for action resolution – the act of
determining how successful an attempted action is. The reason for this is that this is in
many ways the most critical part of an RPG and the part that is hardest to get right.
Dice of various types are the most common randomizers in role-playing games, and
D&D was indeed known for introducing non-cubic dice into modern games, but a few
games (such as Castle Falkenstein and the Saga system) use cards as randomizers, and
some “diceless” games, like Amber, use no randomizers at all, apart from the inherent
unpredictability of human behaviour. We will focus on dice in this article, but briefly
touch on other randomizers. We start by discussing some aspects of action resolution
that it might be helpful to analyse when choosing a dice-roll mechanism, then a short
introduction to probability theory followed by an analysis of some existing and new
dice-roll mechanisms. Roll Dice Game project is a web application which is
developed in WEB platform. Dice (singular die or dice) are small, throwable objects
with marked sides that can rest in multiple positions. They are used for generating
random numbers, commonly as part of tabletop games, including dice games, board
games, role-playing games, and games of chance.A traditional die is a cube with each
of its six faces marked with a different number of dots (pips) from one to six. When
thrown or rolled, the die comes to rest showing a random integer from one to six on its
upper surface, with each value being equally likely. Dice may also have polyhedral or
irregular shapes and may have faces marked with numerals or symbols instead of pips.
Loaded dice are designed to favor some results over others for cheating or
entertainment. Dice have been used since before recorded history, and it is uncertain
where they originated. It is theorized that dice developed from the practice of fortune-
telling with the talus of hoofed animals, colloquially known as knucklebones. The
Egyptian game of senet was played with flat two-sided throwsticks which indicated
the number of squares a player could move, and thus functioned as a form of dice.
Senet was played before 3000 BC and up to the 2nd century AD. Perhaps the oldest
known dice were excavated as part of a backgammon-like game set at the Burnt City,
an archeological site in south-eastern Iran, estimated to be from between 2800 and
2500 BC. Bone dice from Skara Brae have been dated to 3100–2400 BC. Excavations
from graves at Mohenjo-daro, an Indus Valley civilization settlement, unearthed
terracotta dice dating to 2500–1900 BC. Games involving dice are mentioned in the
ancient Indian Rigveda, Atharvaveda, Mahabharata and Buddhist games list. There are
several biblical references to "casting lots" (Hebrew: yappîlū ḡōrāl), as in Psalm 22,
indicating that dicing (or a related activity) was commonplace when the psalm was
composed. Knucklebones was a game of skill played in ancient Greece; a derivative
form had the four sides of bones receive different values like modern dice. Twenty-
sided serpentinite die from Ptolemaic Egypt.Although gambling was illegal, many
Romans were passionate gamblers who enjoyed dicing, which was known as aleam
ludere ("to play at dice"). There were two sizes of Roman dice. Tali were large dice
inscribed with one, three, four, and six on four sides. Tesserae were smaller dice with

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script
sides numbered from one to six. Twenty-sided dice date back to the 2nd century AD
and from Ptolemaic Egypt as early as the 2nd century BC. Dominoes and playing
cards originated in China as developments from dice. The transition from dice to
playing cards occurred in China around the Tang dynasty, and coincides with the
technological transition from rolls of manuscripts to block printed books. In Japan,
dice were used to play a popular game called sugoroku. There are two types of
sugoroku. Ban sugoroku is similar to backgammon and dates to the Heian period,
while e-sugoroku is a racing game. Dice are thrown onto a surface either from the
hand or from a container designed for this (such as a cup or tray). The face of the die
that is uppermost when it comes to rest provides the value of the throw. The result of a
die roll is determined by the way it is thrown, according to the laws of classical
mechanics. A die roll is made random by uncertainty in minor factors such as tiny
movements in the thrower's hand; they are thus a crude form of hardware random
number generator. One typical contemporary dice game is craps, where two dice are
thrown simultaneously and wagers are made on the total value of the two dice. Dice
are frequently used to introduce randomness into board games, where they are often
used to decide the distance through which a piece will move along the board (as in
backgammon and Monopoly).

1.1 MOTIVATION
Embrace the thrill of chance and strategy with our cutting-edge web-based dice
game! In a world where luck meets skill, every roll of the dice is a new opportunity
to outsmart your opponents and claim victory. Picture yourself in a virtual arena,
where the clatter of dice echoes through the digital realm, and each click brings you
closer to an unforgettable gaming experience. With a seamless user interface and
intuitive controls, our web application ensures that you're fully immersed in the
excitement from the moment you start playing. Whether you're a seasoned dice
master or a newcomer to the world of games of chance, this platform offers endless
entertainment, where every roll is a potential turning point in your journey to
triumph.
As you navigate through the virtual landscape, you'll quickly realize that success in
this dice game is not solely reliant on luck, but also on your ability to make strategic
decisions. Each roll is a crossroads, a chance to weigh risks and rewards, and a test of
your adaptability and foresight. With every passing moment, the game unfolds in
new and unexpected ways, offering an exhilarating experience that keeps you on the
edge of your seat. Whether you're aiming to conquer the leaderboard or simply
seeking an enjoyable pastime, our web application brings the excitement of dice
games right to your fingertips, offering a dynamic and engaging platform that's sure
to leave you coming back for more. So, roll the dice and let the adventure begin!

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script
1.2 PROBLEM STATEMENT

1.3 OBJECTIVE

 Entertainment and Engagement: The primary purpose is to provide users with

an enjoyable and engaging gaming experience. A dice game can be a source
of entertainment and a way to pass the time.
 Skill Development: Depending on the complexity of the game, it can serve as
a platform for users to develop and enhance skills such as strategic thinking,
probability assessment, and decision-making.
 Learning Tool: For educational purposes, a dice game can be designed to
teach concepts related to probability theory, mathematics, or even history (if
the game is set in a particular era or context).
 Social Interaction and Competition: Multiplayer features can be incorporated
to encourage social interaction and healthy competition among users. This
fosters a sense of community and camaraderie.
 Testing and Demonstrating Web Development Skills: Building a web
application for a dice game provides an excellent platform for developers to
hone their skills in web development, including frontend and backend
technologies, database management, and user interface design.
 Demonstrating Technical Proficiency: This project can serve as a portfolio
piece, showcasing the developer's ability to create a functional and user-
friendly web application, which can be particularly useful for those seeking
careers in web development.

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script
1.4 EXISTING SYSTEM

Java script is used in this game.This JavaScript code contains the functionality of
Dice Game. The first functionality is to rename the player name after clicking the
button. Another functionality is to roll the dice after clicking the button. After rolling
the dice by both the player, anyone player will win who get the highest phase value.
If both players get the same phase value then the game will draw.HTML(Hyper Text
MarkUp Language).HTML is the markup language that displays your content in the
web browser. CSS(Cascading Style Sheets).CSS is used for creating some excess

styles to the project.CSS is used to format and style your HTML elements. You can
style all of a particular element or you can create a class.Css styles include not only
colors format, it also gives changes for Font style, background color,
Margins,Borders etc .Css formats HTML: color, size, shape, font etc.

1.5 SCOPE
The scope for a "dice game using web application" project is broad and can be
tailored to suit various objectives and audience preferences. Here are some
potential areas of scope for this project:

Game Types and Variations: Decide on the type of dice game (e.g., traditional
dice roll, role-playing game with dice mechanics, educational game). Include
options for different variations of the game (e.g., different rule sets, difficulty
levels).

User Authentication and Profiles: Implement user registration and authentication

for personalized experiences. Allow users to create and manage profiles with
preferences, statistics, and achievements.

Multiplayer Functionality: Develop features for multiplayer gameplay, allowing

users to compete against friends or random opponents. Implement real-time or
turn-based multiplayer interactions.

Gameplay Mechanics: Define the rules and mechanics of the game, including
how dice rolls influence the gameplay.

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script

CHAPTER 2
LITERATURE SURVEY

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script
2. LITERATURE SURVEY

1. P. Ravi Prakash
Dr. Patnayakuni Ravi Prakash is an Assistant Professor at IIT Jodhpur. He completed his
Ph.D. in Structural Engineering from IITGN and joined the University of Minho - Campus of
Gualtar, Portugal as a Postdoctoral Researcher. After his post-doc, he worked as Assistant
Professor at NIT Warangal. He has a strong passion for developing numerical models for
various multi-physics problems. He is experienced in developing a numerical framework for
the multi-physics analysis of structural systems subjected to fire.

2. Dr.S.Sai Kumar
Dr.S Sai Kumar Sr.Assistant Professor in Information Technology Department holding 8
years 9 months of teaching experience in PVPSIT - Prasad V. Potluri Siddhartha Institute of
Technology University of Jawaharlal Nehru Technological University Kakinada qualifications
in B.Tech, M.Tech, Ph.D

3. Ravi Prakash Paruchuri

Ravi Prakash Paruchuri assistant professor in the Department of Computer
Science/Information Technology holding 11 years 4 months of teaching experience PVPSIT -
Prasad V. Potluri Siddhartha Institute of Technology University of Jawaharlal Nehru
Technological University Kakinada Skilled in programming languages like C, C++ and Core
Java, HTML, UNIX.

Dr. B. Tirapathi Reddy

Dr. B. Tirapathi Reddy has 18+ years of Experience as an academician, researcher &
administrator. Served in various administrative positions as a Head of the Department -
Artificial intelligence & Data Science, Head of the Department - School of Competitive
Coding, Head of the Department - Communication & Soft Skills at KL University. also served
as Professor In charge for Placements Training for the Department in LBRCE, Instrumental in
making the students meeting the industry expectations and having dream start for their
professional careers from the campus itself.

Sr.no Author Name Published Purpose Technique

Year
P. Ravi Prakash 6/06/2021 Java script
1
Dr.S.Sai Kumar 6/06/2021 HTML,CSS
2
Ravi Prakash Paruchuri 6/06/2021 CSS
3
Dr. B. Tirapathi Reddy 6/06/2021 Javascript,CSS
4

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script

CHAPTER 3
RESEARCH GAP

3. RESEARCH GAP
Alamuri Ratnamala Institute of Engineering 1
 Dice game using HTML and Java script

3.1 OBJECTIVE

Create an Entertaining Gaming Experience: The primary goal is to develop a web-

based dice game that offers users an engaging and enjoyable gaming experience.

Promote User Engagement and Interaction: Foster a sense of community and

competition among users through features like multiplayer functionality,
leaderboards, and social sharing.

Enhance User Skills and Decision-Making: Provide opportunities for users to develop
critical thinking, strategic planning, and decision-making skills through gameplay
mechanics and challenges.

Ensure Accessibility and User-Friendliness: Design an intuitive user interface (UI)

that accommodates players of varying skill levels and preferences, ensuring easy
navigation and accessibility on different devices.

Incorporate Educational Elements (if applicable): If the game has an educational

component, aim to effectively convey relevant concepts or skills in an engaging and
interactive manner.

Implement Fair Game Mechanics: Ensure that the randomization algorithms for dice
rolls are unbiased and that the game mechanics maintain a fair playing field for all
users.

3.2 PURPOSE
Provide Entertainment and Recreation: The primary objective is to offer users a source
of leisure and entertainment through an engaging and interactive dice game accessible
via a web application.

Foster Engagement and Interaction: Create a platform that encourages social

interaction and friendly competition among users, potentially leading to a sense of
community within the gaming environment.

Enhance Cognitive Skills and Decision-Making: Incorporate elements in the game that
stimulate critical thinking, strategic planning, and decision-making, potentially
improving users' cognitive abilities.

Facilitate Learning (if applicable): If the game is designed with educational elements,
the purpose is to facilitate learning of specific concepts or skills in a gamified and
interactive manner.

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script
Showcase Technical Proficiency: Serve as a demonstration of the developer's or
development team's skills in web application development, highlighting proficiency in
frontend and backend technologies, database management, and user interface design.

Explore and Experiment with Game Design: Provide a platform for experimenting
with various game design elements, such as rules, mechanics, and user interfaces, to
create an engaging and enjoyable gaming experience.

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script

CHAPTER 4
RESEARCH OBJECTIVE

4. RESEARCH OBJECTIVE
Alamuri Ratnamala Institute of Engineering 1
 Dice game using HTML and Java script
Objective 1: Evaluating User Engagement and Experience The primary research
objective is to assess user engagement and experience within the web-based dice game
environment. This involves analyzing user interactions, session durations, and
feedback gathered through user surveys or in-game analytics. By tracking user
behavior, we aim to identify key elements that contribute to sustained engagement,
such as intuitive UI design, gameplay mechanics, and social interaction features.
Additionally, we will investigate user preferences for specific game variations, levels
of difficulty, and multiplayer options, providing insights for further game refinement.

Objective 2: Assessing Educational Impact and Effectiveness In cases where the dice
game incorporates educational elements, the research objective is to measure the
effectiveness of these components in facilitating learning outcomes. This will involve
conducting pre and post-game assessments to gauge users' grasp of targeted concepts.
We will also analyze gameplay data to identify correlations between in-game learning
interactions and retention of educational content. By evaluating the game's ability to
effectively convey educational material in an engaging manner, we aim to contribute
valuable insights to the intersection of gaming and learning.

Objective 3: Investigating Cognitive Skills Development Another key research

objective is to explore the impact of the dice game on cognitive skills development.
This includes assessing critical thinking, strategic planning, decision-making, and
adaptability in users. Through controlled experiments and data analysis, we aim to
determine whether the game serves as an effective platform for honing these skills. By
examining user strategies and choices during gameplay, we seek to provide empirical
evidence of the cognitive benefits that can be derived from engaging with the web-
based dice game.

Objective 4: Exploring User Preferences and Customization Understanding user

preferences and their influence on game dynamics is a critical research objective. This
involves investigating factors such as preferred game variations, player avatars, and
customization options. Through surveys and gameplay tracking, we aim to uncover
patterns in user behavior and preferences, allowing for the refinement and
personalization of the gaming experience. By tailoring aspects of the game to
individual user profiles, we seek to enhance overall satisfaction and retention rates.

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script

CHAPTER 5
PROJECT IMPLEMENTATION

5. PROJECT IMPLEMENTATION

5.1 HTML CODE

Alamuri Ratnamala Institute of Engineering 1
 Dice game using HTML and Java script

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content=

"width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<title>Dice Game</title>

</head>

<body>

<div class="container">

<h1>Let's Play</h1>

<div class="dice">

<p class="Player1">Player 1</p>

<img class="img1" src="assets/dice6.png">

</div>

<div class="dice">

<p class="Player2">Player 2</p>

<img class="img2" src="assets/dice5.png">

</div>

</div>

<div class="container bottom">

<button type="button" class="butn"

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script
onClick="rollTheDice()">

Roll the Dice

</button>

</div>

<div class="container bottom">

<button type="button" class="butn"

onClick="editNames()">

Edit Names

</button>

</div>

<script src="index.js"></script>

</body>

</html>

5.2 CSS CODE

.container {
Alamuri Ratnamala Institute of Engineering 1
 Dice game using HTML and Java script
width: 70%;

margin: auto;

text-align: center;

.dice {

text-align: center;

display: inline-block;

margin: 10px;

body {

background-color: #FAF1D8;

margin: 0;

h1 {

margin: 30px;

font-family: "Lobster", cursive;

text-shadow: 5px 0 #000000;

font-size: 4.5rem;

color: #000000;

text-align: center;

p{

font-size: 2rem;

color: #000000;

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script
font-family: "Indie Flower", cursive;

img {

width: 100%;

.bottom {

padding-top: 30px;

.butn {

background: #000000;

font-family: "Indie Flower", cursive;

border-radius: 7px;

color: #ffff;

font-size: 30px;

padding: 16px 25px 16px 25px;

text-decoration: none;

.butn:hover {

color: #9C060C;

background: #000000;

text-decoration: none;

5.3 JAVA SCRIPT CODE

// Player name

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script
var player1 = "Player 1";

var player2 = "Player 2";

// Function to change the player name

function editNames() {

player1 = prompt("Change Player1 name");

player2 = prompt("Change player2 name");

document.querySelector("p.Player1").innerHTML = player1;

document.querySelector("p.Player2").innerHTML = player2;

// Function to roll the dice

function rollTheDice() {

setTimeout(function () {

var randomNumber1 = Math.floor(Math.random() * 6) + 1;

var randomNumber2 = Math.floor(Math.random() * 6) + 1;

document.querySelector(".img1").setAttribute("src",

"assets/dice" + randomNumber1 + ".png");

document.querySelector(".img2").setAttribute("src",

"assets/dice" + randomNumber2 + ".png");

if (randomNumber1 === randomNumber2) {

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script
document.querySelector("h1").innerHTML = "Draw!";

else if (randomNumber1 < randomNumber2) {

document.querySelector("h1").innerHTML

= (player2 + " WINS!");

else {

document.querySelector("h1").innerHTML

= (player1 + " WINS!");

}, 2500);

5.4 RESULT

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script

CHAPTER 6
CONCLUSION

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script

6. CONCLUSION
Playing Dice games is a cross-generational thing, everybody plays, from kids to
seniors. In this Roll dice Game project using web application it helps users to tap into
positive emotions, like curiosity, optimism, creativity.

Users enjoy it just for the sake of relaxation. But those emotions stay up hours after
they play! Unless someone beats users high-score. Playing Roll Dice games bring
people together, it is the competition amog peers that adds adrenaline. After a success
in a game, users are more likely to set an ambitious goal for theirselves, even outside
of gaming. Basically, dice games can turn their superpowers on.

This game is fully in javascript and uses some sprite images. You can simply use any
kind of code editor for this project. This game is in 2D format. All you have to do is
roll the dice and try to bring hifher number than your opponent player.

This is a simple dice game with much simple game rules. Based on the observed
results from Roll Dice Game using Web Application project and its benefits to the
users in sharpening their brains , stress relief, we have created an user-friendly web
browser. we gathered a lot of information regarding the flaws, difficulties that users
are facing, using web browser.

This project is useful to many people as it works as stress relief, brain exercise. and it
is useful to improve problem solving skills.

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script

CHAPTER 7
REFERENCE

Alamuri Ratnamala Institute of Engineering 1

 Dice game using HTML and Java script
7. REFRENCE

[1] Roll Dice Game Project in WEB with Source Code and Report - kashipara
[2] HTML Game Using JavaScript DiceRoll - CodeSpeedy
[3] GitHub - DiyanApostolov/Dice-Game: Web application built for The Complete JavaScript
Course 2021: From Zero to Expert! at Udemy
[4] GitHub - AhmadrezaMozaffary/Bilingual-dice-game: Responsive - Bilingual - HTML
CSS JS �
[5] Build a Dice Roll Game - JavaScript CSS Tutorial for Beginners (Video Format) - DEV
Community
[6] Build a Dice Roll Simulator using HTML CSS and JavaScript - DEV Community
[7] https://www.youtube.com/watch?v=vjPIDX-itvc
[8] Make a JavaScript Dice Game - Coding Commanders
[9] Building a Dice Game using JavaScript - GeeksforGeeks
[10] dice-game · GitHub Topics · GitHub

Alamuri Ratnamala Institute of Engineering 1