Skip to content

gregwaite/Shape-Wars

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

README

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 = [
      "right",
      ["down", "right"],
      "down",
      ["down", "left"],
      "left",
      ["up", "left"],
      "up",
      ["up", "right"],

    ]
      for (let i = 0; i < 8; i++) {
          hurt.push(new Hurt({
            pos: hurtPos[i],
            vel: [0, 0],
            radius: 6,
            color: 'red',
            game: this.game,
          }));
      }
    hurt.forEach( (circ, i) => {
      circ.draw();
      if (directions[i] instanceof Array) {
        circ[directions[i][0]] = true;
        circ[directions[i][1]] = true;
      } else {
        circ[directions[i]] = true;
      }
      this.game.hurtCircs.push(circ);
    });
  }

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published