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'); };
