Ir ao conteúdo
  • Cadastre-se
Entre para seguir isso  
Giacomini

Não entendo muito de JavaScript

Recommended Posts

Ola, meu professor passou um trabalho que a questão é a seguinte:

Ele passou um "jogo" e tenho que alterar o fundo, colocar um placar e trocar a bola por uma imagem.Porém JS não é o meu forte, a parte de trocar o fundo eu consegui pois é no CSS ai beleza.

 

O código é:

 

CSS:

 

#canvas-jogo{
    background-color: rgb(240,240,240);
    border: 1px solid black;
}
body{
    text-align:center;
}

 

HTML:

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>O meu jogo em HTML e Javascript</title>
        <link href="css/estilo.css" rel="stylesheet" type="text/css" />    
    </head>
    <body>
        <canvas id="canvas-jogo"></canvas>
        <script type="text/javascript" src="js/jogo.js"></script>
    </body>
</html>

 

JS:

//Configurações do canvas e criação do contexto.
var canvas = document.getElementById("canvas-jogo");
canvas.width = 480;
canvas.height = 320;
var contexto = canvas.getContext("2d"); 
/* VARIÁVEIS GLOBAIS */
//Posição inicial da bola
var x = canvas.width/2;
var y = canvas.height-30;
//Velocidade da bola
var dx = 2;
var dy = -2;
//Raio da bola
var raioBola= 20;
//Base (controlada pelo jogador)
var baseAltura = 10;
var baseLargura = 75;
var baseX = (canvas.width-baseLargura)/2;
//Estado dos controladores do jogo
var teclaEsquerdaPressionada = false;
var teclaDireitaPressionada = false;

/*FUNÇÕES DO JOGO*/
//Função que desenha a bola na posição contida nas variáveis globais x,y
function desenhaBola(){
    contexto.beginPath();
    contexto.arc(x, y, raioBola, 0, Math.PI*2);
    contexto.fillStyle = "#0095DD";
    contexto.fill();
    contexto.closePath();
}
//Função para desenhar a base controlada pelo jogador
function desenhaBase() {
    contexto.beginPath();
    contexto.rect(baseX, canvas.height-baseAltura, baseLargura, baseAltura);
    contexto.fillStyle = "#0095DD";
    contexto.fill();
    contexto.closePath();
}
//Função que desenha todos os componentes do jogo a cada loop
function desenha(){
    //Limpa o canvas
    contexto.clearRect(0, 0, canvas.width, canvas.height);
    
    //Desenha a bola
    desenhaBola();
    
    //Desenha a base
    desenhaBase();
    
    //Colisão com borda direita e esquerda
    if(x + dx > canvas.width - raioBola || x + dx < raioBola){
        dx = -dx;
    }
    //Colisão com borda superior
    if(y + dy < raioBola){
        dy = -dy;
    }
    //Colisão com a borda inferior
    else if(y + dy > canvas.height - raioBola){
        //Caso esteja na direção da base, altera o movimento da bola
        if(x > baseX && x < baseX + baseLargura){
            dy = -dy;
        }
        //Senão termina o jogo
        else{
            //Imprime mensagem de gameover
            alert("Fim do Jogo! Perdeu!");
            //Recarrega a página
            document.location.reload();
        }
    }
    
    //Atualiza a posição da bola
    x += dx;
    y += dy;
    
    //Move a base controlada pelo jogador
    if(teclaDireitaPressionada && baseX < canvas.width - baseLargura){
        baseX += 7;
    }else if(teclaEsquerdaPressionada && baseX > 0){
        baseX -= 7;
    }
}
//Leitores de eventos do teclado
document.addEventListener("keydown", trataTeclaBaixo, false);
document.addEventListener("keyup", trataTeclaCima, false);
//Funções que tratam os eventos keydown e keyup
function trataTeclaBaixo(evento){
    //Se o keyCode == Seta para Direita
    if(evento.keyCode == 39) {
        teclaDireitaPressionada = true;
    }
    //Se o keyCode == Seta para Esquerda
    else if(evento.keyCode == 37){
        teclaEsquerdaPressionada = true;
    }
}
function trataTeclaCima(evento){
    //Se o keyCode == Seta para Direita
    if(evento.keyCode == 39){
        teclaDireitaPressionada = false;
    }
    //Se o keyCode == Seta para Esquerda
    else if(evento.keyCode == 37){
        teclaEsquerdaPressionada = false;
    }
}
//Loop do jogo
setInterval(desenha, 10);

 

Sem título.png

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
Entre para seguir isso  





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

×