Para acompanhar o desenvolvimento deste post leia antes:
E faça o download dos exemplos aqui.
Vamos começar exatamente de onde paramos no post 3, por isso leia os posts anteriores.
Criaremos uma função para movimentar a bolilha.
function moveBall () { ball.move(); }
E adicionaremos ela a nossa função gameLoop() junto com a chamada do movePlayer();
if (acDelta > msPerFrame) { acDelta = 0; movePlayer(); moveBall(); } else { acDelta += deltaTime; }
Quando executarmos novamente o jogo a bolinha moverá-se, inicialmente para a esquerda, e depois ela some na tela, pois não criamos nenhuma regra para que ela volte.
Note que a bolinha se movimenta sem que a barra de espaço seja acionada, isso não pode acontecer.
Sendo assim criaremos 4 variáveis, que ficarão responsáveis pelo controle do jogo, quando ele estiver rodando, quando ele for inicializado, quando o jogador ganhar e quando o jogador perder.
//Game
var gamePlay, gameInit, gameOver, gameWin;
Estas variáveis são declaradas dentro da função loadPage() e são inicializadas dentro da função valuesVariables().
//Game gamePlay = false; gameInit = false; gameOver = false; gameWin = false;
A próxima etapa é ajustar o html para que ele exiba uma mensagem explicando como começar o jogo, um placar, e um botão, um status do jogo e um botão de reset.
<body> <div id="container"> <div id="divScore"> <p>Placar - Jogador : <span id="scorePlayer"> 0 </span> - Computador : <span id="scoreComputer"> 0 </span></p> </div> <div id="divMenu"> <p>Status : <span id="status"> </span></p> <p>Espaço - Iniciar & Pausar</p> <p id="restart"> Jogar novamente </p> </div> <div id="divCanvas"> <canvas id="canvas" width="600" height="300"></canvas> </div> </div> </body> <script type="text/javascript" src="js/Main.js"></script> </html>
Voltando para o Main.js, vamos pegar os elementos do DOM e atribuir a objetos, para que possamos interagir com eles, isso deve ser feito dentro da função main(), mas antes temos que declarar as variáveis no inicio da função loadPage().
//HTML var lblScoreComputer, lblScorePlayer, lblStatus, btnRestar, arrStatus; //Pontos var playerScore, computerScore
main()
lblScoreComputer = document.getElementById('scoreComputer'); lblScorePlayer = document.getElementById('scorePlayer'); lblStatus = document.getElementById('status'); btnRestar = document.getElementById('restart');
Precisamos atribuir valores a nossa array de status, e também para as variáveis que controlarão o desenho do personagem do computador, isso deverá acontecer dentro da função valuesVariables().
//Status arrStatus = ["Iniciar","Jogando","Jogo Pausado","Parabéns Você Venceu","Game Over"]; computerDelta = 0; computerMSPerFrame = 250;
Com isso feito criaremos as funções para controlar o jogo, iniciar, pausar, etc.
//Função para controlar o teclado function controlKeyBoard () { if (KeyBoard.ACTION.current != "") { playGame(); } else { stopGame(); }; }; //Função para iniciar o jogo function playGame () { gamePlay = true; gameInit = true; };//playGame //Função para parar o jogo function stopGame () { gamePlay = false; };//stopGame //Função que indica que o jogador perdeu function overGame () { KeyBoard.ACTION.current = ""; gameOver = true; stopGame(); };//overGame function winGame () { KeyBoard.ACTION.current = ""; gameWin = true; stopGame(); }
Agora voltaremos à nossa função gameLoop para testar se o jogo está rodando e adicionar a chamada da função que movimenta o personagem do computador.
if ( gamePlay == true) { if (acDelta > msPerFrame) { acDelta = 0; moveBall(); movePlayer(); } else { acDelta += deltaTime; } if (computerDelta > computerMSPerFrame) { computerDelta = 0; } else { computerDelta += deltaTime; } }
Fizemos tudo isso para controlar o jogo, agora a bolinha só se movimentará quando a tecla de espaço for acionada e parará quando for acionada uma segunda vez.
Ainda não adicionamos movimento para o jogador, mas já preparamos o caminho para que isso aconteça, também criamos os objetos para interagir com o jogador, por enquanto está tudo jogado na tela, no final do projeto formataremos tudo com bootstrap para que fique mais agradável a experiência.
Bognar Junior 
2 comentários