Falling sqare test 1

by mnk

HTML

<canvas id="stage"></canvas>

CSS

body{
    overflow: hidden;
    background-color: white;
}

JavaScript

// shim layer with setTimeout fallback 
requestFrame = (function(){ 
  return  window.requestAnimationFrame       ||  
          window.webkitRequestAnimationFrame ||  
          window.mozRequestAnimationFrame    ||  
          window.oRequestAnimationFrame      ||  
          window.msRequestAnimationFrame     ||  
          function( callback ){ 
              window.setTimeout(callback, 1000 / 60); 
          }; 
})();

var gameOver = false;

var canvas = document.getElementById('stage');
canvas.width = 800;
canvas.height = 600;
var c = canvas.getContext('2d'); 

var particles = [];
var colors = ["fdb638","a1a1a1","29b5a0","f0f0f0","646464"];
var nbrParticles = 75;

var generateRandomNumber = function(max){
    return Math.floor(Math.random() * max) + 1;
};

var draw = function(){
    c.clearRect(0,0, canvas.width, canvas.height);
    for(var i = 0; i < particles.length; i++){
        var p = particles[i];
        c.fillStyle = p.color;
        c.fillRect(p.x,p.y,p.size,p.size);
    }
    c.fill();
};

var create = function(){
    if (particles.length < nbrParticles){
        particles.push(createParticles());
    }
};

var update = function(){
    for(var i = 0; i < particles.length; i++){
        var p = particles[i];
        if (p.born != 0){
            p.x += p.size;
            p.y += p.size;
        }
        p.born++;
    }
};

var createParticles = function(){
    var pos1 = particles.length % 2 ? generateRandomNumber(canvas.width) : 0;
    var pos2 = pos1 != 0 ? 0 : generateRandomNumber(canvas.height);
    
    return {x: generateRandomNumber(pos1), 
            y: generateRandomNumber(pos2),
            size: generateRandomNumber(20), 
            color: colors[generateRandomNumber(colors.length)-1],
            born: 0};
};

var replaceParticles = function(){
    for(var i = 0; i < particles.length; i++){
        if (particles[i].y > canvas.height){
            particles.splice(i, 1);
        }
    }
};    

function gameLogik() {
   ...