Jogo Corrida JQuery / GameQuery WEB

Jogo Corrida Jquery / Game Query WEB

logo

Hoje, vamos saborear uma Web Salada que pode ser temperada a gosto do desenvolvedor. Mas para que a salada fique bem variada e não fique com aquele aspecto murchado e sem graça é preciso que contenha os temperos JQUERY e GAME QUERY na composição.

GAMEFOTOA receita é de preparo rápido, e muito saborosa, mas pode ser um pouco indigesta se misturada com outros alimentos baseados em PHP e FACEBOOK, portanto optamos por passar somente a receita básica, sem esses elementos que faziam parte da receita original. A Web Salada pode ser preparada em qualquer editor de textos (recomendamos pelo menos o notepad ++), mas fica muito bonita e colorida se preparada e servida em uma vasilha da marca ECLIPSE.

Para preparar o game siga os passos a seguir :

1) INSTALE O NOTEPAD ++ (SE DESEJAR)

2) ABRA O NOTEPAD, O EDITOR DE TEXTOS DE SUA PREFERENCIA OU ALGUMA IDE DE SEU USO

3) CRIE UM NOVO ARQUIVO COM A EXTENSÃO .HTML (Pode ser index.html)

4) COPIE O CÓDIGO ABAIXO PARA ESTE ARQUIVO (ESTE CÓDIGO VAI SER SERVIR COMO MOLDURA E INSTRUÇÕES DO GAME ALÉM DE CHAMAR O IFRAME DO JOGO)

index.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>JOGOS SOCIAIS - CORRIDA DOS 100 METROS</title>
        <style type="text/css">
            html,body{
                background-color: black;
            }
            a{
                color: #FFF;
            }
        </style>
    </head>                                                   
    <body>
    <center>http://./iframe.html
    <div style="width: 600px; height: 100px; top: 300px; color: white; font-size: 10pt;">
        <p style="text-align: center">Como jogar : Ajude seu Corredor utilizando as setas [ESQUERDA E DIREITA] do teclado alternadamente.</p>
        <p style="text-align: center">Utilize a tecla [ENTER] do teclado para pular as barreiras.</p>
        <p style="text-align: center">Os obstaculos irao atrasar o jogador que estiver liderando a prova.</p>
        <p style="text-align: center">Vence o jogador que mais dar PREPARO e APOIO ao seu corredor....</p>
        <p style="text-align: center">QUE VENCA O MELHOR !</p>
        <!-- AddThis Button BEGIN -->
        <script type="text/javascript">addthis_pub  = 'www.curitibaretro.com.br';</script>
        <p><a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-share.gif" width="125" height="16" border="0" alt="" /></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script></p>
        <!-- AddThis Button END -->
    </div>
    </center>
    <!--<div id="debugconsol" style="position: absolute; bottom: 5px; width: 600px; height: 100px; background: #ddd; overflow: auto;"></div>-->
    <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
        var pageTracker = _gat._getTracker("UA-3540624-2");
        pageTracker._initData();
        pageTracker._trackPageview();
    </script>
    </body>
</html>

5) CRIE AGORA UM ARQUIVO COM O NOME DE (iframe.html)

6) COPIE O CÓDIGO ABAIXO PARA ESTE ARQUIVO (ESTE CÓDIGO VAI CHAMAR AS BIBLIOTECAS DO JQUERY, GAME QUERY E O ARQUIVO DO JOGO)

iframe.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>JOGOS SOCIAIS - CORRIDA DOS 100 METROS</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="gamequery.js"></script>
        <script type="text/javascript" src="tutorial.js"></script>
        <style type="text/css">
            html,body{
                margin: 0;
                padding: 0;
                background: black;
            }
        </style>
    </head>
    <body>
    <div id="playground" style="width: 594px; height: 296px; background: black;">
        <div id="welcomeScreen" style="width: 594px; height: 296px; position: absolute; z-index: 100; background-image: url(logo.png); font-family: verdana, sans-serif;">
            <div style="position: absolute; top: 120px; width: 594px; color: white;">
                <div id="loadingBar" style="position: relative; left: 100px; height: 15px; width: 0px; background: red;"></div><br />
                <center><a style="cursor: pointer;" id="startbutton">Clique aqui para iniciar!</a></center>
            </div>
        </div>
    </div>
    </body>
