diff --git a/Games/Coin_Tosser/assets/images/coin_tosser.png b/Games/Coin_Tosser/assets/images/coin_tosser.png new file mode 100644 index 0000000000..a93bf80337 Binary files /dev/null and b/Games/Coin_Tosser/assets/images/coin_tosser.png differ diff --git a/Games/Coin_Tosser/assets/images/heads.png b/Games/Coin_Tosser/assets/images/heads.png new file mode 100644 index 0000000000..6869032799 Binary files /dev/null and b/Games/Coin_Tosser/assets/images/heads.png differ diff --git a/Games/Coin_Tosser/assets/images/tails.png b/Games/Coin_Tosser/assets/images/tails.png new file mode 100644 index 0000000000..62581fc8a0 Binary files /dev/null and b/Games/Coin_Tosser/assets/images/tails.png differ diff --git a/Games/Coin_Tosser/index.html b/Games/Coin_Tosser/index.html new file mode 100644 index 0000000000..926a5f4810 --- /dev/null +++ b/Games/Coin_Tosser/index.html @@ -0,0 +1,92 @@ + + + + + + Document + + +
+
+
+ +
+
+ +
+
+
+ + + + + + diff --git a/Games/Coin_Tosser/script.js b/Games/Coin_Tosser/script.js new file mode 100644 index 0000000000..8a475ef283 --- /dev/null +++ b/Games/Coin_Tosser/script.js @@ -0,0 +1,21 @@ +// function tossCoin() { +// const coin = document.getElementById('coin'); +// const resultElement = document.getElementById('result'); + +// // Remove the flip class to restart the animation +// coin.classList.remove('flip'); + +// // Randomly select heads or tails +// const result = Math.random() < 0.5 ? 'Heads' : 'Tails'; + +// // Delay to allow the animation to reset +// setTimeout(() => { +// coin.classList.add('flip'); +// resultElement.innerText = ''; +// }, 100); + +// // Set the result after the animation completes +// setTimeout(() => { +// resultElement.innerText = result; +// }, 1100); +// } diff --git a/Games/Coin_Tosser/styles.css b/Games/Coin_Tosser/styles.css new file mode 100644 index 0000000000..7740fa8f7d --- /dev/null +++ b/Games/Coin_Tosser/styles.css @@ -0,0 +1,73 @@ +/* body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + font-family: Arial, sans-serif; + background-color: #f0f0f0; +} +.container { + text-align: center; + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} +button { + padding: 10px 20px; + font-size: 16px; + margin-top: 20px; + cursor: pointer; + border: none; + background-color: #007BFF; + color: white; + border-radius: 5px; +} +button:hover { + background-color: #0056b3; +} +.coin { + position: relative; + width: 100px; + height: 100px; + margin: 20px auto; + perspective: 1000px; +} +.side { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + background-size: cover; + background-position: center; +} +.heads { + background-image: url('images/heads.png'); +} +.tails { + background-image: url('images/tails.png'); + transform: rotateY(180deg); +} +.coin.flip .heads { + animation: flipHeads 1s forwards; +} +.coin.flip .tails { + animation: flipTails 1s forwards; +} +@keyframes flipHeads { + from { transform: rotateY(0); } + to { transform: rotateY(180deg); } +} +@keyframes flipTails { + from { transform: rotateY(180deg); } + to { transform: rotateY(360deg); } +} +.result { + margin-top: 20px; + font-size: 24px; + font-weight: bold; +} */