JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="canvas" width="640" height="480">
No Canvas Support!
</canvas>
<div id="score">Escaped Balls: <span><strong></strong></span></div>
JavaScript
$(function() {
var canvas = document.getElementById("canvas");
var liveBalls = new Array();
var escapedCount = 0;
function createBall() {
// create the ball image
image = new Image();
image.src = 'http://dl.dropbox.com/u/19593893/CDN/ball.png';
// push a new ball object into the liveBalls array
liveBalls.push({ image: image,
x: Math.floor(Math.random()*580),
y: 640,
index: 0,
speed: Math.floor(Math.random()*5) });
}
function draw() {
// get the context we are going to draw to
var context = canvas.getContext('2d');
// clear the context to make sure we have a clean canvas
context.clearRect(0, 0, 640, 480);
// set the beatiful beach background
var background = new Image();
background.src = 'http://dl.dropbox.com/u/19593893/CDN/beach.jpg';
// draw the background to the canvas
context.drawImage(background, 0, 0, 640, 480);
// keep track of our escaped balls with this array
var escapedBalls = new Array();
// for each of our live balls, see if the ball is still on the canvas, if it is,
// move it up by the random speed of the ball.
$.each(liveBalls, function(index, value) {
this.index = index;
this.y -= this.speed;
if (this.y > -64) {
context.drawImage(this.image, this.x, this.y, 45, 45);
}
else {
// the ball is off the screen so add it to the escaped balls
// collection and increment the score
escapedBalls.push(this);
escapedCount++;
...