Alright, let me tell you about this little thing I put together, called it “domball”. It wasn’t anything groundbreaking, just me messing around one weekend.
Getting Started
So, I had this idea, right? Just wanted to see if I could make a little ball bounce around the screen using basic web stuff. No fancy libraries, just plain old JavaScript and HTML DOM manipulation. Seemed simple enough at first.
I started by throwing together a really basic HTML file. Literally just the bare minimum. Then I added a single div element. Gave it an ID, something like ‘ball’, you know? Styled it up a bit with CSS – made it round, gave it a color, set its position to absolute so I could move it around freely.
Making it Move
Next up was the JavaScript part. First thing, I grabbed that ‘ball’ element using . Easy peasy. Then came the moving part. My first thought was just using setInterval. I wrote a little function that would update the ball’s top and left style properties every few milliseconds.
And yeah, it moved! But it looked kinda jittery, not smooth at all. I remembered reading somewhere that requestAnimationFrame was better for animations. So, I ripped out the setInterval stuff and rewrote the animation loop using requestAnimationFrame. That definitely made it smoother, much better on the eyes.
Adding the Bounce
Okay, so the ball was moving, but it would just fly off the screen. Not much of a “domball” if it just disappears. I needed it to bounce off the edges.
This involved getting the window’s width and height. Then, inside my animation loop, I added checks. If the ball’s position (plus its size, gotta account for that) went past the window edge, I just reversed its direction. For example, if it hit the right edge, I’d make its horizontal speed negative. Same logic for the left, top, and bottom edges.
- Get window dimensions.
- Get ball’s current position and size.
- Check if ball hits left/right edge. If yes, reverse horizontal speed.
- Check if ball hits top/bottom edge. If yes, reverse vertical speed.
- Update ball’s position based on speed.
Getting the exact conditions right took a bit of fiddling. Sometimes the ball would get stuck or go slightly past the edge before bouncing. Had to tweak the boundary checks a little bit here and there.
Wrapping Up
And… that was pretty much it. I had a little colored circle bouncing around the browser window, all controlled by basic JavaScript interacting with the DOM. Didn’t add gravity or anything more complex, kept it simple. Performance seemed okay, probably because it was so basic.
It was a fun little exercise. Reminded me how much you can actually do with just the fundamentals. Didn’t turn into some big project, just this little “domball” experiment. Good way to spend an afternoon, you know, just tinkering and seeing what happens. Nothing fancy, but it worked.
