CSS [크리스마스 해커톤] 공부하려고 스케이트 게임을 만들었어요

나는 스케이트보드를 타고 정말 좋아합니다! 그래서 CSS 기술을 연습하기 위해 작은 스케이트보드 게임(예: Google t-rex 게임)을 만들기로 결정했습니다!

이것은 진행 중인 작업이며 다른(더 나은) 방법으로 수행할 수 있었다는 것을 알고 있습니다. 내 계획은 "완벽"할 때까지 이 작업을 계속하는 것입니다. 플레이해보시면 가끔 버그가 있는걸 보실수도... 음 🤷‍♀️

게임 뒤에 숨겨진 생각

하루는 스케이트장에서 사람들이 스케이트장에서 돌을 던지는 이유를 생각했습니다. 스쿠터 꼬마들은 왜 차례를 기다리는 스케이트장 규칙을 지키지 않는 걸까? 그래서 바위와 스쿠터 꼬마를 피해야 하는 게임이 있으면 재미있을 것 같아요! 한동안 머릿속에 그런 생각이 들었지만 그렇게 할 동기가 없었습니다. 그러다 보니 Hashnode Christmas Hackathon ! 얼마나 좋은 기회입니까!

나는 어떻게 게임을 만들었는가

가능한 한 CSS를 고수하려고 최선을 다했습니다. Vue.js 프로젝트를 만들고 몇 가지 아이콘을 추가한 다음 페이지에 배치합니다. 다음은?

글쎄, 나는 스케이터 올리(점프)를 만드는 방법을 배워야 했기 때문에 조사를 좀 한 후에 다음과 같이 했습니다.

id = skater로 div를 추가했습니다.

다음 CSS를 추가했습니다.

#skater {
    background-image: url("../../assets/skater.png");
    width: 60px;
    height: 60px;
    background-size: 60px;
    top: 190px;
    position: relative;
}

.ollie {
    animation: ollie 0.5s linear;
}

@keyframes ollie {
    0% {
        top: 190px;
        background-image: url("../../assets/skater-ollie.png");
        display: none;
    }

    30% {
        top: 160px;
        background-image: url("../../assets/skater-ollie.png");
    }

    50% {
        top: 80px;
        background-image: url("../../assets/skater-ollie.png");
    }

    80% {
        top: 175px;
        background-image: url("../../assets/skater-ollie.png");
    }

    100% {
        top: 190px;
        background-image: url("../../assets/skater-ollie.png");
        display: none;
    }
}

그런 다음 바위와 스쿠터에 대해 기본적으로 동일한 작업을 수행했지만 애니메이션이 infinite여야 한다는 차이점이 있습니다(장식으로 추가한 '하늘'의 구름 포함).

모든 것이 계획대로 움직이고 있었다. 충돌을 일으키는 방법을 알아내야 했습니다! 그래서 한동안 노력하고 노력한 끝에 다음 코드를 생각해 냈습니다.

 setInterval(() => {
        let skateTop = parseInt(window.getComputedStyle(this.skater).getPropertyValue("top"));
        let rockLeft = parseInt(window.getComputedStyle(this.rock).getPropertyValue("left"));
        let scooterLeft = parseInt(window.getComputedStyle(this.scooter).getPropertyValue("left"));

        //collisions

        //rock
        if (rockLeft < 50 && rockLeft > 0 && skateTop >= 175) {
          this.pause();
          this.collidedRock = true;
        }

        //scooter
        if (scooterLeft < 50 && scooterLeft > 0 && !this.skaterDown) {
          this.pause();
          this.collidedScooter = true;
        }
      }, 10);

따라서 10ms마다 스케이터가 스쿠터 또는 바위를 치고 있는지(중첩) 확인합니다. 그렇다면 게임을 일시 중지하고 필요한 경우 가장 높은 점수를 업데이트하고 "다시 시도"버튼을 추가합니다.

나는 무엇을 배웠는가

나는 animations와 @keyframes에 대해 그리고 그것이 얼마나 강력하고 재미있을 수 있는지에 대해 조금 배웠습니다. 나는 항상 사람들이 웹사이트에서 물건을 어떻게 움직이게 하는지 궁금했습니다! 한 번도 안 써본(😱) position: relative도 조금 가지고 놀았어요.
내 계획은 더 복잡한 페이지를 만들기 위해 계속 연구하는 것입니다. 재미로.

게임의 다음 단계

게임은 아직 끝나지 않았습니다. 아직 할 일이 많습니다. 가장 중요한 것은 테스트 추가입니다. 예, 테스트를 추가하지 않았고 짜증납니다. 내가 한 일을 테스트하는 방법을 모르겠습니다. 나는 아직도 그것을 알아 내려고 노력하고 있습니다. 건의사항이 있으시면 말씀해주세요!

추가하고 싶은 기능

알리 및 충돌 사운드 추가

놀이터에 멋진 배경 추가

바위와 스쿠터를 더 지능적으로 만드십시오

더 나은 아이콘 찾기/만들기

게임

게임here을 할 수 있습니다. Vercel을 사용하여 배포했습니다.

Github 저장소here를 확인할 수 있습니다.

메모

내 코드를 개선하는 방법, 추가할 수 있는 새로운 기능 등에 대한 제안을 추가해 주세요! 나에게 연락하거나 Github에서 문제를 열 ​​수 있습니다!