SlideShare uma empresa Scribd logo
1 de 28
Baixar para ler offline
JOGO COM VACA5
Passo a passo
http://labs.vacavitoria.com/vaca5/
Passo a passo com o vaca5
Receita do bolo
Rascunho
Passo 1 - ambiente




     Movimento
                     Inimigos
     da nave
Passo 2 – contas

    Disparos
               Contagem de pontos
Passo 3 – desafio para casa =)

                    Inimigos
                    especiais

                    Com
                    movimentos
                    especiais ??
PASSO UM
O Ambiente, ou acredite que configurar coisas é um
pesadelo ...
Preparação do ambiente
• Criação do html vazio
• Disponibilidade da biblioteca
• Adicionar nave
• Mover nave
• Adicionar Inimigo
• Mover inimigo
Pagina com cor - 1.html
<canvas id="c">
Navegador não compatível com HTML5
</canvas>
<div id="debug_div" style="float: right; width: 300px;"></div>

<script>
        var canvasGame = document.getElementById('c');
        var mygame = initGame(canvasGame, 640, 480);

        mygame.currentScene.background =
NMSColor.TANGERINE;
        mygame.start();
</script>
Exibir imagem – 2.html


  var canvasGame = document.getElementById('c');
  var mygame = initGame(canvasGame, 640, 480);

  var sprite = new Sprite('ship', 100, 100, 'ship.png' );
  mygame.currentScene.add(sprite);

  mygame.start();
Centralizar a imagem – 3.html
    // cena do jogo
    var gameScene = new Scene(g.width, g.height);
    var sprite = new Sprite('ship', 0, 0, 'ship.png' );
    gameScene.add(sprite);

    sprite.start = function(_game, child){
           child.x = (_game.width - child.width) /2;
           child.y = _game.height - child.height - border;
    }
Centralizar a imagem – 3.html (2)
// cena de carregamento
var loadScene =
       new SceneLoading(g.width, g.height, gameScene);

g.currentScene = loadScene;
g.start();
Mover nave – 4.html
function MoveShip() {
          this.speed = 40;

          this.update = function(_game) {
                   var target = _game.currentScene.findById('ship');

                    if (_game.isKeyPressed('left')) {
                              target.x -= this.speed * _game.dt;
                    }

                    if (_game.isKeyPressed('right')) {
                              target.x += this.speed * _game.dt;
                    }
          };
}

gameScene.add(new MoveShip());
Limites laterais – 5.html
var target = _game.currentScene.findById('ship');

if (_game.isKeyPressed('left')) {
        var tx = target.x - (this.speed * _game.dt);
        if( tx > border ){
                  target.x = tx;
        }
}

if (_game.isKeyPressed('right')) {
        var tx = target.x + (this.speed * _game.dt);
        if( tx + target.width < (_game.width - border)){
                  target.x = tx;
        }
}
Adicionando inimigo – 6.html
var enemy =
new Sprite('enemy', 0, border, 'images/enemy.png' );

gameScene.add(enemy);
enemy.start = function(_game, child){
     var max = _game.width - child.width - (2 * border);
     var startPos = Math.floor((Math.random()*max)+1);
     child.x = max;
}
Movendo Inimigo – 7.html
function MoveEnemy() {

        this.speed = 60;
        this.direction = 1;

        this.update = function(_game) {
                  var target = _game.currentScene.findById('enemy');
                  var tx = target.x + (this.speed * _game.dt * this.direction);

                  if( tx < border ||
                             tx + target.width > (_game.width - border)){
                             this.direction = this.direction * -1;
                  } else {
                             target.x = tx;
                  }

        };
}
Exibindo FPS – 7.html
// cena de carregamento
var loadScene = new SceneLoading(g.width, g.height,
gameScene);
g.currentScene = loadScene;

g.showFPS = true;
g.fpsColor = '#FFFFFF';
g.start();
Passo a passo com o vaca5
PASSO DOIS
Disparando loucamente pela tela !!
Ou não ... :8)
Disparos !! – 8.html
                                                                       Sim nós temos
if (_game.isKeyPressed('fire2')) {
           var target = _game.currentScene.findById('ship');
                                                                     cache das imagens
                                                                             !!
          var bullet = _game.currentScene.findById('bullet');

          var x = target.x + (target.width /2) - (bullet.width/2);
          var y = target.y - bullet.height;

          var shootSprite = new Sprite('shoot_' + this.counter,
                   x, y, 'images/bullet.png' );

          shootSprite.beforeUpdate = function(_game, current, child){
                    child.y -= bulletSpeed * _game.dt;
                    if( child.y < 0 ){
                           child.remove = true;
                    }
          }

          _game.currentScene.add( shootSprite );
          this.counter ++;
}
Remove = true ? WTF ?
shootSprite.beforeUpdate = function(_game, current, child){
             child.y -= bulletSpeed * _game.dt;
             if( child.y < 0 ){
                    child.remove = true;
             }
      }

                                Avisa a cena para
                               remover este objeto
