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 . What an opportunity! Hashnode Christmas Hackathon 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( );
    width: px;
    height: px;
    background-size: px;
    top: px;
    position: relative;
}

.ollie { : ollie s linear;
}

@keyframes ollie { % { : px;
        background-image: url( );
        display: none;
    } % { : px;
        background-image: url( );
    } % { : px;
        background-image: url( );
    } % { : px;
        background-image: url( );
    } % { : px;
        background-image: url( );
        display: none;
    }
} "../../assets/skater.png" 60 60 60 190 animation 0.5 0 top 190 "../../assets/skater-ollie.png" 30 top 160 "../../assets/skater-ollie.png" 50 top 80 "../../assets/skater-ollie.png" 80 top 175 "../../assets/skater-ollie.png" 100 top 190 "../../assets/skater-ollie.png" 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). infinite 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( { skateTop = ( .getComputedStyle( .skater).getPropertyValue( )); rockLeft = ( .getComputedStyle( .rock).getPropertyValue( )); scooterLeft = ( .getComputedStyle( .scooter).getPropertyValue( )); (rockLeft < && rockLeft > && skateTop >= ) { .pause(); .collidedRock = ;
        } (scooterLeft < && scooterLeft > && ! .skaterDown) { .pause(); .collidedScooter = ;
        }
      }, ); => () let parseInt window this "top" let parseInt window this "left" let parseInt window this "left" //collisions //rock if 50 0 175 this this true //scooter if 50 0 this this this 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 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 that I never used before (😱). animations @keyframes position: relative 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 . 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! TESTS 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 . I deployed using Vercel. here You can check out the Github repo . here Notes Please add me suggestions on how to improve my code, new features I can add, etc! You can reach out to me on or just open an issue on Github! Twitter Previously published at https://blog.evelynstender.com/i-made-a-skate-game-to-study-css-christmas-hackathon

Google

Twitter

How I Build a Skate Game On Christmas Hackathon

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How To Yield Generators (Javascript)

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

How To Yield Generators (Javascript)

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps