mirror of
https://github.com/MrEidam/PetPet.git
synced 2026-04-17 23:53:31 +00:00
First Dice game; 2048 for mobile partialy; Shadows and custom background in rock paper scissors
This commit is contained in:
BIN
Games/QuessNumber-1D6/1.png
Normal file
BIN
Games/QuessNumber-1D6/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 B |
BIN
Games/QuessNumber-1D6/2.png
Normal file
BIN
Games/QuessNumber-1D6/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 B |
BIN
Games/QuessNumber-1D6/3.png
Normal file
BIN
Games/QuessNumber-1D6/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 B |
BIN
Games/QuessNumber-1D6/4.png
Normal file
BIN
Games/QuessNumber-1D6/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 B |
BIN
Games/QuessNumber-1D6/5.png
Normal file
BIN
Games/QuessNumber-1D6/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 B |
BIN
Games/QuessNumber-1D6/6.png
Normal file
BIN
Games/QuessNumber-1D6/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 B |
31
Games/QuessNumber-1D6/index.html
Normal file
31
Games/QuessNumber-1D6/index.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!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>Quess Number 1D6</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Guess The Number!</h1>
|
||||
<h3>You are: <span id="answear"></span></h3>
|
||||
<img src="./6.png" alt="" id="dice">
|
||||
<div class="ques">
|
||||
<p>Quess: </p>
|
||||
<select id="num">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button onclick="roll()">Roll<br>the<br>Dice!</button>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
17
Games/QuessNumber-1D6/main.js
Normal file
17
Games/QuessNumber-1D6/main.js
Normal file
@@ -0,0 +1,17 @@
|
||||
const dice = document.querySelector('#dice'); //img
|
||||
let answear = document.querySelector('#answear'); //text ans
|
||||
let number = document.querySelector('#num'); //num selec
|
||||
|
||||
function roll(){
|
||||
let newDice = Math.floor(Math.random()*6);
|
||||
|
||||
console.log(newDice);
|
||||
|
||||
dice.src = `./${newDice+1}.png`;
|
||||
|
||||
if(number.value == newDice+1){
|
||||
answear.innerHTML = `<p class='won'>Correct! +10 coins</p>`;
|
||||
}else{
|
||||
answear.innerHTML = `<p class='lose'>Wrong!</p>`
|
||||
}
|
||||
}
|
||||
51
Games/QuessNumber-1D6/style.css
Normal file
51
Games/QuessNumber-1D6/style.css
Normal file
@@ -0,0 +1,51 @@
|
||||
*{
|
||||
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: 1.25rem;
|
||||
}
|
||||
|
||||
.ques{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.ques p{
|
||||
margin-right: .5rem;
|
||||
}
|
||||
.ques select{
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
button{
|
||||
text-transform: uppercase;
|
||||
height: 69px;
|
||||
width: 69px;
|
||||
margin-top: 1rem;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.won{
|
||||
color: lime;/*
|
||||
text-transform: uppercase;*/
|
||||
}
|
||||
.lose{
|
||||
color: red;/*
|
||||
text-transform: uppercase;*/
|
||||
}
|
||||
Reference in New Issue
Block a user