</html>

7) AGORA CRIE UM ARQUIVO COM O NOME (tutorial.js) INSERINDO O SEGUINTE CÓDIGO

tutorial.js

// CONSTANTES

var PLAYGROUND_WIDTH    = 594;
var PLAYGROUND_HEIGHT    = 400; //296;
var REFRESH_RATE        = 15;

var GRACE        = 2000;

// MATRIZES PARA AS ANIMACOES
var playerAnimation = new Array();
var obstaculos = new Array(2); // OBSTACULO E CHEGADA

// ESTADO DO JOGO
var modochegada = false;
var idchegada = null;
var playerHit = false;
var timeOfRespawn = 0;
var gameOver = false;
var teclas_apoio_p1 = 0;
var nextpos=100;
var posjump=200;
var jumpstat=0;
var $trackerrec = "x100";
var $trackerplay = "x100";
var $tp = 1;
var $tpx = "";

// OUTRAS FUNCOES

// REINICIAR O JOGO
function restartgame(){
    window.location.reload();
};

// OBJETOS DO JOGO
function Player(node){

    this.node = node;
    this.grace = false;
    this.corredor1 = 1; 
    this.corredor2 = 1; 
    this.respawnTime = -1;
    
    this.update = function(){
        if((this.respawnTime > 0) && (((new Date()).getTime()-this.respawnTime) > 3000)){
            this.grace = false;
            $(this.node).fadeTo(500, 1); 
            this.respawnTime = -1;
        }
    }
    return true;
}

function obstaculo(node){
    this.corredor1    = 2;
    this.speedx    = -4;
    this.speedy    = 0;
    this.node = $(node);
    
    
    // ATUALIZA A POSICAO DO OBSTACULO
    this.update = function(playerNode){
        this.updateX(playerNode);
        this.updateY(playerNode);
    };    
    this.updateX = function(playerNode){
        this.node.x(this.speedx, true);
    };

}

function barreira(node){
    this.node = $(node);

    this.speedy = 1;
    this.alignmentOffset = 210;
}
barreira.prototype = new obstaculo();
barreira.prototype.updateY = function(playerNode){
    if((this.node.y()+this.alignmentOffset) > $(playerNode).y()){
        this.node.y(this.speedy - 1, true);
    } else if((this.node.y()+this.alignmentOffset) < $(playerNode).y()){
        this.node.y(this.speedy, true);
    }
}

function Bossy(node){
    this.node = $(node);
    this.corredor1    = 20;
    this.speedx = -1;
    this.alignmentOffset = 210;
}
Bossy.prototype = new barreira();
Bossy.prototype.updateX = function(){
    if(this.node.x() > (PLAYGROUND_WIDTH - 200)){
        this.node.x(this.speedx, true)
    }
}

