181 reads

How I Build a Skate Game On Christmas Hackathon

by Evelyn StenderJanuary 3rd, 2021

Too Long; Didn't Read

Brazilian Evelyn Stender built a skateboard game on Christmas Hackathon. The game is a work in progress and he's aware that he could've done it in different (and better) ways. Every 10ms it is checking if the skater is hitting (overlapping) the rock or the scooter or the rock. If so, the game updates the highest score if needed, and add a "try" button. I pause every 10ms to learn about how to make the game more complex.

Companies Mentioned

featured image - How I Build a Skate Game On Christmas Hackathon

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:

1. I added a div with

id = skater

2. 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