• Features
• Quick Start
• Repository Structure
• Versions
  • Basic Version
  • Advanced Version
• Customization
  • Using the Web Converter
  • Using the JavaScript API
  • Manual Customization
• API Documentation
  • BrickArtConverter Class
  • Configuration Options
  • Methods Reference
• Examples
• Animation Settings
• Browser Support
• Contributing
• License
• Acknowledgments

• 🎯 ASCII Brick Art - Text displayed as breakable bricks using underscore characters
• 🤖 Intelligent Paddle AI - Automatically tracks and predicts ball landing position
• ⚡ Smooth 60fps Animation - Powered by requestAnimationFrame
• 🎨 Clean Minimal Design - Elegant color scheme (#f3f3eb background, #0d0d19 elements)
• 📱 Responsive - Works on any screen size
• 🪶 Lightweight - No dependencies, pure HTML/CSS/JavaScript

• ✨ Particle Effects - Sparkles on brick breaks and paddle hits
• 🎮 Manual Control Mode - Take control by clicking paddle 3 times
• 📲 Touch Support - Full mobile device compatibility
• 🏃 Dynamic Speed - Ball speed varies on different collisions
• 🔄 Auto-Reset - Bricks respawn when ball is lost

• 🔤 Custom Text - Replace "LOADING" with any text
• 🛠️ JavaScript API - Programmatic text-to-brick conversion
• 🌐 Web Converter - Interactive tool for generating brick patterns
• ⚙️ Configurable - Adjust pixel width, spacing, colors, and more

1. Download the HTML file you want to use:

   • Basic Version - Lightweight, simple
   • Advanced Version - Full-featured

2. Include it in your project:

<iframe src="path/to/breakout-loading-basic.html" width="823" height="230" frameborder="0"></iframe>

1. Copy the contents of your chosen HTML file
2. Paste into your project
3. Customize the BRICK_ART array with your text

git clone https://github.com/melancholic-ksm/Super-Breakout-Loading-Animation..git
cd Super-Breakout-Loading-Animation.

Super-Breakout-Loading-Animation/
├── src/                              # Animation source files
│   ├── breakout-loading-basic.html   # Basic version (lightweight)
│   └── breakout-loading-advanced.html # Advanced version (full-featured)
│
├── api/                              # Customization API
│   ├── brick-art-converter.js        # JavaScript API module
│   └── text-to-brick-converter.html  # Web-based converter tool
│
├── docs/                             # Documentation
│   └── API.md                        # Detailed API reference
│
├── examples/                         # Usage examples
│   └── custom-text-example.html      # Interactive text example
│
├── assets/                           # Images and resources
│   └── loading-preview.png           # Preview image
│
├── Loading.html                      # Original basic version
├── Loadingv2.html                    # Original advanced version
├── README.md                         # This file
├── CHANGELOG.md                      # Version history
└── LICENSE                           # MIT License

File: src/breakout-loading-basic.html (or Loading.html)

Features:

• ✅ Core breakout animation
• ✅ Automatic paddle AI
• ✅ Ball physics with bouncing
• ✅ Anti-stuck deflection logic
• ✅ ~14KB file size

Best for: Simple loading screens, minimal resource usage

File: src/breakout-loading-advanced.html (or Loadingv2.html)

Features:

• ✅ All basic features
• ✅ Particle sparkle effects
• ✅ Manual control mode (3 clicks)
• ✅ Touch device support
• ✅ Dynamic speed variation
• ✅ Improved paddle AI
• ✅ Auto brick reset
• ✅ ~32KB file size

Best for: Interactive loading screens, enhanced visual appeal

Use the interactive web tool to generate custom brick patterns:

🌐 Live Demo: https://melancholic-ksm.github.io/super-breakout-loading-animation./api/

1. Open the Text-to-Brick Converter in your browser
2. Enter your custom text (e.g., "HELLO WORLD")
3. Click Render to preview
4. Click Copy JS Array to copy the generated code
5. Replace the BRICK_ART array in your animation file

Supported Characters:

• Letters: A-Z (case insensitive)
• Numbers: 0-9
• Symbols: ! @ # $ % ^ & * ( ) _ - + = { } [ ] : ; " ' < , > . ? /

Use the JavaScript API for dynamic text conversion:

🔗 API URL: https://melancholic-ksm.github.io/super-breakout-loading-animation./api/brick-art-converter.js

// Import from the live API
import { BrickArtConverter } from 'https://melancholic-ksm.github.io/super-breakout-loading-animation./api/brick-art-converter.js';

// Create converter
const converter = new BrickArtConverter();

// Convert text to brick art
const brickArt = converter.convert('MY TEXT');

// Or get as JavaScript array literal
const jsArray = converter.toJsArray('MY TEXT');
console.log(jsArray);

Quick Functions:

import { quickConvert, quickConvertToJs } from 'https://melancholic-ksm.github.io/super-breakout-loading-animation./api/brick-art-converter.js';

// One-liner conversion
const art = quickConvert('HELLO');
const jsCode = quickConvertToJs('HELLO');

1. Open your chosen animation file
2. Locate the BRICK_ART array:

const BRICK_ART = [
    `__              ______        ______      ________        ______      __      __      ________`,
    `__            __      __    __      __    __      __        __        ____    __    __        `,
    // ... more rows
];

3. Replace with your custom pattern using:
   • __ for filled brick pixels
   • (two spaces) for empty pixels

The main class for converting text to brick art patterns.

const converter = new BrickArtConverter(options);

For complete API documentation, see docs/API.md.

<!DOCTYPE html>
<html>
<head>
    <title>Loading...</title>
</head>
<body>
    <!-- Include the animation directly -->
    <iframe src="src/breakout-loading-basic.html" 
            width="823" height="230" 
            frameborder="0">
    </iframe>
</body>
</html>

<script type="module">
// Import from the live API
import { BrickArtConverter } from 'https://melancholic-ksm.github.io/super-breakout-loading-animation./api/brick-art-converter.js';

const converter = new BrickArtConverter();
const BRICK_ART = converter.convert('WELCOME');

// Use BRICK_ART in your animation...
</script>

See examples/custom-text-example.html for a full interactive example with live text input.

Requirements:

• HTML5 Canvas support
• ES6 JavaScript (for API)
• Modern CSS

Contributions are welcome! Here's how you can help:

1. Check existing issues first
2. Create a new issue with:
   • Browser and version
   • Steps to reproduce
   • Expected vs actual behavior
   • Screenshots if applicable

1. Open an issue describing the feature
2. Explain the use case
3. Discuss implementation approach

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Test thoroughly
5. Commit with clear messages
6. Push to your fork
7. Open a Pull Request

• Use consistent indentation (4 spaces)
• Add comments for complex logic
• Follow existing naming conventions
• Test in multiple browsers

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2025 Harsh Maybe

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

• Inspired by the classic Super Breakout arcade game by Atari
• ASCII art rendering techniques
• HTML5 Canvas API