Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
92 lines (63 sloc) 2.48 KB

Shaq Free Throw Challenge

screen shot

Demo

Shaw Free Throw Challenge

Description

A javscript based game where you help Shaquille O'Neal improve his career 52.7% free throw average. Make sure to hit the spacebar at the right power level!

Technologies

Used Easel.js with Canvas to draw images and Matter.js as the physics engine.

Some Interesting Features

Scoring A Basket

Located a coordinate under the rim that would only catch successful shots and checked to see if that point overlapped any area belonging to a ball.

  step () {
    //Checks to see if ball exists
    if (this.ballArray.length > 0) {
    
    //Iterates over all balls
      for (let i = 0; i < this.ballArray.length; i++) {
        
        //Checks to see if area of ball contains x,y point directly below rim
        if (this.physics.Matter.Bounds.contains(this.ballArray[i].body.bounds, {x: 420, y: 265})) {
          
          //Checks to see if ball was already counted
          if (!this.basketsMade.includes(this.ballArray[i].body.id)) {
            this.basketsMade.push(this.ballArray[i].body.id);
          }
        }
      }
    }
  }

Power Meter

Created a power meter using HTML5 meter element. Used setInterval to update the value of the meter element every 10ms. Each iteration checked to see if the meter should be increasing or decreasing.

          function powerMeter(){
            let up = true;
            
            setInterval(() => {
            
            //checks to see if interval should be counting up
            	if (up) {
            		power++;
            		if (power === 100) {
            			up = false;
            		}
            	} else {
            		power --;
            		if (power === 0) {
            			up = true;
            		}
            	}
              //sets value of power meter
              $(".powerMeter").val( power );
              
              //sets value of baskets scored
              $("#score").val(hoop.basketsMade.length);
              
              //sets value of remaining baskets
              $("#remaining").text(basketCount());
            }, 10 );
          }

Future Features

  • Add basketball sprite image to ball and display rotational angle supplied by matter.js engine.
  • Add animation for Shaq prior to shooting ball.

To Play Locally

$ npm install
$ npm run watch