asteroid pong

the prototype · late 2024

asteroid pongprototype

Before the bosses, the titans and the procedural music there was a Pong with asteroids built in a single HTML file. Watch it being written, then play it with frenzy mode.

Play the prototype How it was made
prototipo-2024.htmltyping…

        
The prototype running
// not running

    

  








  

    

      play it
      
The prototype, playable.

      
The same 2024 code, with frenzy mode. It works on phone, tablet and desktop.

    

    

      
prototipo-2024.htmlwith frenzy modeOpen on its own ↗

      

        
      

    

    
    
      
  • Keyboard: A/D or arrow keys to move, P to pause, Z for fullscreen.
    • 
      
  • Mouse or finger: move the bottom paddle; in two-player mode each player uses one half of the screen.
    • 
      
  • Frenzy mode shows up on its own from level 4: every hit releases three new balls for 10 seconds.
    • 
    

  






  

    

      the idea
      
A Pong that breaks and puts itself back together.

      
The starting point was simple: take the most famous game in history and ask what happens if every match gets stranger than the last. The idea has been taking shape since late 2024, and this prototype is its first playable version.

    

    

      
the baseVertical Pong
A 9:16 table made for the phone: your paddle at the bottom, the CPU (or a second player) at the top. You play with keyboard, mouse or finger.

      
the ruleThree goals per level
Three goals take you to the next level. Every goal you concede costs a life: you start with 3 (6 on easy) and can reach 7.

      
the twistEverything changes the match
Balls that split, a negative ball that inverts the colors, power-ups and, from level 7, asteroids that break pixel by pixel.

      
the toneProper arcade
The high score is saved with three letters, like in the arcades, the type is pixel art and the title changes color several times a second.

    

  






  

    

      how it was made
      
Everything drawn by hand, without a single extra file.

      
The prototype is an HTML page with a canvas. It has no images, audio files or game engine: the only things it downloads are the pixel typeface and Tone.js, the library that makes the sounds.

    

    
    
      
  1. Drawing with rectanglesPaddles, balls, hearts and the power-up letters are colored rectangles. Each asteroid is a template of little squares, and each square takes two hits before it breaks.
    2. 
      
  2. Sounds that are synthesizedThere are no audio files: every hit, goal or power-up is a Tone.js synthesizer, with square and triangle waves and pink or brown noise for crashes and explosions.
    3. 
      
  3. Difficulty from formulasThe ball’s speed is a fraction of the screen’s width and height that shrinks level by level (faster on hard), and the CPU reacts a little better every level. That way it feels the same on any screen.
    4. 
    

    
Details you can see in the code

    
    
      
  • The background is a field of slowly falling stars, and now and then Ursa Minor and Ursa Major drift by, drawn with dots.
    • 
      
  • The ball leaves a particle trail and every hit bursts into colored pixels.
    • 
      
  • When a ball splits, the new one comes out in another color; if two balls collide, the screen flashes.
    • 
      
  • If your ball hits two different balls in a row, you earn an extra life: that is the combo.
    • 
      
  • From level 5 the giant ball can show up, and from level 7, the asteroids.
    • 
    

  






  

    

      the prototype in play
      
The prototype, in play.

      
Recorded from the original code, untouched, with a bot moving the paddle. Pick a moment or let it run.

    

    

      

        
A level 1 match in the prototype

        
        
      

      
    
        
    2. 
        
    3. 
        
    4. 
        
    5. 
        
    6. 
        
    7. 
      

    

  






  

    

      power-ups
      
Nine little cubes that flip the match.

      
Every so often one appears on the table and leaves on its own after 8 seconds if you don’t grab it. Most last 10 seconds.

    

    

      
    
        
  • E
    ExtendPaddle ×1.5
    • 
        
  • D
    Super extendPaddle ×2
    • 
        
  • G
    Giant paddlePaddle ×2.5
    • 
        
  • ♥
    Extra life+1 life (or +250 points if you already have 7)
    • 
        
  • X2
    Double pointsEverything is worth double
    • 
        
  • B
    BombEvery ball explodes and new ones appear
    • 
        
  • BIG
    Giant ballFrom level 5
    • 
        
  • X2P
    Double paddleA second paddle higher up
    • 
        
  • MAG
    MagnetSticks up to 3 balls to the paddle
    • 
      

      

        
The prototype’s nine power-ups on the table, each with its own color and letter

        
All nine, together for the photo.

      

    

  






  

    

      from prototype to rhythm game
      
Every hit was already a note.

      
The prototype has no music, but its sound was already designed like an instrument: the player’s goal is a C major chord, starting a match and clearing a level also ring out as chords, and every paddle hit plays a different C or G. A game that sounds as you play it is the seed of what came next.

    

    
    
      
  1. late 2024The prototype
    Vertical Pong in a single file, with power-ups, splitting balls, pixel asteroids and sounds synthesized with Tone.js.
    2. 
      
  2. afterwardsThe table goes 3D
    The game is rebuilt with three.js: a neon view, a pixel-art retro view, bosses every five levels, giants and titans.
    3. 
      
  3. afterwardsSound becomes music
    The prototype’s effects grow into an engine that composes in real time, genre by genre, and sets the game’s tempo: the music, the effects and even the vibration follow the beat. Read the engine case study →
    4. 
      
  4. today · version 0.8.39Asteroid Pong: Beatwave Edition
    A rhythmic arcade Pong for the web, Android and Android TV. The web demo can be played right now.
    5. 
    

    

      Play the demo
      Game wiki →
    

  






  

    

      what lives on
      
What made it from the prototype into the game.

    

    

      
mechanicsPower-ups
The lettered cubes that flip the match are still at the heart of the game, now alongside drones, meteors, black holes and portals. See the mechanics →

      
lookBlock asteroids
The block asteroids from the prototype’s level 7 are still in today’s matches, and the retro view goes back to the pixel art of that first drawing.

      
modesOne player and two players
The CPU at the top or a second player, just like on day one.

      
pacingLevels that speed up
A difficulty of your choice and a curve that rises level by level: the idea that every match should be a little more intense than the last was born here.

    

  





FAQ
Frequently asked questions
What was the Asteroid Pong prototype?
The Asteroid Pong prototype is the first playable version of the game, built in late 2024 in a single HTML file: a vertical Pong with pixel asteroids, power-ups, splitting balls and synthesized sounds.
Can I play the prototype?
Yes. You can play it right on this page, in the browser of a phone, tablet or computer, with keyboard, mouse or touch, and you can open it fullscreen.
What was it made with?
With HTML, JavaScript and a 2D canvas, with no images or audio files: everything is drawn with rectangles and the 25 sounds are synthesized with Tone.js.
What is the prototype’s frenzy mode?
A 10-second mode in which every paddle hit releases three new balls (up to 14), you lose no lives and the asteroids and power-ups disappear. In this demo it is recreated on top of the prototype’s engine; it shows up on its own from level 4.
How does it relate to the current game?
Asteroid Pong: Beatwave Edition grew out of this idea. It keeps the power-ups, the block asteroids, the two-player mode and the rising difficulty, and adds 3D, bosses, titans and procedural music.




  

    

      credits
      
The original file, untouched.

    

    

      
Game idea, design and direction: Daniel J. Campos Lozada, who publishes as NoamDan, in Buenos Aires.

      
The prototype’s code is kept unchanged in the project repository. The screenshots and GIFs were recorded from that file in a browser, with a bot moving the paddle and the sound muted.