From dcdcc6cf5406b369b992fb96c4608a5e8b71a5ae Mon Sep 17 00:00:00 2001
From: DevanshKyada27 <143169520+DevanshKyada27@users.noreply.github.com>
Date: Tue, 17 Oct 2023 23:34:35 +0530
Subject: [PATCH] CatGame
---
index.html | 98 ++++++++++---
script.js | 131 +++++------------
style.css | 410 +++++++++++++++++++++++++++++++++++++++++++----------
3 files changed, 447 insertions(+), 192 deletions(-)
diff --git a/index.html b/index.html
index c3c4ef8be..340344cd6 100644
--- a/index.html
+++ b/index.html
@@ -1,25 +1,77 @@
-
-
-
-
- Sudoku
+
+
+
+
+
+
+ Cat Game
+
+
+
+
+
+
-
-
-
-
- Sudoku
-
- 0
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/script.js b/script.js
index a1e06d2c0..a7d242677 100644
--- a/script.js
+++ b/script.js
@@ -1,96 +1,35 @@
-
-var numSelected = null;
-var tileSelected = null;
-
-var errors = 0;
-
-var board = [
- "--74916-5",
- "2---6-3-9",
- "-----7-1-",
- "-586----4",
- "--3----9-",
- "--62--187",
- "9-4-7---2",
- "67-83----",
- "81--45---"
-]
-
-var solution = [
- "387491625",
- "241568379",
- "569327418",
- "758619234",
- "123784596",
- "496253187",
- "934176852",
- "675832941",
- "812945763"
-]
-
-window.onload = function() {
- setGame();
-}
-
-function setGame() {
- // Digits 1-9
- for (let i = 1; i <= 9; i++) {
- //1
- let number = document.createElement("div");
- number.id = i
- number.innerText = i;
- number.addEventListener("click", selectNumber);
- number.classList.add("number");
- document.getElementById("digits").appendChild(number);
- }
-
- // Board 9x9
- for (let r = 0; r < 9; r++) {
- for (let c = 0; c < 9; c++) {
- let tile = document.createElement("div");
- tile.id = r.toString() + "-" + c.toString();
- if (board[r][c] != "-") {
- tile.innerText = board[r][c];
- tile.classList.add("tile-start");
- }
- if (r == 2 || r == 5) {
- tile.classList.add("horizontal-line");
- }
- if (c == 2 || c == 5) {
- tile.classList.add("vertical-line");
- }
- tile.addEventListener("click", selectTile);
- tile.classList.add("tile");
- document.getElementById("board").append(tile);
- }
- }
-}
-
-function selectNumber(){
- if (numSelected != null) {
- numSelected.classList.remove("number-selected");
- }
- numSelected = this;
- numSelected.classList.add("number-selected");
-}
-
-function selectTile() {
- if (numSelected) {
- if (this.innerText != "") {
- return;
- }
-
- // "0-0" "0-1" .. "3-1"
- let coords = this.id.split("-"); //["0", "0"]
- let r = parseInt(coords[0]);
- let c = parseInt(coords[1]);
-
- if (solution[r][c] == numSelected.id) {
- this.innerText = numSelected.id;
- }
- else {
- errors += 1;
- document.getElementById("errors").innerText = errors;
- }
- }
-}
+//controls
+const hatcheck = document.querySelector("#hat");
+const glassescheck = document.querySelector("#eyeglasses");
+const tiecheck = document.querySelector("#tie");
+//accessories
+const hat = document.querySelector(".hat");
+const glasses = document.querySelector(".glasses");
+const tie = document.querySelector(".tie");
+//Reveal Hat
+hatcheck.addEventListener("change", hatfun);
+function hatfun() {
+ if (hatcheck.checked == true) {
+ hat.style.bottom = "165px";
+ } else {
+ hat.style.bottom = "400px";
+ }
+}
+//Reveal Eyeglasses
+glassescheck.addEventListener("change", glassesfun);
+function glassesfun() {
+ if (glassescheck.checked == true) {
+ glasses.style.right = "50%";
+ } else {
+ glasses.style.right = "-50%";
+ }
+}
+//Reveal Tie
+tiecheck.addEventListener("change", tiefun);
+function tiefun() {
+ if (tiecheck.checked == true) {
+ tie.style.bottom = "10px";
+ } else {
+ tie.style.bottom = "-80px";
+ }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index c426fc6f8..3d38772b8 100644
--- a/style.css
+++ b/style.css
@@ -1,73 +1,337 @@
-body {
- font-family: Arial, Helvetica, sans-serif;
- text-align: center;
-}
-
-hr {
- width: 500px;
-}
-
-#errors {
- color: coral;
-}
-
-#board {
- width: 450px;
- height: 450px;
-
- margin: 0 auto;
- display: flex;
- flex-wrap: wrap;
-}
-
-.tile {
- width: 48px;
- height: 48px;
- border: 1px solid lightgray;
-
- /* Text */
- font-size: 20px;
- font-weight: bold;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-#digits {
- width: 450px;
- height: 50px;
-
- margin: 0 auto;
- display: flex;
- flex-wrap: wrap;
-}
-
-.number {
- width: 44px;
- height: 44px;
- border: 1px solid black;
- margin: 2px;
-
- /* Text */
- font-size: 20px;
- font-weight: bold;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.number-selected {
- background-color: gray;
-}
-
-.tile-start {
- background-color: whitesmoke;
-}
-
-.horizontal-line {
- border-bottom: 1px solid black;
-}
-
-.vertical-line {
- border-right: 1px solid black;
-}
\ No newline at end of file
+*,
+ *::before,
+ *::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+ body {
+ height: 100vh;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-family: Arial, Helvetica, sans-serif;
+ }
+ .container {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 2rem;
+ }
+ .wrapper {
+ height: 300px;
+ width: 300px;
+ position: relative;
+ background-color: #7070f3;
+ border-radius: 50%;
+ overflow: hidden;
+ }
+ .controls {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ }
+ .controls input {
+ display: none;
+ }
+ .body {
+ height: 80px;
+ width: 40%;
+ position: absolute;
+ bottom: -2%;
+ right: 50%;
+ transform: translateX(50%);
+ background-color: #f4f4f4;
+ clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
+ }
+ .head {
+ height: 130px;
+ width: 58%;
+ border-radius: 50%;
+ position: absolute;
+ z-index: 5;
+ bottom: 60px;
+ right: 50%;
+ transform: translateX(50%);
+ background-color: #f4f4f4;
+ overflow: hidden;
+ }
+ .head::before {
+ content: "";
+ aspect-ratio: 1/1;
+ width: 60%;
+ position: absolute;
+ left: -25%;
+ top: -20%;
+ border-radius: 50%;
+ background-color: #f7bcd1;
+ }
+ .head::after {
+ content: "";
+ aspect-ratio: 1/1;
+ width: 60%;
+ position: absolute;
+ right: -25%;
+ top: -20%;
+ border-radius: 50%;
+ background-color: #f7bcd1;
+ }
+ .ears {
+ display: flex;
+ gap: 3rem;
+ position: absolute;
+ bottom: 140px;
+ right: 50%;
+ transform: translateX(50%);
+ }
+ .ear {
+ height: 70px;
+ width: 70px;
+ background-color: #f4f4f4;
+ border-radius: 10% 40% 0 40%;
+ transform: rotateY(180deg) rotate(70deg);
+ transform-origin: center;
+ transform-box: fill-box;
+ display: grid;
+ place-items: center;
+ }
+ .ear:nth-child(2) {
+ transform: rotate(70deg);
+ }
+ .ear::before {
+ content: "";
+ height: 50%;
+ width: 50%;
+ background-color: #f68eb3;
+ border-radius: 10% 40% 0 40%;
+ }
+ .eyes {
+ display: flex;
+ gap: 3rem;
+ position: absolute;
+ bottom: 60px;
+ right: 50%;
+ z-index: 3;
+ transform: translateX(50%);
+ }
+ .eye {
+ height: 30px;
+ width: 30px;
+ border-radius: 50%;
+ background-color: #010101;
+ position: relative;
+ }
+ .eye::before {
+ content: "";
+ height: 40%;
+ width: 40%;
+ position: absolute;
+ top: 7%;
+ right: 9%;
+ border-radius: 50%;
+ background-color: #ffffff69;
+ }
+ .nose {
+ position: absolute;
+ bottom: 50px;
+ right: 50%;
+ transform: translateX(50%);
+ }
+ .shape {
+ height: 22px;
+ width: 22px;
+ transform: rotate(45deg);
+ transform-origin: center;
+ transform-box: fill-box;
+ background-color: #000000;
+ border-radius: 100% 10px 10px 10px;
+ position: relative;
+ }
+ .nose::before {
+ content: "";
+ height: 10px;
+ width: 5px;
+ position: absolute;
+ bottom: -10px;
+ right: 50%;
+ transform: translateX(50%);
+ background-color: #000;
+ }
+ .mouth {
+ font-size: 2.2rem;
+ font-weight: bold;
+ position: absolute;
+ bottom: 15px;
+ right: 50%;
+ transform: translateX(50%);
+ }
+ .mustaches {
+ display: flex;
+ gap: 1rem;
+ position: absolute;
+ bottom: 27px;
+ right: 50%;
+ transform: translateX(50%);
+ z-index: 2;
+ }
+ .mus {
+ display: flex;
+ flex-direction: column;
+ }
+ .mustach {
+ height: 20px;
+ width: 5rem;
+ border-radius: 50%;
+ border-top: 2px solid #000000;
+ margin-top: -15px;
+ }
+ .pads {
+ display: flex;
+ gap: 2.5rem;
+ position: absolute;
+ bottom: -5px;
+ right: 50%;
+ z-index: 5;
+ transform: translateX(50%);
+ }
+ .pad {
+ height: 40px;
+ width: 50px;
+ border-radius: 50%;
+ background-color: #d1d1d1;
+ }
+ .hat {
+ height: 100px;
+ width: 90px;
+ background-color: #000;
+ position: absolute;
+ bottom: 400px;
+ right: 50%;
+ z-index: 5;
+ transform: translateX(50%);
+ display: flex;
+ align-items: end;
+ justify-content: center;
+ border-radius: 10px;
+ transition: bottom 0.3s ease-in-out;
+ }
+ .hat .bottom {
+ height: 30px;
+ width: 120px;
+ background-color: #000;
+ position: absolute;
+ border-radius: 9999px;
+ }
+ .glasses {
+ display: flex;
+ gap: 2rem;
+ position: absolute;
+ bottom: 110px;
+ right: -50%;
+ z-index: 5;
+ transform: translateX(50%);
+ transition: right 0.3s ease-in-out;
+ }
+ .glasses::before {
+ content: "";
+ height: 5px;
+ width: 2rem;
+ background-color: #fff;
+ position: absolute;
+ top: 50%;
+ right: 50%;
+ transform: translate(50%, -50%);
+ }
+ .glass {
+ height: 50px;
+ width: 50px;
+ border-radius: 50%;
+ border: 4px solid #000;
+ background-color: rgba(255, 255, 255, 0.349);
+ }
+ .tie {
+ height: 50px;
+ width: 30px;
+ background-color: #000;
+ position: absolute;
+ bottom: -80px;
+ right: 50%;
+ z-index: 7;
+ transform: translateX(50%);
+ clip-path: polygon(0% 0%, 100% 0%, 70% 20%, 100% 100%, 0% 100%, 30% 20%);
+ transition: bottom 0.3s ease-in-out;
+ }
+ .glassescontrol,
+ .hatcontrol,
+ .tiecontrol {
+ height: 50px;
+ width: 50px;
+ background-color: #f290b2;
+ position: relative;
+ display: grid;
+ place-items: center;
+ border-radius: 50%;
+ box-shadow: 8px 8px 14px #00000024;
+ cursor: pointer;
+ position: relative;
+ }
+ .glassescontrol:hover::before,
+ .hatcontrol:hover::before,
+ .tiecontrol:hover::before {
+ content: attr(data-text);
+ padding: 2px 5px;
+ border-radius: 5px;
+ position: absolute;
+ top: 50%;
+ left: 110%;
+ transform: translateY(-50%);
+ background-color: #7070f3;
+ color: white;
+ }
+ .haticon {
+ height: 25px;
+ width: 20px;
+ background-color: #ffffff;
+ display: flex;
+ align-items: end;
+ justify-content: center;
+ border-radius: 2px;
+ }
+ .haticon .bottom {
+ height: 7px;
+ width: 30px;
+ background-color: #ffffff;
+ position: absolute;
+ border-radius: 9999px;
+ }
+ .glassesicon {
+ display: flex;
+ gap: 0.1rem;
+ }
+ .glassesicon::before {
+ content: "";
+ height: 5px;
+ width: 0.2rem;
+ background-color: #ffffff;
+ position: absolute;
+ top: 50%;
+ right: 50%;
+ transform: translate(50%, -50%);
+ }
+ .glassicon {
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ border: 4px solid #ffffff;
+ background-color: rgba(255, 255, 255, 0.349);
+ }
+ .tieicon {
+ height: 30px;
+ width: 10px;
+ background-color: #ffffff;
+ clip-path: polygon(0% 0%, 100% 0%, 70% 20%, 100% 100%, 0% 100%, 30% 20%);
+ }
\ No newline at end of file