Game test

by scotp71

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" />
<br/>
<br/>
<input type="button" value="Hop" id="hop" />
<br/>
<br/>
<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;
    }
  });

$('#hop').click(function() {
	
})

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: 0,
    width: 20,
    height: 20,
    movement: 'xy',
    borderWidth: 1,
    borderColor: 'black',
    fillColor: 'yellow', 
    currentColor: 'yellow'
};

var greenRectangle = 
 {
    x: 200,
    y: 200,
    xstep: 1,
    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: 0,
    width: 20,
    height: 20,
    movement: 'xy',
    borderWidth: 1,
    borderColor: 'black',
    fillColor: 'pink', 
    currentColor: 'pink' 
};

var blueRectangle = 
{
	x: 5,
  y: 150,
  xstep: 5,
  ystep: 0,
  width: 20,
  height: 20,
  movement: 'xy',
  borderWidth: 1,
  borderColor: 'black',
  fillColor: 'blue',
  currentColor: 'blue'
};

var bigRectangle = 
{
	x: 4,
  y: 100,
  xstep: 2,
  width: 30,
  height: 30,
  movement: 'xy',
  borderwidth: 1,
  borderColor: 'black',
  fillColor:...