Multiplos canvas javascript

[Monzo]

Gente, boa tarde.

To bolando um game em javascript com o canvas e to com uma dúvida que é a parte final do game.

Preciso gerar blocos (27 em largura e 10 ou 12 em altura) que tem 30w e 20h.

O problema esta que, eu já tenho 2 objetos na minha canvas, uma barra e uma bola, sempre que eu crio dois objetos bloco, a bola n anda ou tudo some..
Vou deixar o codigo do java aqui.. queria ver como gerar os blocos dinamicamente na tela, ou seja.. 270 blocos multiplicados e n um por um no codigo fonte..

Segue o codigo:

 

        var cnv = document.getElementById('canvas').getContext('2d')
        //Liga o game completo;
        cnv.fillRect(0, 0, canvas.width, canvas.height);
            // representar o tamanho máximo da tela onde movimenta os quadrados
            var w = 810;
            var h = 500;
            // Aqui cria as arrays que irão armazenar a posição dos quadrados (importante)
            var x = 390;
            var y = 300;
            // Aqui representará a velocidade dos nossos quadrados
            var vel = 15;
            
            var id;
            
            //Registro de game pause ou load game;
            var gameload = false;
                        
        //Da partida ao motor em 24frames por segundo
        function loading(){ 
            id = window.setInterval(motor, 1000/60)
        };
        
        function bloco(x, y){
            this.x = x;
            this.y = y;
            this.w = 30;
            this.h = 20;
            this.color;
            this.colorcont = 0;
        };
        
        bloco.prototype.render = function(context){
            context.fillStyle = this.color;
            context.fillRect(this.x, this.y, this.w, this.h);    
        };
        
        bloco.prototype.colors = function(){
            var colors = Math.floor(Math.random()*70+1);
            if((colors > 0) && (colors < 10) && this.colorcont == 0){ 
                this.color = '#6B6B6B';
                this.colorcont = 1;
            }
            if((colors < 10) && this.colorcont == 0){ 
                this.color = '#FFFFFF';
                this.colorcont = 1;
            }
            if((colors > 10 && colors < 20) && this.colorcont == 0){ 
                this.color = '#415FAC';
                this.colorcont = 1;
            }
            if((colors > 20 && colors < 30) && this.colorcont == 0){ 
                this.color = '#91CE9E';
                this.colorcont = 1;
            }
            if((colors > 30 && colors < 40) && this.colorcont == 0){ 
                this.color = '#E4E881';
                this.colorcont = 1;
            }
            if((colors > 40 && colors < 50) && this.colorcont == 0){ 
                this.color = '#EACC80';
                this.colorcont = 1;
            }
            if((colors > 50 && colors < 60) && this.colorcont == 0){ 
                this.color = '#EAA480';
                this.colorcont = 1;
            }
            if((colors > 60 && colors < 70) && this.colorcont == 0){ 
                this.color = '#CD87BA';
                this.colorcont = 1;
            }
        };
        
        var bloco = new bloco(0,0);
        
        
        //Dados da barra que segura a bola
        function barra(x, w, h){
            this.x = x;
            this.y = 426;
            this.w = w;
            this.h = h;
            this.color = "#0D8961";
        };
        //Renderiza a barra
        barra.prototype.render = function(context){
            context.fillStyle = this.color;
            context.fillRect(this.x, this.y, this.w, this.h);    
        };
        //Adiciona o movimento a variavel x de barra
        barra.prototype.move = function(pos){
            if(pos < canvas.width - this.w){
                this.x = pos;
            }
            if(pos > 0){
                this.x = pos;
            }
        };
        //Cria o objeto barra no sistema
        var barra = new barra(350,100,20);
        //Dados da bola seguindo os padrões
        function bola(x, y, raio, vel){
            this.x = x;
            this.y = y;
            this.raio = raio;
            this.vel = vel;
            this.color = "white";
            this.dirx = this.vel;
            this.diry = this.vel;
        };
        //Renderiza a bola
        bola.prototype.render = function(context){
            context.beginPath();
            context.arc(this.x,this.y,this.raio,0,2*Math.PI);
            context.fillStyle = this.color;
            context.fill();
            context.closePath();
            
        };
        //Cria o movimento diagonal da bola
        bola.prototype.move = function(){
            //Lado Esquerdo da tela
            if(this.x < 10 && this.diry > 0) this.dirx = -this.dirx;
            if(this.x < 10 && this.diry < 0) this.dirx = -this.dirx;
            //Topo da tela
            if(this.y < 10 && this.dirx > 0) this.diry = -this.diry;
            if(this.y < 10 && this.dirx < 0) this.diry = -this.diry;
            //Lado direito da tela
            if(this.x > canvas.width - this.raio*2 && this.diry > 0) this.dirx = -this.dirx;
            if(this.x > canvas.width - this.raio*2 && this.diry < 0) this.dirx = -this.dirx;
            //Baixo da tela
            if(this.y > 450 - this.raio*2 && this.dirx > 0){
                 lifePoint(); 
                 this.x = 350;
                 this.y = 400;
                 this.diry = -this.diry;
            }
            if(this.y > 450 - this.raio*2 && this.dirx < 0){
                 lifePoint();
                 this.x = 350;
                 this.y = 400;
                 this.diry = -this.diry;
            }
            
            
            if(bola.y + (bola.raio*2) == barra.y &&
               bola.x < barra.x + barra.w &&
               bola.x + (bola.raio*2) > barra.x){
                    if((this.dirx > 0) || (this.dirx < 0)) this.diry = -this.diry;
            }
            if(bola.y + (bola.raio*2) > barra.y &&
               bola.x < barra.x + barra.w &&
               bola.x + (bola.raio*2) > barra.x){
                    if((this.dirx > 0) || (this.dirx < 0)) this.diry = -this.diry;
            }
            this.x += this.dirx;
            this.y -= this.diry;
        };
        //Cria o objeto bola no sistema
        var bola = new bola(350, 400, 5, 5)

        //Renderiza todo o conteudo visual
        function render(){
            //cria os objetos
            barra.render(cnv);
            bola.render(cnv);
            
        };
        //Chama os movimentos
        function move(){
            barra.move();
            bola.move();
            
            
        };
        //Blocos
        function blocoMotor(){
            bloco.colors();
            bloco.render(cnv);
        };
        //motor do game
         function motor(){
            //apaga a tela
            cnv.clearRect(0, 0, canvas.width, canvas.height);
            render();
            move();
            blocoMotor();
            
        };
        
        
        //Captura o movimento x do mouse
        function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
        };
        };
        //Cria o movimento x da barra a partir do mouse
        document.addEventListener('mousemove', function(evt) {
        var mousePos = getMousePos(canvas, evt);
        var PosX = 350;
        if(mousePos.x < 750){
                var PosX = mousePos.x - 50;
        }
        if(mousePos.x > 50){
                var PosX = mousePos.x - 50;
        }
        if(mousePos.x < 50){
                var PosX = 0;
        }
        if(mousePos.x > 750){
                var PosX = 710;
        }
        barra.move(PosX);
          }, false);
        
        //Controle de teclas para pause e load game
        document.onkeydown = startGame;
        function startGame(evt){
            //Tecla espaço keycode 32 inicia o game
            if(evt.keyCode == '32' && gameload == false){
                gameload = true;
                loading();    
            }
            //Tecla p keycode 80 pausa o game
            if(evt.keyCode == '80'){
                window.clearInterval(id);
                gameload = false;
            }
        };
        
        //Controle de life point
        function lifePoint(){
            alert('derrota');
        };

Editado Agosto 24, 2015 por Monzo
gramatica