Cat Game

250x250

Notice

Recent Posts

Recent Comments

Link

« 2025/03 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Tags more

Archives

Today

Total

관리 메뉴

비전공자 개발일기

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

비전공자 개발일기

Cat Game 본문

Cat Game

'Javascript' 카테고리의 다른 글

티스토리툴바