Javascript Colisão em html usando canvas

MarkZ029 · 18 de outubro de 2018

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>

makotsunami · 18 de outubro de 2018

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
}

MarkZ029 · 18 de outubro de 2018

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>

makotsunami · 19 de outubro de 2018

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.