JOGO COM VACA5Passo a passo

http://labs.vacavitoria.com/vaca5/

Receita do bolo

Rascunho

Passo 1 - ambiente

Movimento da nave Inimigos

Passo 2 – contas

Disparos

Contagem de pontos

Passo 3 – desafio para casa =)

Inimigos especiais

Com movimentos especiais ??

PASSO UMO 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.htmlfunction 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.htmlvar 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.htmlfunction 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 DOISDisparando loucamente pela tela !!

Ou não ... :8)

Disparos !! – 8.htmlif (_game.isKeyPressed('fire2')) {

var target = _game.currentScene.findById('ship');

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 ++;

}

Sim nós temos cache das imagens

!!

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

Nem tantos disparos .. Humpf ... – 9.html

function Shoot() {

this.counter = 1;

this.wait = -1;

this.TimeToShoot = 2.5;

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;

}

};

}

Espere antes de atirar novamente

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