DEV Community

cutieyunny-tech
cutieyunny-tech

Posted on

Cutiesy Cookies: My First Dev Project

I made a little game, and I'd love for you to play it

The Goal:
Catch as many cookies as you can.

How to Play:

You'll see a pink bar at the bottom of the screen. This is your paddle.

Cookies will start to fall from the top of the screen.

Use your finger to slide the pink bar left and right.

Try to make the falling cookies hit the pink bar. When they do, you get points!

Be careful! If a cookie falls past your pink bar, you lose a point.

That's it! It's meant to be a simple and fun way to pass the time.

This project helped me understand a few key concepts:

HTML & CSS: I learned how to structure a game using HTML elements and make it look visually appealing with CSS properties like position: absolute and border-radius.

JavaScript: I finally wrapped my head around event listeners for user input and requestAnimationFrame for smooth animations. The hardest part was figuring out collision detection—how to tell when the paddle and the cookie were in the same place at the same time.

It's not perfect, but I'm excited about it. My next steps are to add a "game over" screen and some sound effects.

If you're also just starting out, I'd love to hear what you're working on. If you're a more experienced dev, I'd appreciate any feedback on my code!

Top comments (0)