Passo a passo com o vaca5
Nem tantos disparos .. Humpf ... – 9.html
function Shoot() {
          this.counter = 1;
          this.wait = -1;                                      Espere antes de
          this.TimeToShoot = 2.5;                              atirar novamente

         this.update = function(_game) {

                  if( this.wait >= 0 ){
                            this.wait -= _game.dt;
                  }

                  if (_game.isKeyPressed('fire2') && this.wait < 0 ) {
                           // o resto do codigo do tiro ...
                           this.wait = this.TimeToShoot;
                  }

         };
}
Contando pontos – 10.html
g.colision.handlers.push(function(_game, _a, _b) {

      if( _a.id.indexOf('shoot_') == 0){
               score ++;
               _a.remove = true;
               randomEnemy(_game,_b);
      }
});
Mostrando os pontos – 10.html
var scoreLabel = new
       Label(border,border,'score','Loading');
scoreLabel.fillColor = '#FFFFFF';

scoreLabel.beforeUpdate = function(_game, current,
child ) {
        child.x = _game.width - child.width - border;
        child.text = score;
}
gameScene.add(scoreLabel);
Agora sua vez de fazer um jogo ...
Obrigado




fb.com/vacavitoria

Mais conteúdo relacionado

Semelhante a Passo a passo com o vaca5

Do zero ao jogo multiplataforma com cocos2d
Do zero ao jogo multiplataforma com cocos2dDo zero ao jogo multiplataforma com cocos2d
Do zero ao jogo multiplataforma com cocos2dVitor Mattos
 
Thiago Valle e Heitor Repolho - Utilizando sparta para para desenvolvimento d...
Thiago Valle e Heitor Repolho - Utilizando sparta para para desenvolvimento d...Thiago Valle e Heitor Repolho - Utilizando sparta para para desenvolvimento d...
Thiago Valle e Heitor Repolho - Utilizando sparta para para desenvolvimento d...INdT
 
INdT Mobile Labs - Sparta
INdT Mobile Labs - SpartaINdT Mobile Labs - Sparta
INdT Mobile Labs - SpartaHeitor Carlos
 
Oficina Android - Games com AndEngine - Dia 3
Oficina Android - Games com AndEngine - Dia 3Oficina Android - Games com AndEngine - Dia 3
Oficina Android - Games com AndEngine - Dia 3Odair Bonin Borges
 
técnica de desenvolvimento de jogos para web
técnica de desenvolvimento de jogos para webtécnica de desenvolvimento de jogos para web
técnica de desenvolvimento de jogos para webAndrews Medina
 
TDC2011 - Desenvolvimento de jogos com Javascript e HTML5
TDC2011 - Desenvolvimento de jogos com Javascript e HTML5TDC2011 - Desenvolvimento de jogos com Javascript e HTML5
TDC2011 - Desenvolvimento de jogos com Javascript e HTML5Willian Molinari
 
Desenvolvendo Jogos com pygame.
Desenvolvendo Jogos com pygame.Desenvolvendo Jogos com pygame.
Desenvolvendo Jogos com pygame.Tchelinux
 

Semelhante a Passo a passo com o vaca5 (10)

Do zero ao jogo multiplataforma com cocos2d
Do zero ao jogo multiplataforma com cocos2dDo zero ao jogo multiplataforma com cocos2d
Do zero ao jogo multiplataforma com cocos2d
 
Thiago Valle e Heitor Repolho - Utilizando sparta para para desenvolvimento d...
Thiago Valle e Heitor Repolho - Utilizando sparta para para desenvolvimento d...Thiago Valle e Heitor Repolho - Utilizando sparta para para desenvolvimento d...
Thiago Valle e Heitor Repolho - Utilizando sparta para para desenvolvimento d...
 
INdT Mobile Labs - Sparta
INdT Mobile Labs - SpartaINdT Mobile Labs - Sparta
INdT Mobile Labs - Sparta
 
Oficina Android - Games com AndEngine - Dia 3
Oficina Android - Games com AndEngine - Dia 3Oficina Android - Games com AndEngine - Dia 3
Oficina Android - Games com AndEngine - Dia 3
 
