Ir ao conteúdo
  • Cadastre-se
Guilherme89756

Javascript Colisão em html usando canvas

Recommended Posts

Estou desenvolvendo um jogo em html, preciso fazer a colisão do personagem, como faço isso? 

 

Codigo:

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>JOGO</title>
	<style>
		canvas {
			position: absolute;
			top: 0px;
			bottom: 0px;
			left: 0px;
			right: 0px;
			margin: auto;
		}
	</style>
</head>
<body> 
	<script>  
		var canvas, ctx, ALTURA, LARGURA, frames = 0, maxTiros = 5, _obsimg = new Image(), velocidade = 6, estadoAtual, pontos = 0,

		estados = {
			jogar: 0,
			jogando: 1,
			perdeu: 6,


		},

		bloco = {
		 	x: 275,
		 	y: 500,
		 	altura: 50,
		 	largura: 50,
		 	cor: "#ff4e4e",
		 	gravidade: 0.25,
		 	velocidade: 0,
		 	qntTiros: 0,

		 	desenha: function() {
		 		ctx.fillStyle = this.cor;
		 		ctx.fillRect(this.x, this.y, this.largura, this.altura);
		 	},

		 	atira: function() {
		 		if(this.qntTiros < maxTiros){
		 			this.qntTiros++;
		 		};
		 	}
		 };

		obstaculos = {
		 		_obs: [],
		 		tempo: 0,
		 		largura: 43,
		 		altura: 35,
		 		
		 		insere: function(){
		 			this._obs.push({
		 				y: 0,
		 				x: Math.floor(Math.random() * 550),
		 			});

		 			this.tempo = 30 + Math.floor(10 * Math.random());
		 		},

		 		atualiza: function(){
		 			if(this.tempo == 0){
		 				this.insere();
		 			}else 
		 				this.tempo--;

		 			for(var i = 0, tam = this._obs.length; i < tam; i++){
		 				var obs = this._obs[i];

		 				obs.y += velocidade;

		 				if(bloco.x < obs.x - obs.largura){
		 				
		 					estados.jogando++;
		 					pontos++;
		 					alert('bateu');
		 					if(estados.jogando == 6){
							estadoAtual = estados.perdeu;
		 					}

						}else if(obs.y >= 600 ){
		 					this._obs.splice(i, 1);
		 					tam--;
		 					i--;
		 				}
		 			}
		 		},

		 		limpa: function(){
		 			this._obs = [];
		 		},

		 		desenha: function(){
		 			for(var i = 0, tam = this._obs.length; i < tam; i++){
		 				var obs = this._obs[i];
		 				_obsimg.src = "obstaculo.png";
		 				ctx.drawImage(_obsimg, obs.x, obs.y);
		 				

		 			}
		 		},
		 	};

		function clique(event) {
			if(estadoAtual == estados.jogando){

			}
			else if(estadoAtual == estados.jogar){
				estadoAtual = estados.jogando;
			}
			else if(estadoAtual == estados.perdeu){
				estadoAtual = estados.jogar;
			}
		}

		function main() {
			ALTURA = window.innerHeight;
			LARGURA = window.innerWidth;

			if (LARGURA >= 500) {
				LARGURA = 600;
				ALTURA = 600;
			}

			canvas = document.createElement("canvas");
			canvas.width = LARGURA;
			canvas.height = ALTURA;
			canvas.style.border = "1px solid #000";

			ctx = canvas.getContext("2d");
			document.body.appendChild(canvas);
			document.addEventListener("mousedown", clique);

			estadoAtual = estados.jogar;
			roda();
		} 

		function roda() {
			atualiza();
			desenha();

			window.requestAnimationFrame(roda);
		}

		function atualiza() {
			frames++;
			if(estadoAtual == estados.jogando){
				obstaculos.atualiza();

			}else if(estadoAtual == estados.perdeu){
					obstaculos.limpa();
			}

		}

		function desenha() {
			ctx.fillStyle = "#50beff";
			ctx.fillRect(0, 0, LARGURA, ALTURA);
			

			if(estadoAtual == estados.jogar){
				ctx.fillStyle = "green";
				ctx.fillRect(LARGURA / 2 - 50, ALTURA / 2 - 50, 100, 100);
			}
			else if(estadoAtual == estados.perdeu){
				ctx.fillStyle = "red";
				ctx.fillRect(LARGURA / 2 - 50, ALTURA / 2 - 50, 100, 100);
			}
			else if(estadoAtual == estados.jogando){
				obstaculos.desenha();
			}


			if(bloco.x >= -5 && bloco.x <= 555 && bloco.y >= 0 && bloco.y <= 550){
				bloco.desenha();
        	}else alert('aqui');
		}

		window.onkeydown = pressionaTecla; 
        function pressionaTecla(tecla){
			if(tecla.keyCode == 39  ) {
				bloco.x = bloco.x + 10; 
			}
			if(tecla.keyCode == 37  ) {
				bloco.x = bloco.x - 10;
			}
			
			if(tecla.keyCode == 40 ) {
				bloco.y = bloco.y + 10;
			}	
			 
			if(tecla.keyCode == 38 ) {
				bloco.y = bloco.y - 10;
			}
			if(tecla.keyCode == 32 ) {
				bloco.atira();
			}
        }
		main();
	</script>  
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Amigo, eu não li seu código inteiro.

 

