diff --git a/Games/DiceWar/style.css b/Games/DiceWar/style.css index a96d0fa..bdbc8ae 100644 --- a/Games/DiceWar/style.css +++ b/Games/DiceWar/style.css @@ -87,7 +87,7 @@ img.pop{ img{ width: 40px; height: 40px; - margin: .75rem; + margin: .60rem; border-radius: 5px; } .result{ diff --git a/Games/NumberQuess6/1.png b/Games/NumberQuess6/1.png new file mode 100644 index 0000000..ee9dd0c Binary files /dev/null and b/Games/NumberQuess6/1.png differ diff --git a/Games/NumberQuess6/2.png b/Games/NumberQuess6/2.png new file mode 100644 index 0000000..0d53674 Binary files /dev/null and b/Games/NumberQuess6/2.png differ diff --git a/Games/NumberQuess6/3.png b/Games/NumberQuess6/3.png new file mode 100644 index 0000000..5515f93 Binary files /dev/null and b/Games/NumberQuess6/3.png differ diff --git a/Games/NumberQuess6/4.png b/Games/NumberQuess6/4.png new file mode 100644 index 0000000..cd06bc0 Binary files /dev/null and b/Games/NumberQuess6/4.png differ diff --git a/Games/NumberQuess6/5.png b/Games/NumberQuess6/5.png new file mode 100644 index 0000000..f561fc8 Binary files /dev/null and b/Games/NumberQuess6/5.png differ diff --git a/Games/NumberQuess6/6.png b/Games/NumberQuess6/6.png new file mode 100644 index 0000000..4a33870 Binary files /dev/null and b/Games/NumberQuess6/6.png differ diff --git a/Games/NumberQuess6/index.html b/Games/NumberQuess6/index.html new file mode 100644 index 0000000..921ab56 --- /dev/null +++ b/Games/NumberQuess6/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + Quess Number 1D6 + + +
+

Guess The Number!

+ +
+

Quessing:

+ +
+ +
+ + + \ No newline at end of file diff --git a/Games/NumberQuess6/main.js b/Games/NumberQuess6/main.js new file mode 100644 index 0000000..1e12c66 --- /dev/null +++ b/Games/NumberQuess6/main.js @@ -0,0 +1,37 @@ +const dice = document.querySelector('#dice'); //img +let answear = document.querySelector('#answear'); //text ans +let number = document.querySelector('#num'); //num selec + +async function correct(){ + let won = document.createElement('h1'); + won.classList.add('result', 'won'); + won.innerHTML = `Correct!
+10 coins`; + document.body.append(won); + setTimeout(() => { + won.remove(); + }, 600); +} + +async function wrong(){ + let lost = document.createElement('h1'); + lost.classList.add('result', 'lost'); + lost.innerText = "Wrong!"; + document.body.append(lost); + setTimeout(() => { + lost.remove(); + }, 600); +} + +function roll(){ + let newDice = Math.floor(Math.random()*6); + + console.log(newDice); + + dice.src = `./${newDice+1}.png`; + + if(number.value == newDice+1){ + correct(); + }else{ + wrong(); + } +} \ No newline at end of file diff --git a/Games/NumberQuess6/mobile.jpg b/Games/NumberQuess6/mobile.jpg new file mode 100755 index 0000000..dabf86b Binary files /dev/null and b/Games/NumberQuess6/mobile.jpg differ diff --git a/Games/NumberQuess6/pc.jpg b/Games/NumberQuess6/pc.jpg new file mode 100755 index 0000000..f3d5613 Binary files /dev/null and b/Games/NumberQuess6/pc.jpg differ diff --git a/Games/NumberQuess6/style.css b/Games/NumberQuess6/style.css new file mode 100644 index 0000000..d0a84b8 --- /dev/null +++ b/Games/NumberQuess6/style.css @@ -0,0 +1,128 @@ +*{ + 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; + background-image: url("./pc.jpg"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + color: #fff; + text-align: center; +} + +img{ + width: 100px; + height: 100px; + margin: 1.25rem; + border-radius: 15px; + filter: drop-shadow(1.5px 1.5px 6px #aaa); +} +h1{ + filter: drop-shadow(1.5px 1.5px 3px #000); +} +.ques{ + display: flex; + flex-direction: row; +} +.ques p{ + margin-right: .5rem; + filter: drop-shadow(1.5px 1.5px 6px #333); +} +.ques select{ + color: #fff; + border: none; + background: none; + border-radius: 7px; + backdrop-filter: blur(10px); + box-shadow: + inset 1.5px 1.5px 3px #fff, + 10px 10px 20px #333; +} +.ye{ + background: #333; + backdrop-filter: blur(10px); +} + +button{ + text-transform: uppercase; + height: 69px; + width: 69px; + margin-top: 1rem; + border-radius: 10px; + border: none; + background: none; + color: #fff; + text-shadow: 2px 2px 2.5px #333; + /*filter: drop-shadow(10px 10px 20px #333);*/ + backdrop-filter: blur(10px); + box-shadow: + inset 2.5px 2.5px 5px #fff, + 10px 10px 20px #333; +} +.que{ + margin-right: 1rem; +} + +.result{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + filter: drop-shadow(1.5px 1.5px 6px #000); + text-transform: uppercase; + font-size: 100px; + user-select: none; +} + +.won{ + color: #0f0; + animation: pop 0,5s ease-in-out; + transition: .5s; +} + +.lost{ + color: #f00; + animation: pop 0,5s ease-in-out; + transition: .5s; +} + +@keyframes pop{ + 0%{ + scale: 0.1; + } + 100%{ + scale: 1; + } +} + +.gameBack{ + padding: 1rem; + height: 400px; + width: 300px; + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; + backdrop-filter: blur(5px); + border-radius: 50px; + box-shadow: + inset 10px 10px 20px #fff, + 10px 10px 20px #333; +} + +@media screen and (max-width: 500px){ + body{ + background-image: url("./mobile.jpg"); + } + .result{ + font-size: 45px; + } +} \ No newline at end of file diff --git a/Games/index.html b/Games/index.html index a6b6226..2769277 100644 --- a/Games/index.html +++ b/Games/index.html @@ -8,7 +8,7 @@ 2048 RockPaperScissors - QuessNumber-1D6 + NumberQuess DiceWar \ No newline at end of file