Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Para o que serve ";" ao final no JavaScript?

Olá, pessoal.

Sou iniciante nos estudos de programação e estou adorando os cursos e a plataforma da Alura.

Realizei ambos os projetos do Pong (no Scratch e no p5.js) com sucesso, mas estou com uma dúvida (deve ser bem básica) nos códigos em Javascript.

Notei que o instrutor utiliza o ";" ao final praticamente em todas as linhas de código. Por gentileza, poderiam me explicar qual é a utilidade dessa expressão na linguagem? Em algumas linhas que escrevi, o código foi lido sem problemas sem o ";". Então gostaria de entender, é uma curiosidade mesmo. Agradeço demais quem puder me ajudar.

Abaixo segue o meu código no Pong:

// variaveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro= 15;
let raio = diametro / 2;

// variaveis velocidade da bolinha
let velocidadexBolinha = 6;
let velocidadeyBolinha = 6;

// variaveis raquete
let xRaquete=5;
let yRaquete=150;
let raqueteComprimento=10;
let raqueteAltura=90;

// variaveis Oponente
let xRaqueteOponente=585;
let yRaqueteOponente=150;
let velocidadeYOponente;

// variaveis placar do jogo
let meusPontos = 0;
let pontosDoOponente = 0;

// variaveis sons do jogo
let ponto;
let raquetada;
let trilha;

// sons do jogo
function preload(){
  trilha = loadSound("trilha.mp3");
  ponto = loadSound("ponto.mp3");
  raquetada = loadSound("raquetada.mp3");
}

// criar o palco e cor do BG
function setup() {
  createCanvas(600, 400);
  trilha.loop()
}

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete(xRaquete,yRaquete);
  mostraRaquete(xRaqueteOponente,yRaqueteOponente)
  movimentaMinhaRaquete();
  movimentaRaqueteOponente();
  verificaColisaoRaquete();
  verificaColisaoRaqueteOponente();
  incluiPlacar()
  marcaPonto()
}

function mostraBolinha(){
  circle(xBolinha, yBolinha, diametro);
}

function movimentaBolinha(){
  xBolinha += velocidadexBolinha;
  yBolinha += velocidadeyBolinha;
}

function verificaColisaoBorda(){
  if (xBolinha + raio > width ||
   xBolinha - raio < 0){
  velocidadexBolinha *= -1;}
if (yBolinha + raio > height ||
   yBolinha - raio < 0){
  velocidadeyBolinha *= -1;}
}

function mostraRaquete(x,y){
  rect(x,y, raqueteComprimento, raqueteAltura)
}


function movimentaMinhaRaquete() {
    if (keyIsDown(UP_ARROW)) {
        yRaquete -= 10;
    }
    if (keyIsDown(DOWN_ARROW)) {
        yRaquete += 10;
    }

    // Vamos limitar a movimentação da raquete para que ela não ultrapasse as bordas:
    yRaquete = constrain(yRaquete, 10, 300);
}


function verificaColisaoRaquete() {	
    if (xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio < yRaquete + raqueteAltura && yBolinha + raio > yRaquete){
      velocidadexBolinha *= -1
      raquetada.play();
    }    
}

function verificaColisaoRaqueteOponente() {	
    if (xBolinha + raio > xRaqueteOponente && yBolinha + raio < yRaqueteOponente + raqueteAltura && yBolinha + raio > yRaqueteOponente){
      velocidadexBolinha *= -1
      raquetada.play();
    }    
}


function movimentaRaqueteOponente() {
    velocidadeYOponente = yBolinha - yRaqueteOponente - raqueteComprimento / 2 - 100; // dificuldade do jogo > mais fácil, < mais difícil
    yRaqueteOponente += velocidadeYOponente;

    // Vamos limitar a movimentação da raquete para que ela não ultrapasse as bordas:
    yRaqueteOponente = constrain(yRaqueteOponente, 10, 300);
}

function incluiPlacar(){
  stroke(255);
  textAlign(CENTER);
  textSize(16);
  fill(color(255,140,0));
  rect(50,25,40,20)
  fill(255);
  text(meusPontos,70, 40);
  fill(color(255,140,0));
  rect(510,25,40,20)
  fill(255);
  text(pontosDoOponente,530,40);
}

function marcaPonto(){
  if(xBolinha > 590){
    meusPontos += 1;
    ponto.play();
  }
  if (xBolinha < 10){
    pontosDoOponente += 1;
    ponto.play()
  }
}
1 resposta
solução!

Olá Nickolas, tudo bem?

Sua dúvida é muito pertinente e importante para quem está começando a programar em JavaScript. O ponto e vírgula (";") é utilizado para indicar o final de uma instrução (ou comando). Isso significa que após o JavaScript processar aquela linha de código, ele pode passar para a próxima.

Por exemplo, se tivermos duas instruções:

let x = 10
let y = 20

O JavaScript entende que após processar let x = 10, ele pode passar para let y = 20. O ponto e vírgula é uma forma de tornar isso explícito.

No entanto, o JavaScript tem uma funcionalidade chamada "inserção automática de ponto e vírgula" (Automatic Semicolon Insertion - ASI), que basicamente insere o ponto e vírgula automaticamente se ele não estiver presente. É por isso que às vezes seu código funciona mesmo sem o ";".

No entanto, é uma boa prática sempre incluir o ponto e vírgula para evitar possíveis problemas. Existem situações em que a ASI pode não funcionar como esperado e causar erros.

Espero ter ajudado e bons estudos!