Before you go, check out these stories!

Hackernoon logoHow I Build a Skate Game On Christmas Hackathon by@evelynstender

How I Build a Skate Game On Christmas Hackathon

Author profile picture

@evelynstenderEvelyn Stender

Brazilian living in London. Passionate about coding

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

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


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

        if (scooterLeft < 50 && scooterLeft > 0 && !this.skaterDown) {
          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

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

You can play the game here. I deployed using Vercel.

You can check out the Github repo here.


Please add me suggestions on how to improve my code, new features I can add, etc! You can reach out to me on Twitter or just open an issue on Github!

Previously published at


Join Hacker Noon

Create your free account to unlock your custom reading experience.