Simple Rectangle Game

A simple game that uses the animation of rectangles.

by davidjb95

HTML

<canvas width="400" height="400" id="myCanvas"></canvas>
<br/>
The object of this game is to get the yellow and pink ball to the red target area as many times as possible. If the yellow or pink rectangle hits a gree rectangle they will transport back to the start and the green rectangle will change direction. Clicking on any rectangle will cause it to change direction.<br/>
<input type="button" value="Begin" id="begin" />
<div id="pinkscore"></div>
<div id="yellowscore"></div>

JavaScript

//Added for iPad to capture click and touch
$('#myCanvas').bind("click tap", function(e){
    var offsetX = $('#myCanvas').offset().left;
    var offsetY = $('#myCanvas').offset().top;
    
   mouseClicked(e.pageX - offsetX , e.pageY - offsetY);
}); 

var timer = -1;
$('#begin').click(function() {
    if (timer == -1)
    {
       timer = window.setInterval(callAnimation, 30);
    }
    else
    {
        window.clearInterval(timer);
        timer = -1;
    }
  });

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

var step = 2;
var yellowScore = 0;
var pinkScore = 0;
var yellowRectangle = {
    x: 2,
    y: 200,
    xstep: 2,
    ystep: -1,
    width: 20,
    height: 20,
    movement: 'xy',
    borderWidth: 1,
    borderColor: 'black',
    fillColor: 'yellow', 
    currentColor: 'yellow'
};

var greenRectangle = 
 {
    x: 200,
    y: 200,
    xstep: 0,
    ystep: 1,
    width: 20,
    height: 20,
     movement: 'y',
    borderWidth: 1,
    borderColor: 'black',
    fillColor: 'green', 
    currentColor: 'green' 
};

var pinkRectangle = 
 {
    x: 2,
    y: 250,
    xstep: 2,
    ystep: 1,
    width: 20,
    height: 20,
    movement: 'xy',
    borderWidth: 1,
    borderColor: 'black',
    fillColor: 'pink', 
    currentColor: 'pink' 
};

var rectangles = new Array();
rectangles[0] = yellowRectangle;
rectangles[1] = pinkRectangle;
rectangles[2] = jQuery.extend({},greenRectangle);
rectangles[2].x = 200;
rectangles[3] = jQuery.extend({},greenRectangle);
rectangles[3].x = 250;
rectangles[4] = jQuery.extend({},greenRectangle);
rectangles[4].x = 300;
rectangles[5] = jQuery.extend({},greenRectangle);
rectangles[5].x =...