SOURCE

function Box(x,y,width,height,color){
    this.x = x||0;
    this.y = y||0;
    this.width = width||80;
    this.height = height||40;
    this.color = color||'red';
    this.vx = 0;
    this.vy = 0;
}
Box.prototype={
    stroke:function(cxt){
        cxt.save()
        cxt.strokeStyle=this.color
        cxt.beginPath();
        cxt.rect(this.x,this.y,this.width,this.height);
        cxt.closePath();
        cxt.stroke()
        cxt.restore()
    },
    fill:function(cxt){
        cxt.save()
        cxt.fillStyle=this.color
        cxt.beginPath();
        cxt.rect(this.x,this.y,this.width,this.height);
        cxt.closePath();
        cxt.fill()
        cxt.restore()
    }
}

function getRandomColor(){
    return '#'+
    (function (color){
        return (color+='0123456789abcdef'[Math.floor(Math.random()*16)])
            && (color.length==6)?color:arguments.callee(color);
    })('');
}

function checkRect(rectA,rectB){
    return !(rectA.x+rectA.width<rectB.x ||
        rectB.x+rectB.width<rectA.x ||
        rectA.y+rectA.height<rectB.y ||
        rectB.y+rectB.height<rectA.y);
}

function createBox(){
    var x = Math.random()*c.width;
    var y = 0;
    var width = Math.random()*40+10;
    var height = Math.random()*40+10;
    var color = getRandomColor();
    var box = new Box(x,y,width,height,color)
    return box;
}

var c = document.getElementById("canvas");
var cxt = c.getContext("2d");

function normal(){
    cxt.clearRect(0,0,c.width,c.height);
    var boxes=[];
    var activeBox = createBox();
    var vy =2;

    (function frame(){
        window.requestAnimationFrame(frame);
        cxt.clearRect(0,0,c.width,c.height);
        activeBox.y +=vy;
        if(activeBox.y>c.height-activeBox.height){
            activeBox.y = c.height - activeBox.height;
            activeBox = createBox();
            boxes.push(activeBox);
        }
        boxes.forEach(function(box){
            if(activeBox!==box&& checkRect(activeBox,box)){
                activeBox.y = box.y - activeBox.height;
                activeBox = createBox()
                boxes.push(activeBox);
            }
            box.fill(cxt)
        });
    })();  
}

function keymode(){
    cxt.clearRect(0,0,c.width,c.height);
    var boxes=[];
    var activeBox = createBox();
    var vy =1.5;

    window.addEventListener('keydown',function(e){
        if(e.keyCode==39||e.keyCode==68){//"right"
            activeBox.x+=10;
        }else if(e.keyCode==40||e.keyCode==83){//"down"
            activeBox.y+=5;
        }else if(e.keyCode==37||e.keyCode==65){//"left"
            activeBox.x-=10;    
        }else{
            
        }
    },false);

    (function frame(){
        window.requestAnimationFrame(frame);
        cxt.clearRect(0,0,c.width,c.height);
        activeBox.y +=vy;
        if(activeBox.y>c.height-activeBox.height){
            activeBox.y = c.height - activeBox.height;
            activeBox = createBox();
            boxes.push(activeBox);
        }
        boxes.forEach(function(box){
            if(activeBox!==box&& checkRect(activeBox,box)){
                activeBox.y = box.y - activeBox.height;
                activeBox = createBox()
                boxes.push(activeBox);
            }
            box.fill(cxt)
        });
    })();
}


    

<canvas id="canvas" width="500" height="350" style="border:1px solid #000"></canvas>
<p><button onclick="normal()">普通效果</button></p>
<p><button onclick="keymode()">键盘方向效果</button></p>