1
resposta

Jogo com mais carros, movimento lateral do personagem e checagem de colisão das bordas

Olá pessoal. Iniciei semana passada os estudos aqui na Alura e fui fazendo o código conforme demonstrado, mas resolvi implementar algumas coisas a mais (pelo menos do que foi mostrado no bloco 1). Coloquei o restante dos carros com posições inciais diferentes, movimento do personagem para esquerda e direita e checagem de colisão do ator com as bordas das telas. Tentei implementar já a checagem de colisão com carros mas não estava satisfatória, então apaguei por hora. Segue meu código até então, caso tenham mais alguma sugestão, agradeço

//variaveis imagens
let imagemDaEstrada;
let imagemCarro1;
let imagemCarro2;
let imagemCarro3;
let imagemAtor1;

//variaveis posição
let xAtor1 = 100;
let yAtor1 = 366;
let xCarro1 = 450;
let yCarro1 = 50;
let yCarro2 = 100;
let xCarro2 = 200;
let xCarro3 = 50;
let yCarro3 = 220;
let velocidadeCarro = 2;


function preload(){
  imagemDaEstrada = loadImage ("imagens/estrada.png");
  imagemCarro1 = loadImage ("imagens/carro-1.png");
  imagemCarro2 = loadImage ("imagens/carro-2.png");
  imagemCarro3 = loadImage ("imagens/carro-3.png");
  imagemAtor1 = loadImage ("imagens/ator-1.png");
}

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

}

function draw() {
  background(imagemDaEstrada);
  mostraAtor();
  mostraCarro();
  movimentaCarro();
  movimentaAtor();
  verificaColisaoBorda();


}
function mostraAtor(){
   image (imagemAtor1, xAtor1, yAtor1, 30, 30);

}
function mostraCarro(){
    image (imagemCarro1, xCarro1, yCarro1, 50, 30);
   if (xCarro1 < 0){
    xCarro1 = 600
  }
   image (imagemCarro2, xCarro2, yCarro2, 50, 30);
  if (xCarro2 < 0){
    xCarro2 = 600
  }
  image (imagemCarro3, xCarro3, yCarro3, 50, 30);
  if (xCarro3 < 0){
    xCarro3 = 600
  }

}
function movimentaCarro(){
  xCarro1 -= velocidadeCarro;
  xCarro2 -= velocidadeCarro;
  xCarro3 -= velocidadeCarro;
}
function movimentaAtor(){
  if (keyIsDown (UP_ARROW)){
    yAtor1 -= 2
  }
  if (keyIsDown (DOWN_ARROW)){
    yAtor1 += 2
  }
  if (keyIsDown ((RIGHT_ARROW))){
    xAtor1 += 2
  }
    if (keyIsDown ((LEFT_ARROW))){
    xAtor1 -= 2
  }
}
function verificaColisaoBorda(){
  if (yAtor1 < 5){
    yAtor1 = 5
  }
  if (yAtor1 > 366){
    yAtor1 = 366
  }
  if (xAtor1 < 5){
    xAtor1 = 5
  }
  if (xAtor1 > 470){
    xAtor1 = 470
  }
}
1 resposta

Oi Izabella, tudo bem? Espero que sim!

Antes de mais nada, peço desculpas pela demora em obter uma resposta!

Fico feliz que tenha conseguido além de aplicar os códigos apresentados pelo instrutor, tenha feito implementações para deixar seu jogo ainda mais completo. Parabéns pelo esforço e dedicação!

Ao longo das aulas o instrutor vai mostrar que separar os códigos de cada elemento é uma opção que facilita a organização e compreensão do layout e dos códigos que se tornam mais complexos.

Se por ventura se sentir confortável em compartilhar seu conhecimento, interagir com outros estudantes, trocar experiências e fazer networking, sugiro que participe do discord de alunas e alunos:

Caso surjam dúvidas, estarei à disposição para te ajudar :)

Grande abraço e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software