If you remember the old-school DVD screensaver that used to bounce around and change color when it hit the corner of the screen, you’ll love this little nostalgic yet technically clean web project: dvd-pong
🎯 What is it?
A simple yet captivating physics simulation: A DVD logo bounces around the edges of the screen, changing color when it hits a corner. Fully runs in the browser with no external dependencies.
🧰 Technologies Used:
- HTML5
- Vanilla JavaScript
- requestAnimationFrame & basic collision physics
- Responsive layout (works on all screen sizes)
🧠What Can You Learn?
How to build a basic 2D physics loop
Creating smooth animations with Canvas
Generating random colors and interacting with the DOM
dvd-pong
🔧 Code Style:
The code is written to be clean and readable, with comments for clarity. Ideal as a reference for beginner-level developers looking to understand canvas-based animation.
🪄 Why I Built It:
It was part nostalgia, part learning exercise. I believe small, focused projects like this can open big doors. It’s a playful way to explore canvas rendering and animation logic from scratch.
📦 GitHub Repository:
🔗 github.com/akbak/dvd-pong
by Muhammet Ali AKBAK
Top comments (0)