In this game we also change the player name please merge this thank you..pull/954/head
NITISH KUMAR
3 years ago
committed by
GitHub
parent
897b722467
commit
8de144d8e5
@ -0,0 +1,55 @@
|
||||
|
||||
.Cover {
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dice {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #3a3b5a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 30px;
|
||||
font-family: "Lobster", cursive;
|
||||
text-shadow: 5px #fffb00;
|
||||
font-size: 4.5rem;
|
||||
color: #ea00ff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 2rem;
|
||||
color: #4ecca3;
|
||||
font-family: "Indie Flower", cursive;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.butn {
|
||||
background: #4ecca3;
|
||||
font-family: "Indie Flower", cursive;
|
||||
border-radius: 7px;
|
||||
color: #ffff;
|
||||
font-size: 30px;
|
||||
padding: 16px 25px 16px 25px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.butn:hover {
|
||||
background: #232931;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -1,23 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Web Dev for Beginners</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="Description">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="icon" type="image/png" href="images/favicon.png">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"></head>
|
||||
<meta name="viewport" content=
|
||||
"width=device-width, initial-scale=1.0">
|
||||
<title>Dice Game</title>
|
||||
<link rel="stylesheet" href="dice.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'Web Development for Beginners: A Curriculum',
|
||||
repo: 'https://github.com/microsoft/Web-Dev-For-Beginners',
|
||||
relativePath: true,
|
||||
auto2top: false,
|
||||
}
|
||||
</script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
|
||||
<div class="Cover">
|
||||
<h1>READY TO WIN </h1>
|
||||
|
||||
<div class="dice">
|
||||
<p class="Player1">Player 1</p>
|
||||
<img class="img1" src="Dice6.jpg">
|
||||
</div>
|
||||
|
||||
<div class="dice">
|
||||
<p class="Player2">Player 2</p>
|
||||
<img class="img2" src="Dice6.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" Cover bottom">
|
||||
<button type="button" class="butn"
|
||||
onClick="rollTheDice()">
|
||||
Roll the Dice
|
||||
</button>
|
||||
</div>
|
||||
<div class=" Cover bottom">
|
||||
<button type="button" class="butn"
|
||||
onClick="ChangeNames()">
|
||||
Change Names
|
||||
</button>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,40 @@
|
||||
|
||||
|
||||
var player1 = "Player 1";
|
||||
var player2 = "Player 2";
|
||||
|
||||
|
||||
function ChangeNames() {
|
||||
player1 = prompt("Change Player1 name");
|
||||
player2 = prompt("Change player2 name");
|
||||
|
||||
document.querySelector("p.Player1").innerHTML = player1;
|
||||
document.querySelector("p.Player2").innerHTML = player2;
|
||||
}
|
||||
|
||||
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",
|
||||
"dice" + randomNumber1 + ".jpg");
|
||||
|
||||
document.querySelector(".img2").setAttribute("src",
|
||||
"dice" + randomNumber2 + ".jpg");
|
||||
|
||||
if (randomNumber1 === randomNumber2) {
|
||||
document.querySelector("h1").innerHTML = "Draw!";
|
||||
}
|
||||
|
||||
else if (randomNumber1 < randomNumber2) {
|
||||
document.querySelector("h1").innerHTML
|
||||
= (player2 + " WINS!");
|
||||
}
|
||||
|
||||
else {
|
||||
document.querySelector("h1").innerHTML
|
||||
= (player1 + " WINS!");
|
||||
}
|
||||
}, 2500);
|
||||
}
|
||||
Loading…
Reference in new issue