Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
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

Editado por DiF
Botão CODE<>

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

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

×