Cute Cat Dressing Room | Cat Game Using Html Css Javascript

Cute Cat Dressing Room | Cat Game Using Html Css Javascript

Cute Cat Dressing Room | Cat Game Using Html Css Javascript


Welcome🎉 to Code With Random blog. In this blog, we learn how we create Cat Game. We use HTML, Css, and javascript for this Cat Game. I hope you enjoy our blog so let's start with a basic HTML structure for the Cat Game.

HTML Code

 <div class="container">  
  <div class="wrapper">  
   <div class="ears">  
    <div class="ear"></div>  
    <div class="ear"></div>  
   </div>  
   <div class="head">  
    <div class="mustaches">  
     <div class="mus">  
      <div class="mustach"></div>  
      <div class="mustach"></div>  
      <div class="mustach"></div>  
     </div>  
     <div class="mus">  
      <div class="mustach"></div>  
      <div class="mustach"></div>  
      <div class="mustach"></div>  
     </div>  
    </div>  
    <div class="eyes">  
     <div class="eye"></div>  
     <div class="eye"></div>  
    </div>  
    <div class="nose">  
     <div class="shape"></div>  
    </div>  
    <div class="mouth">^</div>  
   </div>  
   <div class="body"></div>  
   <div class="pads">  
    <div class="pad"></div>  
    <div class="pad"></div>  
   </div>  
   <div class="hat">  
    <div class="bottom"></div>  
   </div>  
   <div class="glasses">  
    <div class="glass"></div>  
    <div class="glass"></div>  
   </div>  
   <div class="tie"></div>  
  </div>  
  <div class="controls">  
   <input type="checkbox" id="eyeglasses">  
   <input type="checkbox" id="hat">  
   <input type="checkbox" id="tie">  
   <label class="glassescontrol" data-text="eyeglasses" for="eyeglasses">  
    <div class="glassesicon">  
     <div class="glassicon"></div>  
     <div class="glassicon"></div>  
    </div>  
   </label>  
   <label data-text="Hat" class="hatcontrol" for="hat">  
    <div class="haticon">  
     <div class="bottom">  
     </div>  
    </div>  
   </label>  
   <label data-text="Tie" class="tiecontrol" for="tie">  
    <div class="tieicon"></div>  
   </label>  
  </div>  
 </div>  
There is all the HTML code for the Cat Game. Now, you can see an output with CSS, then we write javascript for the Cat Game.
output
Cute Cat Dressing Room | Cat Game Using Html Css Javascript

CSS code

 *,  
 *::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%);  
 }  
Css Updated output
Cute Cat Dressing Room | Cat Game Using Html Css Javascript

Javascript code 

 //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";  
  }  
 }  
Final output
Cute Cat Dressing Room | Cat Game Using Html Css Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Cat Game. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Cat Game using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post