Frog start

Trying to get a frogger game working

by scotp71

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

<div class="frog">Frog</div>
<br/>
<br/>
<br/>
<br/>
<input type="button" value="Begin" id="begin" />

CSS

.frog { 
  float: left;
  background: green; 
  margin: 10px auto 0; 
  width: 30px; 
  height: 18px; 
  color: white; 
  font-size: 12px; 
  border: 1px solid #000000; 
  text-align: center; 
  position: absolute; 
}

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 orangeRectangle = 
 {
    x: 200,
    y: 200,
    xstep: 0,
    ystep: 4,
    width: 20,
    height: 20,
     movement: 'y',
    borderWidth: 1,
    borderColor: 'black',
    fillColor: 'orange', 
    currentColor: 'orange' 
};

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] = jQuery.extend({},orangeRectangle);
rectangles[0].x = 100;
rectangles[0].y = 70;
rectangles[1] = jQuery.extend({},orangeRectangle);
rectangles[1].x = 150;
rectangles[1].y = 145;
rectangles[2] = jQuery.extend({},orangeRectangle);
rectangles[2].x = 200;
rectangles[2].y = 23;
rectangles[3] =...