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

First Dice game; 2048 for mobile partialy; Shadows and custom background in rock paper scissors

Browse Source
This commit is contained in:
MrEidam
2024-08-09 00:05:18 +02:00
parent dc5bc86832
commit 5664a525db
19 changed files with 227 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Games/RockPaperScissors/Invis.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 B

10
Games/RockPaperScissors/index.html
View File

@@ -4,15 +4,17 @@
<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">
<script src="main.js"></script>
<title>Rock Paper Scisors</title>
</head>
<body>
<h1 id="opponent-score">0</h1>
<img id="opponent-choice" draggable="false">
<br>
<img id="your-choice" draggable="false">
<div id="choices"></div>
<article class="choiBACK">
<img src="Invis.png" class="choices" id="opponent-choice" draggable="false">
<img src="Invis.png" class="choices" id="your-choice" draggable="false">
</article>
<div id="choices" draggable="false"></div>
<h1 id="your-score">0</h1>
</body>
</html>

BIN
Games/RockPaperScissors/mobile.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
Games/RockPaperScissors/pc.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

43
Games/RockPaperScissors/style.css
View File

@@ -16,6 +16,11 @@ body{
align-items: center;
min-height: 100vh;
color: #fff;
background-image: url('./pc.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: 0s;
}
img{
@@ -27,16 +32,12 @@ h1{
filter: drop-shadow(1.5px 1.5px 6px #aaa);
}
#opponent-choice{
width: 240px;
height: 240px;
/*background: #fcda45;*/
margin-top: 10px;
margin-top: /*1*/0px;
}
#your-choice{
width: 240px;
height: 240px;
/*background: #4fdc5e;*/
margin-top: 10px;
margin-top: 20px;
}
#choices{
width: 240px;
@@ -49,4 +50,34 @@ h1{
#choices img{
width: 80px;
height: 80px;
}
.choiBACK{
padding: 2rem;
display: flex;
flex-direction: column;
backdrop-filter: blur(5px);
border-radius: 50px;
box-shadow:
inset 10px 10px 20px #fff,
10px 10px 20px #333;
}
.choices{
width: 240px;
height: 240px;
border-radius: 25px;
}
@media screen and (max-width: 500px){
body{
background-image: url("./mobile.jpg");
}
.choices{
width: 180px;
height: 180px;
}
.choiBACK{
}
}