1

Galera, não encontrei post igual.. então mandem o link se acharem um.

To com um enorme problema, estou criando um game daqueles que a bolinha tem que quebrar quadrados na tela e ja tenho tudo pronto, menos os quadrados a serem quebrados.

Meu problema é que crio um objeto bloco com os dados do bloco. E quando eu faço:

var bloco = new bloco(posiçãox,posiçãoy) 

eu crio um bloco na tela, mas quando faço outro bloco, não consigo. Ou quando o var tem um nome diferente de bloco.

Tentei:

var bloco2 = new bloco.constructor(); 

mas n sei onde inserir os parametros do objeto (posx e posy);

Alguem sabe como me ajudar? Tenho que fazer uns 270 e não dá pra fazer manualmente pq eles aparecem de forma aleatória na tela.

Os objetos estão no contexto de um canvas 2d.

6
  • Olá Ramon, bem vindo ao Stackoverflow. Você poderia fazer um Fiddle com o exemplo citado para podermos ficar mais por dentro do contexto? Commented 26/08/2015 às 23:51
  • Aqui esta o link jsfiddle.net/n58pkm02
    – Ramon Lago
    Commented 27/08/2015 às 0:19
  • Não precisava ser o jogo todo meu amigo, apenas o trecho em que está com problemas. Commented 27/08/2015 às 0:21
  • pra não ter dúvidas coloquei o código todo, porque tem uma sequencia de "loops" para mostrar e interagir com os elementos, pensei que o erro pudesse n ser só no objeto, mas em outros elementos também. mas o erro esta no objeto "bloco".. quero lançar varios iguais a ele.. as cores serão aleatórias, a pontuação e outros elementos farei depois que conseguir gerar as "copias" do bloco
    – Ramon Lago
    Commented 27/08/2015 às 0:37
  • depois que estiver pronto me avisa que quero jogar!!! rsrsrs Commented 27/08/2015 às 12:56

1 Resposta 1

0

vou mostrar como colorir a primeira "linha" de blocos e com base nesse faz quantas linhas o jogo for ter realmente, depois você da uma olhada na lógica e constrói eles direitinho com função, classe sei lá a metodologia que for usar neles.

<style>
    *{ margin:auto;}
hr{width:100%; opacity:0.3;}
#topo{
	margin-bottom:1px;
    width:810px;
    height:80px;}
#scoretable{
    background-color:#23B361;
    float:left;
    width:610px;
    height:inherit;}
#marca{ 
    width:160px;
    height:inherit;
    float:left;}
#score{ 
    width:440px;
    height:inherit;
    float:right;}
#menubt{
    background-color:#23B361;
    float:right;
    width:198px;
    height:inherit;
    border:#FFF solid 1px;}
#menubt p{
    color:#FFF;
    text-align:center;
    margin-top:15px;
    font-size:38px;}
#bg{
    background-color:#2F2F2F;
    width:810px;
    height:500px;}
#gamearea{
    width:810px;
    height:450px;}
#blocarea{
    margin-bottom:-250px;
    width:inherit;
    height:250px;}
</style>
<body>
<nav id="topo">
    <div id="scoretable">
        <div id="marca">
        <!--<img src="http://i.imgur.com/oeof5Of.png" widht='160' height='80'>-->
        </div>
        <div id="score"></div>
    </div>
    <div id="menubt">
    <p>MENU</p>
    </div>
</nav>
<div id="bg">
    <div id="gamearea">
        <div id='blocarea'></div>
        <canvas id='canvas' width=810 height=500></canvas>
    </div>
    <hr>
