I made a skate game to study CSS [Christmas Hackathon]
Tags: css, javascript, vue, skateboard
Published: 2021-01-01 07:24:20

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](https://townhall.hashnode.com/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:

```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:

```javascript
 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**
- Add ollie and crashing sounds
- Add a nice background for the playground
- Make the rocks and scooters more intelligent
- Find/create better icons

## The game

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609267900157/SKrJ5LWiy.png)

You can play the game  [here](https://skateboard-game.vercel.app/). I deployed using Vercel.

You can check out the Github repo [here](https://github.com/evelynstender/skateboard-game).


## Notes
Please add me suggestions on how to improve my code, new features I can add, etc! You can reach out to me on [Twitter](https://twitter.com/evelynstender_) or just open an issue on Github!