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