Labs Jogos Java
Labs Jogos JavaLabs Jogos Java
Labs Jogos Java
 
técnica de desenvolvimento de jogos para web
técnica de desenvolvimento de jogos para webtécnica de desenvolvimento de jogos para web
técnica de desenvolvimento de jogos para web
 
Heap Mínimo e Máximo
Heap Mínimo e MáximoHeap Mínimo e Máximo
Heap Mínimo e Máximo
 
TDC2011 - Desenvolvimento de jogos com Javascript e HTML5
TDC2011 - Desenvolvimento de jogos com Javascript e HTML5TDC2011 - Desenvolvimento de jogos com Javascript e HTML5
TDC2011 - Desenvolvimento de jogos com Javascript e HTML5
 
Desenvolvendo Jogos com pygame.
Desenvolvendo Jogos com pygame.Desenvolvendo Jogos com pygame.
Desenvolvendo Jogos com pygame.
 
Minicurso pygame
Minicurso pygameMinicurso pygame
Minicurso pygame
 

Mais de Hamilton Lima

Robolucha visão geral
Robolucha visão geralRobolucha visão geral
Robolucha visão geralHamilton Lima
 
Aula inaugural IFRJ - Pareto e suas cerejas
Aula inaugural IFRJ - Pareto e suas cerejasAula inaugural IFRJ - Pareto e suas cerejas
Aula inaugural IFRJ - Pareto e suas cerejasHamilton Lima
 
Combate de Robôs agora se chama Vaporaria (tchau RobotJS)
Combate de Robôs agora se chama Vaporaria (tchau RobotJS)Combate de Robôs agora se chama Vaporaria (tchau RobotJS)
Combate de Robôs agora se chama Vaporaria (tchau RobotJS)Hamilton Lima
 
Programadores são mutantes
Programadores são mutantesProgramadores são mutantes
Programadores são mutantesHamilton Lima
 
Jogos Em Lua Com LöVe
Jogos Em Lua Com LöVeJogos Em Lua Com LöVe
Jogos Em Lua Com LöVeHamilton Lima
 
Hla Levantamento De Informacoes 2009 03 08
Hla Levantamento De Informacoes 2009 03 08Hla Levantamento De Informacoes 2009 03 08
Hla Levantamento De Informacoes 2009 03 08Hamilton Lima
 

Mais de Hamilton Lima (7)

Robolucha visão geral
Robolucha visão geralRobolucha visão geral
Robolucha visão geral
 
Aula inaugural IFRJ - Pareto e suas cerejas
Aula inaugural IFRJ - Pareto e suas cerejasAula inaugural IFRJ - Pareto e suas cerejas
Aula inaugural IFRJ - Pareto e suas cerejas
 
Combate de Robôs agora se chama Vaporaria (tchau RobotJS)
Combate de Robôs agora se chama Vaporaria (tchau RobotJS)Combate de Robôs agora se chama Vaporaria (tchau RobotJS)
Combate de Robôs agora se chama Vaporaria (tchau RobotJS)
 
Programadores são mutantes
Programadores são mutantesProgramadores são mutantes
Programadores são mutantes
 
Tiled para CreateJS
Tiled para CreateJSTiled para CreateJS
Tiled para CreateJS
 
Jogos Em Lua Com LöVe
Jogos Em Lua Com LöVeJogos Em Lua Com LöVe
Jogos Em Lua Com LöVe
 
Hla Levantamento De Informacoes 2009 03 08
Hla Levantamento De Informacoes 2009 03 08Hla Levantamento De Informacoes 2009 03 08
Hla Levantamento De Informacoes 2009 03 08
 

