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>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Web Dev for Beginners</title>
|
<meta name="viewport" content=
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
"width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="Description">
|
<title>Dice Game</title>
|
||||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
<link rel="stylesheet" href="dice.css">
|
||||||
<link rel="icon" type="image/png" href="images/favicon.png">
|
</head>
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"></head>
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div class="Cover">
|
||||||
<script>
|
<h1>READY TO WIN </h1>
|
||||||
window.$docsify = {
|
|
||||||
name: 'Web Development for Beginners: A Curriculum',
|
<div class="dice">
|
||||||
repo: 'https://github.com/microsoft/Web-Dev-For-Beginners',
|
<p class="Player1">Player 1</p>
|
||||||
relativePath: true,
|
<img class="img1" src="Dice6.jpg">
|
||||||
auto2top: false,
|
</div>
|
||||||
}
|
|
||||||
</script>
|
<div class="dice">
|
||||||
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
|
<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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</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