Você já considerou a possibilidade de verificar a posição deles em relação à tela?

 

Tipo assim:

if (elementoA.offsetTop == elementoB.offsetTop && elementoA.offsetLeft== elementoB.offsetLef) {
	//Código
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, mas eu não sei aonde eu coloco isso, porque coloquei o código da parte do script inteiro ai dentro e deu erro e o jogo nem funcionou... Eu coloquei marcações no código pra ficar mais fácil de entender ele, se puder dar uma olhada.. (Meu problema e na parte aonde esta escrito "aqui era para ser feito a colisão", eu escrevi aquele bloco.x... etc, mas n sei se esta certo e é ai que esta o problema... o restante eu não marquei com anotação porque não e relevante, e so para o jogo funcionar.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>JOGO</title>
	<style>
		canvas {
			position: absolute;
			top: 0px;
			bottom: 0px;
			left: 0px;
			right: 0px;
			margin: auto;
		}
	</style>
</head>
<body> 
	<script>  
		var canvas, ctx, ALTURA, LARGURA, frames = 0, maxTiros = 5, _obsimg = new Image(), velocidade = 6, estadoAtual, pontos = 0,
		
		//estados do jogo
		estados = {
			jogar: 0,
			jogando: 1,
			perdeu: 2,


		},
		
		//quadrado que o jogador controla
		bloco = {
		 	x: 275,
		 	y: 500,
		 	altura: 50,
		 	largura: 50,
		 	cor: "#ff4e4e",
		 	gravidade: 0.25,
		 	velocidade: 0,
		 	qntTiros: 0,
			
			//desenha o quadrado
		 	desenha: function() {
		 		ctx.fillStyle = this.cor;
		 		ctx.fillRect(this.x, this.y, this.largura, this.altura);
		 	},
			
			//quadrado atira(ainda nao funciona)
		 	atira: function() {
		 		if(this.qntTiros < maxTiros){
		 			this.qntTiros++;
		 		};
		 	}
		 };
		
		//obstaculos gerados aleatoriamente
		obstaculos = {
		 		_obs: [],
		 		tempo: 0,
		 		largura: 43,
		 		altura: 35,
		 		
				//adiciona um objeto com x aleatorio no vetor
		 		insere: function(){
		 			this._obs.push({
		 				y: 0,
		 				x: Math.floor(Math.random() * 550),
		 			});

		 			this.tempo = 30 + Math.floor(10 * Math.random());
		 		},
				
				//controla o tempo de spawn do objeto
		 		atualiza: function(){
		 			if(this.tempo == 0){
		 				this.insere();
		 			}else 
		 				this.tempo--;
					
					//controle do vetor para controlar os objetos
		 			for(var i = 0, tam = this._obs.length; i < tam; i++){
		 				var obs = this._obs[i];

		 				obs.y += velocidade;
						
						//aqui era para ser feita a detecção da colisao
		 				if(bloco.x < obs.x - obs.largura){
							
							//quando o jogador colidir com o objeto era para somar +1 ate o total de 6,
							//quando fosse 6 ele mudaram o estado atual para perdeu e assim iria terminar o jogo,
							//porém não sei como faço para o jogador colidir com o objeto
		 					estados.jogando++;
		 					pontos++;
		 					alert('bateu');
							estados.jogando();
		 					if(estados.jogando == 6){
							estadoAtual = estados.perdeu;
		 					}
						//aqui e feita a remoção do objeto do vetor quando passa da area maxima do canvas
						}else if(obs.y >= 600 ){
		 					this._obs.splice(i, 1);
		 					tam--;
		 					i--;
		 				}
		 			}
		 		},

		 		limpa: function(){
		 			this._obs = [];
		 		},

		 		desenha: function(){
		 			for(var i = 0, tam = this._obs.length; i < tam; i++){
		 				var obs = this._obs[i];
		 				_obsimg.src = "obstaculo.png";
		 				ctx.drawImage(_obsimg, obs.x, obs.y);
		 				

		 			}
		 		},
		 	};

		function clique(event) {
			if(estadoAtual == estados.jogando){

			}
			else if(estadoAtual == estados.jogar){
				estadoAtual = estados.jogando;
			}
			else if(estadoAtual == estados.perdeu){
				estadoAtual = estados.jogar;
			}
		}

		function main() {
			ALTURA = window.innerHeight;
			LARGURA = window.innerWidth;

			if (LARGURA >= 500) {
				LARGURA = 600;
				ALTURA = 600;
			}

			canvas = document.createElement("canvas");
			canvas.width = LARGURA;
			canvas.height = ALTURA;
			canvas.style.border = "1px solid #000";

			ctx = canvas.getContext("2d");
			document.body.appendChild(canvas);
			document.addEventListener("mousedown", clique);

			estadoAtual = estados.jogar;
			roda();
		} 

		function roda() {
			atualiza();
			desenha();

			window.requestAnimationFrame(roda);
		}

		function atualiza() {
			frames++;
			if(estadoAtual == estados.jogando){
				obstaculos.atualiza();

			}else if(estadoAtual == estados.perdeu){
					obstaculos.limpa();
			}

		}

		function desenha() {
			ctx.fillStyle = "#50beff";
			ctx.fillRect(0, 0, LARGURA, ALTURA);
			

			if(estadoAtual == estados.jogar){
				ctx.fillStyle = "green";
				ctx.fillRect(LARGURA / 2 - 50, ALTURA / 2 - 50, 100, 100);
			}
			else if(estadoAtual == estados.perdeu){
				ctx.fillStyle = "red";
				ctx.fillRect(LARGURA / 2 - 50, ALTURA / 2 - 50, 100, 100);
			}
			else if(estadoAtual == estados.jogando){
				obstaculos.desenha();
			}


			if(bloco.x >= -5 && bloco.x <= 555 && bloco.y >= 0 && bloco.y <= 550){
				bloco.desenha();
        	}else alert('aqui');
		}

		window.onkeydown = pressionaTecla; 
        function pressionaTecla(tecla){
			if(tecla.keyCode == 39  ) {
				bloco.x = bloco.x + 10; 
			}
			if(tecla.keyCode == 37  ) {
				bloco.x = bloco.x - 10;
			}
			
			if(tecla.keyCode == 40 ) {
				bloco.y = bloco.y + 10;
			}	
			 
			if(tecla.keyCode == 38 ) {
				bloco.y = bloco.y - 10;
			}
			if(tecla.keyCode == 32 ) {
				bloco.atira();
			}
        }
		main();
	</script>  
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, agora deu pra entender melhor.

 

Você vai ter que colocar essa verificação no seu evento keydown.

 

Depois que você movimentar seu bloco, você terá que chamar uma função que faz um loop no seu array de obstáculos e verifica se algum deles tem a mesma posição que o bloco.

 

Acho que você vai ter que tirar a função atualiza do seu objeto e colocar ela separada.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×