Passo a passo com o vaca5

  • 1. JOGO COM VACA5 Passo a passo http://labs.vacavitoria.com/vaca5/
  • 5. Passo 1 - ambiente Movimento Inimigos da nave
  • 6. Passo 2 – contas Disparos Contagem de pontos
  • 7. Passo 3 – desafio para casa =) Inimigos especiais Com movimentos especiais ??
  • 8. PASSO UM O Ambiente, ou acredite que configurar coisas é um pesadelo ...
  • 9. Preparação do ambiente • Criação do html vazio • Disponibilidade da biblioteca • Adicionar nave • Mover nave • Adicionar Inimigo • Mover inimigo
  • 10. Pagina com cor - 1.html <canvas id="c"> Navegador não compatível com HTML5 </canvas> <div id="debug_div" style="float: right; width: 300px;"></div> <script> var canvasGame = document.getElementById('c'); var mygame = initGame(canvasGame, 640, 480); mygame.currentScene.background = NMSColor.TANGERINE; mygame.start(); </script>
  • 11. Exibir imagem – 2.html var canvasGame = document.getElementById('c'); var mygame = initGame(canvasGame, 640, 480); var sprite = new Sprite('ship', 100, 100, 'ship.png' ); mygame.currentScene.add(sprite); mygame.start();
  • 12. Centralizar a imagem – 3.html // cena do jogo var gameScene = new Scene(g.width, g.height); var sprite = new Sprite('ship', 0, 0, 'ship.png' ); gameScene.add(sprite); sprite.start = function(_game, child){ child.x = (_game.width - child.width) /2; child.y = _game.height - child.height - border; }
  • 13. Centralizar a imagem – 3.html (2) // cena de carregamento var loadScene = new SceneLoading(g.width, g.height, gameScene); g.currentScene = loadScene; g.start();
  • 14. Mover nave – 4.html function MoveShip() { this.speed = 40; this.update = function(_game) { var target = _game.currentScene.findById('ship'); if (_game.isKeyPressed('left')) { target.x -= this.speed * _game.dt; } if (_game.isKeyPressed('right')) { target.x += this.speed * _game.dt; } }; } gameScene.add(new MoveShip());
  • 15. Limites laterais – 5.html var target = _game.currentScene.findById('ship'); if (_game.isKeyPressed('left')) { var tx = target.x - (this.speed * _game.dt); if( tx > border ){ target.x = tx; } } if (_game.isKeyPressed('right')) { var tx = target.x + (this.speed * _game.dt); if( tx + target.width < (_game.width - border)){ target.x = tx; } }
  • 16. Adicionando inimigo – 6.html var enemy = new Sprite('enemy', 0, border, 'images/enemy.png' ); gameScene.add(enemy); enemy.start = function(_game, child){ var max = _game.width - child.width - (2 * border); var startPos = Math.floor((Math.random()*max)+1); child.x = max; }
  • 17. Movendo Inimigo – 7.html function MoveEnemy() { this.speed = 60; this.direction = 1; this.update = function(_game) { var target = _game.currentScene.findById('enemy'); var tx = target.x + (this.speed * _game.dt * this.direction); if( tx < border || tx + target.width > (_game.width - border)){ this.direction = this.direction * -1; } else { target.x = tx; } }; }
  • 18. Exibindo FPS – 7.html // cena de carregamento var loadScene = new SceneLoading(g.width, g.height, gameScene); g.currentScene = loadScene; g.showFPS = true; g.fpsColor = '#FFFFFF'; g.start();
  • 20. PASSO DOIS Disparando loucamente pela tela !! Ou não ... :8)
  • 21. Disparos !! – 8.html Sim nós temos if (_game.isKeyPressed('fire2')) { var target = _game.currentScene.findById('ship'); cache das imagens !! var bullet = _game.currentScene.findById('bullet'); var x = target.x + (target.width /2) - (bullet.width/2); var y = target.y - bullet.height; var shootSprite = new Sprite('shoot_' + this.counter, x, y, 'images/bullet.png' ); shootSprite.beforeUpdate = function(_game, current, child){ child.y -= bulletSpeed * _game.dt; if( child.y < 0 ){ child.remove = true; } } _game.currentScene.add( shootSprite ); this.counter ++; }
  • 22. Remove = true ? WTF ? shootSprite.beforeUpdate = function(_game, current, child){ child.y -= bulletSpeed * _game.dt; if( child.y < 0 ){ child.remove = true; } } Avisa a cena para remover este objeto
  • 24. Nem tantos disparos .. Humpf ... – 9.html function Shoot() { this.counter = 1; this.wait = -1; Espere antes de this.TimeToShoot = 2.5; atirar novamente this.update = function(_game) { if( this.wait >= 0 ){ this.wait -= _game.dt; } if (_game.isKeyPressed('fire2') && this.wait < 0 ) { // o resto do codigo do tiro ... this.wait = this.TimeToShoot; } }; }
  • 25. Contando pontos – 10.html g.colision.handlers.push(function(_game, _a, _b) { if( _a.id.indexOf('shoot_') == 0){ score ++; _a.remove = true; randomEnemy(_game,_b); } });
  • 26. Mostrando os pontos – 10.html var scoreLabel = new Label(border,border,'score','Loading'); scoreLabel.fillColor = '#FFFFFF'; scoreLabel.beforeUpdate = function(_game, current, child ) { child.x = _game.width - child.width - border; child.text = score; } gameScene.add(scoreLabel);
  • 27. Agora sua vez de fazer um jogo ...