Solucionado (ver solução)
Solucionado
(ver solução)
13
respostas

A colisão não funciona

A colisão do personagem ocorre antes de tocar no carro, o carro está na faixa de cima do meu personagem e ainda sim acontece a colisão.

código:

let colisao = false;

function mostraAtor(){

image(imagemDoAtor, xAtor, yAtor, 50, 50); function verificaColisao(){ //collideRectCircle(x1, y1, width1, height1, cx, cy, diameter) for (let i = 0; i < imagemCarros.length; i = i + 1){ colisao = collideRectCircle(xCarros[i], yCarros[i], comprimentoCarro, alturaCarro, xAtor, yAtor, 25) if (colisao){ colidiu(); print("colidiu") } } }

function colidiu(){ yAtor = 360; }

aqui está apenas uma parte do código.

13 respostas

Oi, Mateus

informe o link

Aqui está o código completo.

function setup() { createCanvas(500, 400); }

function draw() { background(imagemDaEstrada); mostraAtor(); mostraCarro(); movimentaCarro(); movimentaAtor(); voltaPosiçãoInicialDoCarro(); verificaColisao(); }

//imagens do jogo

let imagemDaEstrada; let imagemDoAtor; let imagemDoCarro; let imagemDoCarro2; let imagemDoCarro3;

function preload(){ imagemDaEstrada = loadImage("Imagens/Estrada.png"); imagemDoAtor = loadImage("Imagens/CapivaraMato.png"); imagemDoCarro = loadImage("Imagens/Carro1.png"); imagemDoCarro2 = loadImage("Imagens/Carro2.png"); imagemDoCarro3 = loadImage("Imagens/Carro3.png"); imagemCarros = [imagemDoCarro,imagemDoCarro2, imagemDoCarro3] }

// código do carro

let xCarros = [600, 600, 600]; let yCarros = [36, 92, 140]; let velocidadeCarros = [2, 2.5, 3.2]; let comprimentoCarro = 100; let alturaCarro = 100;

function mostraCarro(){ for (let i = 0; i < imagemCarros.length; i = i + 1){ image(imagemCarros[i], xCarros[i], yCarros[i], comprimentoCarro, alturaCarro); } }

function movimentaCarro(){ for (let i = 0; i < imagemCarros.length; i = i + 1){ xCarros[i] -= velocidadeCarros[i]; } }

function voltaPosiçãoInicialDoCarro(){ for (let i = 0; i < imagemCarros.length; i = i + 1){ if(passouTodaATela(xCarros[i])){ xCarros[i] = 600; } } }

function passouTodaATela(xCarro){ return xCarro < -80; }

//código do ator

let xAtor = 100; let yAtor = 360; let colisao = false;

function mostraAtor(){ image(imagemDoAtor, xAtor, yAtor, 50, 50); }

function movimentaAtor(){ if (keyIsDown(UP_ARROW)){ yAtor -= 3; } if (keyIsDown(DOWN_ARROW)){ yAtor += 3; } }

function verificaColisao(){ //collideRectCircle(x1, y1, width1, height1, cx, cy, diameter) for (let i = 0; i < imagemCarros.length; i = i + 1){ colisao = collideRectCircle(xCarros[i], yCarros[i], comprimentoCarro, alturaCarro, xAtor, yAtor, 25) if (colisao){ colidiu(); print("colidiu") } } }

function colidiu(){ yAtor = 360; }

Olá, tudo bem?

Testei seu código e percebi que o diâmetro que acusa a colisão está alto, sendo ele o número "25":

colisao = collideRectCircle(xCarros[i], yCarros[i], comprimentoCarro, alturaCarro, xAtor, yAtor, 25)

Coloquei em "15" e funcionou perfeitamente, acusando a colisão só quando realmente "encosta" no carro.

Espero ter ajudado! :)

Oi também não funcionou eu até tentei usar números mais baixos como "2" e mesmo assim ainda não está funcionando corretamente será que pode ser o "collide" que esteja errado?

//collideRectCircle(x1, y1, width1, height1, cx, cy, diameter)

Aqui está as imagens usadas para fazer o projeto:

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Mateus

informe o link

Aqui está o link.

https://editor.p5js.org/mateusvolek/sketches/8s4OAckG3

Mateus, vc deveria corrigir sua figura

Existe muito espaço ente a figura e borda da imagem

Sua figura

Como deveria ser

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Oi Luis me desculpe perguntar mas como faço para mudar o espaço da borda? Ou é apenas salvar a imagem que você mandou?

Isso. Salve a imagem q eu mandei e troque pela q está no jogo

Esta é a imagem

Oi troquei a imagem mais ainda não está funcionando

O mesmo está acontecendo com os carros

Área ocupada pelo carro Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Use os carros fornecidos pelo curso

Clique no link para fazer download do material fornecido pelo curso.

Após trocar as imagens dos carros, faça os ajustes de tamanho e posição

Carro.js


// código do Carro

let xCarros = [600, 600, 600];
let yCarros =  [40, 95, 150]; // alterado de [36, 92, 140] para [40, 95, 150]
let velocidadeCarros = [2, 2.5, 3.2];
let comprimentoCarro = 50; // alterado de 100 para 50
let alturaCarro = 40; // // alterado de 100 para 40

function mostraCarro(){
  for (let i = 0; i < imagemCarros.length; i = i + 1){
    image(imagemCarros[i], xCarros[i], yCarros[i], comprimentoCarro, alturaCarro);
 }
}

function movimentaCarro(){
  for (let i = 0; i < imagemCarros.length; i = i + 1){
    xCarros[i] -= velocidadeCarros[i];
  }
}

function voltaPosiçãoInicialDoCarro(){
  for (let i = 0; i < imagemCarros.length; i = i + 1){
    if(passouTodaATela(xCarros[i])){
    xCarros[i] = 600;
    }
  }
}

function passouTodaATela(xCarro){
  return xCarro < -80;
}

Ator.js


// código do Ator

let xAtor = 100;
let yAtor = 365; // alterado de 360 para 365
let colisao = false;

function mostraAtor(){
  image(imagemDoAtor, xAtor, yAtor, 30, 30); // alterado de 35 para 30 (largura, altura)
}

function movimentaAtor(){
  if (keyIsDown(UP_ARROW)){
    yAtor -= 3;
  }
  if (keyIsDown(DOWN_ARROW)){
    yAtor += 3;
  }
}

function verificaColisao(){
  //collideRectCircle(x1, y1, width1, height1, cx, cy, diameter)
  for (let i = 0; i < imagemCarros.length; i = i + 1){
     colisao = collideRectCircle(xCarros[i], yCarros[i], comprimentoCarro, alturaCarro, xAtor, yAtor, 15) // alterado de 2 para 15 (metade da altura do Ator)
    if (colisao){
      colidiu();
      print("colidiu")
    }
  }
}

function colidiu(){
  yAtor = 365; // alterado de 360 para 365
}
solução!

Lembre-se de modificar o nome das imagens do Caros


// imagens do jogo

let imagemDaEstrada;
let imagemDoAtor;
let imagemDoCarro;
let imagemDoCarro2;
let imagemDoCarro3;

function preload(){
  imagemDaEstrada = loadImage("Imagens/Estrada.png");
  imagemDoAtor = loadImage("Imagens/Capivara123.png");
  imagemDoCarro = loadImage("Imagens/carro-1.png"); // nome modificado
  imagemDoCarro2 = loadImage("Imagens/carro-2.png"); // nome modificado
  imagemDoCarro3 = loadImage("Imagens/carro-3.png"); // nome modificado
  imagemCarros = [imagemDoCarro,imagemDoCarro2, imagemDoCarro3]
}

Veja como ficou https://editor.p5js.org/santosdias/sketches/OEjSyNRJu

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!