Eidam/PetPet
1
0
Fork 0
mirror of https://github.com/MrEidam/PetPet.git synced 2026-04-17 15:43:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dice war 0.3

Browse Source
This commit is contained in:
MrEidam
2024-08-11 00:25:56 +02:00
parent 6305cb0a0b
commit 7e89d45abc
12 changed files with 168 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Games/DiceWar/Dices/0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 B

BIN
Games/DiceWar/Dices/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 B

BIN
Games/DiceWar/Dices/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 B

BIN
Games/DiceWar/Dices/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 B

BIN
Games/DiceWar/Dices/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 B

BIN
Games/DiceWar/Dices/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 B

BIN
Games/DiceWar/Dices/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 B

BIN
Games/DiceWar/Dices/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 B

41
Games/DiceWar/index.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="./icon.png" type="image/x-icon">
<title>Dice War</title>
</head>
<body>
<article>
<div style="--clr: #cd2525;">
<section>
<img src="./Dices/7.png" alt="Enemy Dice" id="enDice1">
<img src="./Dices/7.png" alt="Enemy Dice" id="enDice2">
<img src="./Dices/7.png" alt="Enemy Dice" id="enDice3">
<img src="./Dices/7.png" alt="Enemy Dice" id="enDice4">
<img src="./Dices/7.png" alt="Enemy Dice" id="enDice5">
</section>
<h2>Enemy score: <span id="enemyScore">0</span></h2>
</div>
<div style="--clr: #2525cd;">
<h2>Your score: <span id="playerScore">0</span></h2>
<section>
<img src="./Dices/7.png" alt="Player Dice" id="plDice1">
<img src="./Dices/7.png" alt="Player Dice" id="plDice2">
<img src="./Dices/7.png" alt="Player Dice" id="plDice3">
<img src="./Dices/7.png" alt="Player Dice" id="plDice4">
<img src="./Dices/7.png" alt="Player Dice" id="plDice5">
</section>
<main>
<h3>Do you think that you have <select id="choice"><option value="1">more</option><option value="2">less</option></select> score then the Enemy?</h3>
<button onclick="gamble()">Let's find out!</button>
</main>
</div>
</article>
<script src="main.js"></script>
</body>
</html>

70
Games/DiceWar/main.js Normal file
View File

@@ -0,0 +1,70 @@
let enemy = [
document.querySelector('#enDice1'),
document.querySelector('#enDice2'),
document.querySelector('#enDice3'),
document.querySelector('#enDice4'),
document.querySelector('#enDice5'),
];
let player = [
document.querySelector('#plDice1'),
document.querySelector('#plDice2'),
document.querySelector('#plDice3'),
document.querySelector('#plDice4'),
document.querySelector('#plDice5'),
];
let enScore = document.querySelector('#enemyScore');
let plaScore = document.querySelector('#playerScore');
let enemyScore = 0;
let playerScore = 0;
function ranD6(){
return Math.floor(Math.random()*6)+1;
}
function enemyRoll(){
enemyScore = 0;
enemy.forEach(e => {
const point = ranD6();
enemyScore += point;
e.src = `./Dices/${point}.png`;
e.classList.value="";
e.classList.add("pop");
setTimeout(() => {
e.classList.remove('pop');
},500);
});
enScore.innerHTML = enemyScore;
}
function playerRoll(){
playerScore = 0;
player.forEach(e => {
const point = ranD6();
playerScore += point;
e.src = `./Dices/${point}.png`;
e.classList.value="";
e.classList.add("pop");
setTimeout(() => {
e.classList.remove('pop');
},500);
});
plaScore.innerHTML = playerScore;
}
function gamble(){
enemyRoll();
playerRoll();
setTimeout(() => {
if(playerScore>enemyScore){
alert('You won!');
}else if(playerScore<enemyScore){
alert(`You've lost`);
}else{
alert('Draw');
console.log(`Player: ${playerScore}`);
console.log(`Enemy: ${enemyScore}`);
}
}, 700);
}

56
Games/DiceWar/style.css Normal file
View File

@@ -0,0 +1,56 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: #333;
color: #fff;
text-align: center;
}
img{
width: 100px;
height: 100px;
margin: 1rem;
border-radius: 10px;
filter: drop-shadow(1.5px 1.5px 6px #aaa);
}
div{
min-height: 50vh;
min-width: 100dvw;
background-color: var(--clr);
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
button{
margin-top: .5rem;
}
img.pop{
animation: pop 0.2s ease-in-out;
}
@keyframes pop{
0%{
scale: 0.1;
}
100%{
scale: 1;
}
}
@media screen and (max-width: 500px){
img{
width: 40px;
height: 40px;
margin: .75rem;
border-radius: 5px;
}
}

1
Games/index.html
View File

@@ -9,5 +9,6 @@
<a href="./2048/">2048</a>
<a href="./RockPaperScissors/">RockPaperScissors</a>
<a href="./QuessNumber-1D6/">QuessNumber-1D6</a>
<a href="./DiceWar/">DiceWar</a>
</body>
</html>