Skip to content

samiyaazad/BreakOut

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Apr 2, 2026
518fbb1 · · Apr 2, 2026

History

3 Commits
Apr 2, 2026
Apr 2, 2026
Apr 2, 2026
Apr 2, 2026
Apr 2, 2026
Apr 2, 2026

Repository files navigation

INTRODUCTION

I made this BreakOut game using HTML, CSS & JavaScript. It is a part of my childhood game collection.ion.

TECHNOLOGIES

            - HTML
            - CSS 
            - JavaScript
            - VS Code
de

FEATURES

        - Move the paddle left and right to keep the ball in play
        - Break blocks to earn points
        - Watch the difficulty increase as new rows generate
        - Restart the game after losing
        - Track score in real-time
ime

KEYBOARD SHORTCUTS

                 => ← Arrow Left → Move paddle left
                 => → Arrow Right → Move paddle right
                 => Space → Restart game after Game Over
ame Over
r

PROCESS I FOLLOWED TO MAKE IT

                           - HTML Setup
                           - Canvas Initialization
                           - Game Objects
                           - Game Loop
                           - Movement & Controls
                           - Collision Detection
                           - Game Logic
gic
Logic

WHAT I LEARNED

            - How to use the HTML Canvas API
            - How game loops work using requestAnimationFrame()
            - Basics of collision detection
            - Managing game state (score, reset, game over)
            - Handling user input with keyboard events
            - Structuring a project with HTML, CSS, and JavaScript
ript

HOW IT CAN BE IMPROVED

                     - Add sound effects 
                     - Add levels with increasing difficulty
                     - Improve collision accuracy (real physics feel)
                     - Add lives instead of instant Game Over
                     - Add start screen / pause feature
                     - Add mobile touch controls
                     - Add high score saving system
                     - Improve UI (animations, colors, effects)
fects)

PREVIEW

Preview.mp4

About

A simple Breakout-style game built using HTML Canvas and JavaScript, where the player controls a paddle to bounce a ball and break blocks while scoring points.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published