비전공자 개발일기

Cat Game 본문

Javascript

Cat Game

HiroDaegu 2022. 10. 10. 01:12
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CAT GAME</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <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>  
</body>
</html>
*,  
*::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%);  
}
 //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";  
  }  
 }
728x90
LIST

'Javascript' 카테고리의 다른 글

Netflix Landing Screen  (0) 2022.10.17
2048 GAME  (0) 2022.10.11
Color Switch Animated Login Form  (0) 2022.10.07
OTP INPUT  (0) 2022.10.06
3D Image Carousel  (0) 2022.10.05
'Javascript' Related Articles more