I made a skate game to study CSS [Christmas Hackathon]

#css #javascript #vue #skateboard

I skateboard and I simply love it! So I decided to build a little skateboard game (like the Google t-rex one) to practice my CSS skills!

This is a work in progress and I'm aware that I could've done it in different (and better) ways. My plan is to keep working on this until it's "perfect". If you play it, you might see it's buggy sometimes... Well 🤷‍♀️

The thought behind the game

I was at the skatepark one day thinking why do people throw rocks at the skatepark? Why do scooter kids don't respect the skatepark rules of waiting their turn? So I thought that would be fun to have a game where you have to avoid rocks and scooter kids! I had the thought of it for a while in my head but never had the motivation to do it. Then I saw Hashnode Christmas Hackathon! What an opportunity!

How did I create the game

I tried my best to stick to CSS as much as I could. I create a Vue.js project, added a few icons, and put them on the page. What next?

Well, I needed to learn how to make the skater ollie (jump), so after some research I did:

I added a div with id = skater
I added the following 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;
    }
}

Then I did basically the same thing for the rock and the scooter, with a difference that the animation had to be infinite (including a cloud on the 'sky' that I added as decoration).

Everything was moving according to the plan. I just needed to figure out how to make the collision happen! So after a while of trying and trying, I came up with the following piece of code:

 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);

So, every 10ms it is checking if the skater is hitting (overlapping) the scooter or the rock. If so, I pause the game, update the highest score if needed, and add a "try again" button.

What did I learn

I learned a little bit about animations and @keyframes and how powerful and fun it can be. I always wondered how people make stuff on their website move! I also played a little bit with position: relative that I never used before (😱).
My plan is to keep studying it to build more complex pages. Just for fun.

Next steps for the game

The game is not finished yet. I still have loads to do. The main thing is ADD TESTS. Yeah, I haven't added tests and it sucks. I have no idea how to test what I did. I'm still trying to figure that out. If you have any suggestions, please speak up!

Features I want to add