Pixel UI/Games & sound/Breakout

Breakout

Your words are the bricks. Press play and the text becomes a level.

<piix-breakout>DOM + canvas

Pointer or arrow keys move, Space launches.

Break every word in this heading

And this line too, if you can.

<piix-breakout pal="bitbug">
  <h2 class="ex-h2">Break every word in this heading</h2>
  <p>And this line too, <b data-solid>if</b> you can.</p>
</piix-breakout>

Ball & paddle

Speed

Lives

Whatever you put inside stays normal, readable content until someone presses Play. Then every word becomes a brick right where it sits: a ball comes off a paddle with a pal riding it, and each word it hits shatters into pixels of its own colour and is gone from the page. Clear them all to win; lose every ball and the words fly back into place. Words inside an element with data-solid are steel: the ball bounces off them, but they never break.

Installation

<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

<!-- just breakout (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/bitbug.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/breakout.min.js"></script>

npm install piixpal

// once, in your entry file
import "piixpal";

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-breakout pal="bitbug">
      <h2 className="ex-h2">Break every word in this heading</h2>
      <p>And this line too, <b data-solid>if</b> you can.</p>
    </piix-breakout>
  );
}

Usage

<piix-breakout pal="bitbug">
  <h2 class="ex-h2">Break every word in this heading</h2>
  <p>And this line too, <b data-solid>if</b> you can.</p>
</piix-breakout>

Examples

A whole section

Bold, links and different sizes all become bricks of their own colour.

Changelog

Faster builds, smaller bundles

Cold starts are 3× quicker, and the core is now 29 KB gzipped.

<piix-breakout pal="kitty" tone="coral" field="170">
  <p><b>Changelog</b></p>
  <h2 class="ex-h2">Faster builds, <a href="#">smaller bundles</a></h2>
  <p>Cold starts are <b>3× quicker</b>, and the core is now 29 KB gzipped.</p>
</piix-breakout>

React to the score

Every brick, win and loss is an event.

Clear this line to unlock a coupon

<piix-breakout id="game" pal="none" tone="sky">
  <h3 class="ex-h3">Clear this line to unlock a coupon</h3>
</piix-breakout>

<script>
  game.addEventListener('win', e => game.querySelector('h3').textContent = 'Unlocked: PIXEL20');
</script>

API reference

Attribute	What it does	Default
`pal`	the pal riding the paddle, or `none`	`bitbug`
`lives`	balls you get	`3`
`speed`	how fast the ball is, 0.5 to 2	`1`
`tone`	`lime` `coral` `violet` `sky` `sun` `mint` `ink` `paper`	`lime`
`field`	room under the words for the paddle, in px	`150`
`sound`	make sounds even without `<piix-chiptune>`; `off` keeps it silent	–
`data-solid`	on any element inside: its words are steel and never break	–

Events

Event	When
`start`	a game begins
`brick`	a word breaks: `detail.word`, `detail.score`
`win`	every word is gone: `detail.score`
`lose`	the last ball is lost: `detail.score`

Methods

Method	What it does
`play()`	start a new game
`pause()`	pause it
`reset()`	put every word back and stop

Accessibility

The content is never replaced: screen readers read your words as normal, even mid-game.
Fully keyboard playable: Space launches, arrow keys or A/D move, Escape pauses.
Lives, misses and the final score are announced.
With reduced motion, fewer pixels fly when a word breaks.