HTML & CSS 활용 프로젝트_ 버튼 조작 게임 만들기

지금까지 배운 내용만을 활용하여

버튼 조작을 할 수 있는 간단한 게임을 만들었다!

 

---

코드

github(https://github.com/Bluishhot-Star/WEB/tree/master/HTML%26CSS/Btn_game)

<div class="title">KASSID GAME</div>
    <div class="game">
        <div class="left"></div>
        <div class="right"></div>
        <div class="refresh"></div>

        <div class="container">
            <div class="victory">VICTORY!</div>
            <div class="child"></div>
        </div>
    </div>

 

*, *::after, *::before {
    box-sizing: border-box;
}
.title {
    width: 325px;
    text-align: center;
    font-weight: bold;
    font-size: 25px;
}
.game {
    width: 325px;
    height: 380px;
    padding: 10px;
    position: relative;
    border: 2px solid #000;
    background-color: gray;
}
.left {
    display: inline-block;
    background-image: url(/images/l_btn.png);
    background-size: contain;
    border: 2px solid #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 30%;
    bottom: 10px;
}
.right {
    display: inline-block;
    background-image: url(/images/r_btn.png);
    background-size: contain;
    border: 2px solid #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-top: 5px;
    position: absolute;
    right: 30%;
    bottom: 10px;
}
.refresh {
    border: 1px solid #000;
    width: 15px;
    height: 15px;
    position:absolute;
    border-radius: 5px;
    z-index: 10;
    background-image: url(/images/direction.png);
    background-size: contain;
}

.right:active ~ .container{
    background-position: 100%;
    transition-property: background-position;
    transition-duration: 2s;
    transition-delay: 0s;
}
.right:active ~ .container>.child{
    background-color: red;
}
.right:active ~ .container>.victory {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s ease 2s;
}
.left:active ~ .container>.child{
    background-color: red;
}
.left:active ~ .container{
    background-position: 0%;
    transition-property: background-position;
    transition-duration: 2s;
}   
.refresh:active ~ .container{
    background-position: 0%;
    transition: background-position 0s;
}

.container {
    border: 1px solid #000;
    width: 300px;
    height: 300px;
    position: relative;
    background-image: url("/images/stage.png");
    background-position: 0px 0px;
    transition: background-position 10000s linear;
}
.child {
    background-color: #fff;
    width: 30px;
    height: 30px;
    position:absolute;
    top: 55%;
    left: 50%;
    background-image: url(/images/cat.png);
    background-size: contain;
    background-position: center;
    transform: translate(-50%,-50%);
}
.victory {
    visibility: hidden;
    opacity: 0;
    border: 1px solid #000;
    background-color: gold;
    border-radius: 5px;
    text-align: center;
    width: 100px;
    padding: 2px;
    height: 30px;
    font-weight: bold;
    position:absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
}

---

코멘트

아직 CSS에 대해서 제대로 알지 못하고

animaition 부분을 공부하지 않았지만

 

지금 현재 알고있는 것들을 토대로

이것저것 내 마음대로 구성해서

간단한 프로젝트를 만들어 보았다.

 

아마 나중에 보게 된다면

부끄러운 수준일 수 있지만

생각했던 대로 결과물이 나와서 좋았다

 

 

다음에는 더 느낌있게 만들어보고 싶다🔥