// --------------------------------------------------------------------------------------------------------------------
// --                                      DECLARACAO PRINCIPAL                                                    --
// --------------------------------------------------------------------------------------------------------------------
$(function(){
    
    // CARREGA CENARIO
    var background1 = new $.gQ.Animation({imageURL: "background1.png"});
    var background2 = new $.gQ.Animation({imageURL: "background2.png"});  
    playerAnimation["CENTERTUTORIAL"]  = new $.gQ.Animation({imageURL: "centertutorial.png", numberOfFrame:2, delta: 60, rate: 150, type: $.gQ.ANIMATION_VERTICAL});
    playerAnimation["CENTERTUTORIAL2"]  = new $.gQ.Animation({imageURL: "centertutorial2.png", numberOfFrame:2, delta: 64, rate: 150, type: $.gQ.ANIMATION_VERTICAL});
    
    // ANIMACAO DO CORREDOR
    playerAnimation["PLAYER1CORRE"] = new $.gQ.Animation({imageURL: "competidor1.png", numberOfFrame:5, delta: 68, rate: 60, type: $.gQ.ANIMATION_VERTICAL});
    playerAnimation["PLAYER2CORRE"] = new $.gQ.Animation({imageURL: "competidor2.png", numberOfFrame:5, delta: 68, rate: 60, type: $.gQ.ANIMATION_VERTICAL});

/*--------------------------- PUXA DO BANCO DE DADOS OU SESSION CONFORME A POSSIBILIDADE -----------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------*/

    //CARREGAMENTO DAS OPCOES DO JOGADOR (CONEXAO COM A BASE E ITENS COMPRADOS NA LOJA VIRTUAL)
    
    var $corcamisa = 1  // 1 a 5 SUBSTITUIR PELO ITEM DA BASE DE DADOS
    var $tipotenis = 1  // 1 a 5 SUBSTITUIR PELO ITEM DA BASE DE DADOS
    var $tiposuplemento = 1  // 1 a 5 SUBSTITUIR PELO ITEM DA BASE DE DADOS
    var $tipotrapaca = 2  // 1 a 5 SUBSTITUIR PELO ITEM DA BASE DE DADOS
    var $nomejogador = "Player"; // SUBSTITUIR PELO DA BASE DE DADOS
    var $nomejogadorcpu = "Player 2"; // SUBSTITUIR PELO DA BASE DE DADOS
    var $usuario = "Usuario Logado;" // SUBSTITUIR PELO DA BASE DE DADOS
    var $ultimaposicao = 1; // SUBSTITUIR PELO DA BASE DE DADOS
    var $urlfotoplayer = "http://localdafoto/foto.png"; // SUBSTITUIR PELO DA BASE DE DADOS
    var $cor_rgb = "255x255x255"; // SUBSTITUIR PELO DA BASE DE DADOS
    
/*--------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------*/

    // ITENS AMOSTRA
    playerAnimation["CORCAMISA"]  = new $.gQ.Animation({imageURL: "cor" + $corcamisa + ".png", numberOfFrame:5, delta: 60, rate: 150, type: $.gQ.ANIMATION_VERTICAL});
    playerAnimation["TIPOTENIS"]  = new $.gQ.Animation({imageURL: "tipotenis" + $tipotenis + ".png", numberOfFrame:1, delta: 60, rate: 150, type: $.gQ.ANIMATION_VERTICAL});
    playerAnimation["TIPOSUPLEMENTO"]  = new $.gQ.Animation({imageURL: "tiposuplemento" + $tiposuplemento +".png", numberOfFrame:5, delta: 60, rate: 150, type: $.gQ.ANIMATION_VERTICAL});
    playerAnimation["TIPOTRAPACA"]  = new $.gQ.Animation({imageURL: "tipotrapaca" + $tipotrapaca + ".png", numberOfFrame:1, delta: 60, rate: 150, type: $.gQ.ANIMATION_VERTICAL});
    // CAMPO PARA TRACKER

    // OBSTACULO:
    obstaculos[0] = new Array();
    obstaculos[0]["idle"]    = new $.gQ.Animation({imageURL: "obstaculo.png", numberOfFrame: 1, delta: 64, rate: 60, type: $.gQ.ANIMATION_VERTICAL});
    
    // INICIALIZA O JOGO
    $("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH, keyTracker: true});
                
    // INICIA O CENARIO (background)
    $.playground().addGroup("background", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
                        .addSprite("background1", {animation: background1, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
                        .addSprite("background2", {animation: background2, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT, posx: PLAYGROUND_WIDTH})
                        .addSprite("centertutorial",{animation: playerAnimation["CENTERTUTORIAL"], posx: 200, posy: 10, width: 60, height: 60})
                        .addSprite("centertutorial2",{animation: playerAnimation["CENTERTUTORIAL2"], posx: 310, posy: 10, width: 64, height: 64})
                        .addSprite("corcamisa",{animation: playerAnimation["CORCAMISA"], posx: 0, posy: 300, width: 60, height: 60})
                        .addSprite("tipotenis",{animation: playerAnimation["TIPOTENIS"], posx: 60, posy:300, width: 60, height: 60})
                        .addSprite("tiposuplemento",{animation: playerAnimation["TIPOSUPLEMENTO"], posx: 120, posy: 300, width: 60, height: 60})
                        .addSprite("tipotrapaca",{animation: playerAnimation["TIPOTRAPACA"], posx: 180, posy: 300, width: 60, height: 60})
                    .end()
                    .addGroup("actors", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
                        .addGroup("player", {posx: 100, posy: 200, width: 64, height: 64})
                            .addSprite("playerBody",{animation: playerAnimation["PLAYER1CORRE"], posx: 0, posy: 0, width: 64, height: 64})
                        .end()
                        .addGroup("player2", {posx: 110, posy: 210, width: 64, height: 64})
                            .addSprite("player2Body",{animation: playerAnimation["PLAYER2CORRE"], posx: 0, posy: 0, width: 64, height: 64})
                        .end()
                    .end()

                    .addGroup("overlay",{width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});
    
    $("#player")[0].player = new Player($("#player"));
    
    //ESTAS FUNCOES ESPECIFICAM A VIDA E A ENERGIA DO JOGADOR
    $("#overlay").append("<div id='corredor1HUD'style='color: white; width: 100px; position: absolute; font-family: verdana, sans-serif;'></div><div id='corredor2HUD'style='color: white; width: 100px; position: absolute; right: 0px; font-family: verdana, sans-serif;'></div>")

    // ESTIPULA O TAMANHO DA BARRA DE CARREGAMENTO
    $.loadCallback(function(percent){
        $("#loadingBar").width(400*percent);
    });
    
    //FUNCAO DO BOTAO INICIAR DO JOGO
    $("#startbutton").click(function(){
        $.playground().startGame(function(){
            $("#welcomeScreen").fadeTo(1000,0,function(){$(this).remove();});
        });
    })
    
    // ESTA E A FUNCAO QUE CONTROLA A MAIORIA DOS EVENTOS DO JOGO
    $.playground().registerCallback(function(){
        if(!gameOver){

            //MOVIMENTO DO JOGADOR E PRESSIONAMENTO DE TECLAS
            if(!playerHit){
                $("#player")[0].player.update();

                if(jQuery.gameQuery.keyTracker[37] && jumpstat == 0){ // PRESSIONA BOTAO ESQUERDA(a)
                    teclas_apoio_p1 = 2
                }else if(jQuery.gameQuery.keyTracker[39] && jumpstat == 0){ // PRESSIONA BOTAO DIREITA(a)
                    teclas_apoio_p1--
                }
                if(teclas_apoio_p1 == 1){ // VALIDA
                    teclas_apoio_p1 = 0
                    if ($tipotenis == 1 || $tipotenis == 4 || $tipotenis == 5) nextpos = $("#player").x()+5; // CASO TIPO DE TENIS = 1,4 ou 5 (NORMAL)
                    if ($tipotenis == 2) nextpos = $("#player").x()+6; // CASO TIPO DE TENIS = 2 (MAIS RAPIDO)
                    if ($tipotenis == 3) nextpos = $("#player").x()+7; // CASO TIPO DE TENIS = 3 (MUITO MAIS RAPIDO E MAIS CARO TAMBEM)
                    if ($tiposuplemento == 2) nextpos = nextpos + 2; // CASO TIPO SUPLEMENTO = 2 (ADICIONA 2 PONTOS DE VELOCIDADE INDEPENDENTE DOS OUTROS ITENS COMPRADOS)
                    if ($tiposuplemento == 3) nextpos = nextpos + 3; // CASO TIPO SUPLEMENTO = 3 (ADICIONA 3 PONTOS DE VELOCIDADE INDEPENDENTE DOS OUTROS ITENS COMPRADOS)
                    if(nextpos < PLAYGROUND_WIDTH){ // MANTEM POSICAO DO JOGAR DENTRO DO CAMPO DO JOGO A ESQUERDA
                        $("#player").x(nextpos);
                    }
                    $trackerrec = $trackerrec + "x" + nextpos;
                }
                
                if(jQuery.gameQuery.keyTracker[27]){ // PLAYER 2 MANUAL
                //if(mid($trackerplay,$tp,1)=="x"){ // PLAYER 2 AUTOMATICO
                    var nextpos2 = $("#player2").x()+1; // // POSICAO ATUAL DE PLAYER 2 - MANUAL
                    //$tp++;
                    //$tpx = "";
                    //while (mid($trackerplay,$tp,1)!="x")
                    //{
                    //    $tpx = $tpx + mid($trackerplay,$tp,1);
                    //    $tp++;
                    //}
                    
                    //var nextpos2 = val($tpx); // POSICAO ATUAL DE PLAYER 2 - AUTOMATICO                    
                    
                    if(nextpos2 < PLAYGROUND_WIDTH){ // MANTEM POSICAO DO JOGAR DENTRO DO CAMPO DO JOGO A DIREITA (SOMENTE MANUAL)
                        $("#player2").x(nextpos2); // SOMENTE MANUAL
                    } // SOMENTE MANUAL
                } 
                if($("#player").x() > $("#player2").x()){
                    $("#corredor1HUD").html($nomejogador + " " +  "Posicao 1 " + " ** " +  $("#player").x() + " :: " + $trackerrec);
                    $("#corredor2HUD").html($nomejogadorcpu + " " + "Posicao 2 " + " >> " +  $("#player2").x() + " :: " + $trackerplay);
                }else{
                    $("#corredor1HUD").html($nomejogador + " " + "Posicao 2 " + " ** " +  $("#player").x() + " :: " + $trackerrec);
                    $("#corredor2HUD").html($nomejogadorcpu + " " + "Posicao 1 " + " >> " +  $("#player2").x() + " :: " + $trackerplay);
                }
                    
                if($("#player").x() > PLAYGROUND_WIDTH-50){
                    gameOver = true;
                }
                if($("#player2").x() > PLAYGROUND_WIDTH-50){
                    gameOver = true;
                }     
            }            
//------------------------------------- LOGICA DO SALTO SOBRE AS BARREIRAS ---------------------------------------------
            if (jQuery.gameQuery.keyTracker[13] && posjump == 200)
            {
                jumpstat=1;
            }
            if (jumpstat == 1)
            {
                posjump = posjump - 4; 
                $("#player").y(posjump);
                $trackerrec = $trackerrec + "y" + posjump;
            }
            if($tiposuplemento == 4) if (posjump < 140) jumpstat = 2; // CASO SUMPLEMENTO == 4 (PULOS MAIS ALTOS)
            if($tiposuplemento == 5) if (posjump < 130) jumpstat = 2; // CASO SUMPLEMENTO == 4 (PULOS MAIS ALTOS)
            if($tiposuplemento != 4 && $tiposuplemento != 5) if (posjump < 160) jumpstat = 2; // CASO SUMPLEMENTO == 4 (PULOS MAIS ALTOS)
            if (jumpstat == 2)
            {
                posjump = posjump + 4;
                $("#player").y(posjump);
                $trackerrec = $trackerrec + "y" + posjump;
            }
            if (posjump == 200) jumpstat = 0;
//--------------------------------------------------------------------------------------------------------------------

            //ATUALIZA A COLISAO DAS BARREIRAS COM O CORREDOR
            $(".obstaculo").each(function(){
                    this.obstaculo.update($("#player"));
                    var posx = $(this).x();
                    if((posx + 100) < 0){
                        $(this).remove();
                        return;
                    }
                                    
                    //TESTE DE COLISOES
                    var collided = $(this).collision("#playerBody,."+$.gQ.groupCssClass);
                    if(collided.length > 0){ 
                        if (jumpstat == 0) // CASO ESTEJA PULANDO NAO QUEBRA A BARREIRA
                        { 
                            $(this).setAnimation(obstaculos[0]["explode"], function(node){$(node).remove();});
                            $(this).css("width", 210);
                            $(this).removeClass("obstaculo");
                        }
                        // E FORCADO A PERDER VELOCIDADE VOLTANDO POSICOES PARA ESQUERDA
                        if ($tipotenis != 4 && $tipotenis != 5 && jumpstat == 0) nextpos = $("#player").x()-50; // CASO TIPO DE TENIS <> 4 (RESISTENCIA NORMAL)
                        if ($tipotenis == 4 && jumpstat == 0) nextpos = $("#player").x()-25; // CASO TIPO DE TENIS == 4 (MAIOR RESISTENCIA ESTABILIDADE)
                        if ($tipotenis == 5 && jumpstat == 0) nextpos = $("#player").x()-20; // CASO TIPO DE TENIS == 5 (SUPER RESISTENCIA A OBSTACULOS)
                        if(nextpos > 0){ // MANTEM POSICAO DO JOGAR DENTRO DO CAMPO DO JOGO A ESQUERDA
                            $("#player").x(nextpos);
                        }
                    }
                    var collided2 = $(this).collision("#player2Body,."+$.gQ.groupCssClass);
                    if(collided2.length > 0){
                        $(this).setAnimation(obstaculos[0]["explode"], function(node){$(node).remove();});
                        $(this).css("width", 210);
                        $(this).removeClass("obstaculo");
                        // E FORCADO A PERDER VELOCIDADE VOLTANDO 1 PONTO PARA ESQUERDA
                        nextpos = $("#player2").x()-50;
                        if(nextpos > 0){ // MANTEM POSICAO DO JOGAR DENTRO DO CAMPO DO JOGO A ESQUERDA
                            $("#player2").x(nextpos);
                        }
                    }
                });
        }
    }, REFRESH_RATE);
    
    //ESTA FUN��O CRIA AS BARREIRAS ALEATORIAMENTE
    $.playground().registerCallback(function(){
        if(!gameOver){
            if(Math.random() < 0.4){
                var name = "obstaculo1_"+Math.ceil(Math.random()*1000);
                $("#actors").addSprite(name, {animation: obstaculos[0]["idle"], posx: PLAYGROUND_WIDTH, posy: 210,width: 16, height: 64});
                $("#"+name).addClass("obstaculo");
                $("#"+name)[0].obstaculo = new barreira($("#"+name));
            }
        }else{
            $("#playground").append('<div style="position: absolute; top: 50px; width: 570px; color: white; font-family: verdana, sans-serif;"><center><h1>Game Over</h1><br><a style="cursor: pointer;" id="restartbutton">FIM DE JOGO</a></center></div>');
            //$("#playground").append('<div style="position: absolute; top: 50px; width: 700px; color: white; font-family: verdana, sans-serif;"><center><h1>Game Over</h1><br><a style="cursor: pointer;" id="restartbutton">Corredor 2 Venceu!</a></center></div>');
            $("#restartbutton").click(restartgame);
        }
        
    }, 1000); //UMA POR SEGUNDO
    
    
    //ANIMA��O DO CENARIO
    $.playground().registerCallback(function(){
        //TAMANHO TOTAL DO CENARIO:
        var newPos = ($("#background1").x() - 4 - PLAYGROUND_WIDTH) % (1 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
        $("#background1").x(newPos);
        newPos = ($("#background2").x() - 4 - PLAYGROUND_WIDTH) % (1 * PLAYGROUND_WIDTH);
        $("#background2").x(newPos);
    }, REFRESH_RATE);
    
});

8) SALVE OS ARQUIVOS CRIADOS EM UMA MESMA PASTA E DESCOMPACTE OS SEGUINTES ARQUIVOS DA BIBLIOTECA DO JQUERY E DO GAMEQUERY (jquery.js e gamequery.js).

jquery.js.zip

gamequery.js.zip

9) AGORA, SALVE AS IMAGENS ABAIXO DENTRO DA PASTA DO JOGO,  (ESTAS SERÃO AS ANIMAÇÕES E SPRITES  APLICADAS NOS OBJETOS DO GAME).

background1

background2

centertutorial centertutorial2 competidor1 competidor2

cor1 cor2 cor3 cor4 cor5

logo

obstaculo - BACKUP obstaculo

tiposuplemento1 tiposuplemento2 tiposuplemento3 tiposuplemento4 tiposuplemento5

tipotenis1 tipotenis2 tipotenis3 tipotenis4 tipotenis5

tipotrapaca1 tipotrapaca2 tipotrapaca3 tipotrapaca4 tipotrapaca5

10) AGORA É SÓ CLICAR 2X NO ARQUIVO index.html QUE VOCÊ CRIOU E PRONTO, O JOGO DEVE ESTAR FUNCIONANDO REDONDINHO.

11) AGORA EXPERIMENTE ALTERAR ALGUNS COMPONENTES DA RECEITA, ESTUDE O CÓDIGO, FAÇA IMPLEMENTAÇÕES E CRIE SEU PRÓPRIO GAME WEB COM JQUERY E GAME QUERY….

SEGUE FONTE COMPLETO ABAIXO

Jogo Corrida jQuery Game Query Web.zip

Anúncios

Um pensamento sobre “Jogo Corrida JQuery / GameQuery WEB

  1. Pingback: 100 Mts Run 1.1 | Gene-Z Games & Team

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s