Skip to content
No description, website, or topics provided.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Shape Wars

Shape Wars live

Background and overview

Shape Wars is an upscrolling wave game where the player is a red circle.

When the circle is hit by any other shape it decreases the size of the circle. When the circle is hit by other circles it increases the size of the circle.

Functionality and MVP Features

In Str8 Blobbin users will be able to:

  • Play as many waves as you can make it to, with left, right, up and down inputs
  • Waves increasing number and speed of obstacles and health
  • Start, restart the game

Architecture and Technologies

  • Vanilla JavaScript for overall structure and game logic,

  • HTML5 Canvas for DOM manipulation and rendering,

  • Web Audio API for sound generation, processing and control. WebAudioAPI allows for simultaneous sounds with more dependable time triggering

  • Webpack to bundle and serve up the various scripts.

    Bonus features:

  • Difficulty settings

  • Attacks for the blob--blob attacks that the blob attacks with

  • Scoring--gain points for acquiring health and destroying enemies, lose points for getting hit

  • Multiplayer--either two blobs on one screen or two screens with competing blobs--score would have to be implemented for the latter

  • Other power ups, speed, armor, attacks, etc

  • Dynamic sound speed increase/decrease

    This code draws the damage animation, and, once you lose, the animation above. I filter out the damage circles that go off screen to prevent slowdown (before filtering, the number of dots drawn quickly reached over 25,000)

  damageAnimation() {
    let hurt = [];
    let diff;
    if (Math.floor(Math.random() * 2) === 0) {
      diff = 1;
    } else {
      diff = 5;
    const hurtPos = [
      [this.pos[0] + diff, this.pos[1]],
      [this.pos[0] + diff, this.pos[1] + diff],
      [this.pos[0], this.pos[1] + diff],
      [this.pos[0] - diff, this.pos[1] + diff],
      [this.pos[0] - diff, this.pos[1]],
      [this.pos[0] - diff, this.pos[1] - diff],
      [this.pos[0], this.pos[1] - diff],
      [this.pos[0] + diff, this.pos[1] - diff],
    const directions = [
      ["down", "right"],
      ["down", "left"],
      ["up", "left"],
      ["up", "right"],

      for (let i = 0; i < 8; i++) {
          hurt.push(new Hurt({
            pos: hurtPos[i],
            vel: [0, 0],
            radius: 6,
            color: 'red',
    hurt.forEach( (circ, i) => {
      if (directions[i] instanceof Array) {
        circ[directions[i][0]] = true;
        circ[directions[i][1]] = true;
      } else {
        circ[directions[i]] = true;
You can’t perform that action at this time.