</div>
    <script>
        		//Inicio do código do canvas da tela
		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;
			
			
		//Menus
		
		
		
		//Funções do game loop			
		//Da partida ao motor em 24frames por segundo
		function loading(){ 
			id = window.setInterval(motor, 1000/60);
			gameload = true;
		};
		function bloco(x, y){                        
			this.x = x;
			this.y = y;
			this.w = 30;
			this.h = 20;
			this.color;
			this.colorcont = 0;
			var indice = 0;
		};
		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;
			}
		};
		bloco.prototype.render = function(){
                        cnv.beginPath(); 
			cnv.fillStyle = this.color;
			cnv.fillRect(this.x, this.y, this.w, this.h);
		};
                
               /* criarBlocos=function(){
                    var tam = 0;
                    for( var i=0; i <= 27; i++){ // canvas com width 810, bloco tem 30 então são 27 por linha
                        var bloco = new bloco(tam,0);                                          
                        bloco.render();
			bloco.colors();
                        tam += 30;
                    }
                };*/
		
                var tam = 0;
                for( var i=0; i <= 27; i++){ // canvas com width 810, bloco tem 30 então são 27 por linha
                    var b = new bloco(tam,0);                                          
                    b.colors();            
                    b.render();                    
                    tam += 30+1;
                }
		//var bloco = new bloco(0,0);
		//var bloco2 = new bloco.constructor();
		
		//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.velx = this.vel;
			this.vely = this.vel;
			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
			//Morte da bola
			if(this.y > 450 - this.raio*2 && this.dirx > 0){
				//função de registro de lifepoint
				 lifePoint(); 
				 this.x = 350;
				 this.y = 400;
				 this.diry = -this.diry;
			}
			//Morte da bola
			if(this.y > 450 - this.raio*2 && this.dirx < 0){
				//função de registro de lifepoint
				 lifePoint();
				 this.x = 350;
				 this.y = 400;
				 this.diry = -this.diry;
			}
			//Contato com a barra
			//Contato Topo
			if(bola.y + (bola.raio*2) > barra.y &&
			   bola.y + (bola.raio*2) < barra.y + 5 &&
			   bola.x < barra.x + barra.w &&
			   bola.x + (bola.raio*2) > barra.x){
				   if (this.dirx > 0){
						if (this.x > 0 && this.x < barra.x + 20){ 
							this.dirx = this.vel + this.vel/2;
							this.diry = this.vel - (this.vel*60/100);	
						}
						if(this.x > barra.x + 20 && this.x < barra.x + 40){
							this.dirx = this.vel;
							this.diry = this.vel  - (this.vel*40/100);						
						}
						if(this.x > barra.x + 40 && this.x < barra.x + 50){
							this.dirx = this.vel - this.vel/2;
							this.diry = this.vel;				
						}
						if(this.x > barra.x + 50 && this.x < barra.x + 60){
							this.dirx = this.vel - this.vel/2;
							this.diry = this.vel;	
						}
						if(this.x > barra.x + 60 && this.x < barra.x + 80){
							this.dirx = this.vel;
							this.diry = this.vel - (this.vel*40/100);	
						}
						if (this.x > barra.x + 80 && this.x < barra.x + barra.w){ 
							this.dirx = this.vel + this.vel/2;
							this.diry = this.vel - (this.vel*60/100);	
						}
				   }
				   if (this.dirx < 0){
					   
				   		if (this.x > 0 && this.x < barra.x + 20){ 
							this.dirx = -(this.vel + this.vel/2);
							this.diry = (this.vel - (this.vel*60/100));
							
						}
						if(this.x > barra.x + 20 && this.x < barra.x + 40){
							this.dirx = -this.vel;
							this.diry = (this.vel  - (this.vel*40/100));
									
						}
						if(this.x > barra.x + 40 && this.x < barra.x + 50){
							this.dirx = -(this.vel - this.vel/2);
							this.diry = this.vel;
												
						}
						if(this.x > barra.x + 50 && this.x < barra.x + 60){
							this.dirx = -(this.vel - this.vel/2);
							this.diry = this.vel;
							
						}
						if(this.x > barra.x + 60 && this.x < barra.x + 80){
							this.dirx = -this.vel;
							this.diry = (this.vel - (this.vel*40/100));
							
						}
						if (this.x > barra.x + 80 && this.x < barra.x + barra.w){ 
							this.dirx = -(this.vel + this.vel/2);
							this.diry = (this.vel - (this.vel*60/100));
							
						}
				   }
			}
			//Contato lateral
			if(bola.y + (bola.raio*2) > barra.y + 5 &&
			   bola.x < barra.x + barra.w &&
			   bola.x + (bola.raio*2) > barra.x){
					if (this.dirx > 0 || this.dirx < 0){ this.dirx = -this.dirx;}
					
			}
			
			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(){
                        //criarBlocos();
			
			//bloco.position();
		};
		//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){
				loading();	
			}
			//Tecla p keycode 80 pausa o game
			if(evt.keyCode == '80'){
				pause();
			}
		};
		//Pause Game
		function pause(){
			window.clearInterval(id);
			gameload = false;
		}
		//Controle de life point
		function lifePoint(){
			alert('derrota');
			bola.dirx = bola.vel;
			bola.diry = -bola.vel;
		};
    </script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .