Multiple objects with canvas

Asked

Viewed 183 times

1

Guys, I couldn’t find a post like this. So send me the link if you find one.

With a huge problem, I am creating a game of those that the ball has to break squares on the screen and I have everything ready, except the squares to be broken.

My problem is that I create a block object with the block data. And when I do:

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

I create a block on the screen, but when I make another block, I can’t. Or when the var has a different block name.

I tried to:

var bloco2 = new bloco.constructor();

but I don’t know where to insert the object parameters (posx e posy);

Does anyone know how to help me? I have to do some 270 and I can’t do it manually because they appear randomly on the screen.

Objects are in the context of a canvas 2d.

javascript canvas

  • Hello Ramon, welcome to Stackoverflow. You could make a Fiddle with the example cited so that we can stay more in the context?

  • The link https://jsfiddle.net/n58pkm02is here/

  • It didn’t have to be the whole game, my friend, just the part where you’re in trouble.

  • For no doubt I put all the code, because it has a sequence of "loops" to show and interact with the elements, I thought that the error could n be only in the object, but in other elements as well. but the error is in the "block" object.. I want to throw several of it.. colors will be random, punctuation and other elements will do after you can generate the "copies" of the block

  • after you are ready let me know I want to play!!! rsrsrs

  • Thanks Galera.. I’ve managed to make all the blocks appear, inserting them in an array. Now each has its own ways and everything else. Thanks!

Show 1 more comment

1 answer

0

I’ll show you how to color the first "line" of blocks and based on this makes how many lines the game will actually have, then you take a look at the logic and build them right with function, class I don’t know the methodology to use in them.

<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>

Browser other questions tagged javascript canvas

You are not signed in. Login or sign up in order to post.