Projet Jeux Vidéos

Desert runner

Description

On voulait un jeu du type "chrome dino". On a pensé à un jeu fait en HTML que l'on pourrait intégrer dans une page web comme une simple DIV. On a donc pensé à un personnage qui ne fait que courir et sauter au-dessus d'obstacle tel que des buissons et des cactus. De plus On voulait un univers un peu futuriste avec un paysage désertique. Nous sommes parti de ce tuto:[1]

Chrome dino

Dezert runner en version finale

Conception

On a utilisé Gimp et Sublime Text 3.
GIMP Sublime Text

Sublime Text avec notre projet

Nous avons une base HTML qui charge dans sur la page toutes les images et les scripts et les CDNs du jquery. Nous nous sommes aidé de [2]

       <link rel="stylesheet" href="css/style.css">
       <img src="hex-loader2.gif" >
       <img class="fond" id="fond1" src="fond2.png" />
       <img class="fond" id="fond2" src="fond2.png" /> 
       <img id='vj' src="animatedp.gif">
       <img id='obj1' src="buissoon.png">
       <img id='obj2' src="cactus1.png">
       <script src='http://cdnjs.cloudflare.com/..'></script>
       <script src='http://cdnjs.cloudflare.com/..'></script> 
       <script src="js/index.js"></script>

Nous avons ensuite utilisé du Javascript pour les animations et les actions et du CSS pour le style de la page et le positionnement des objets. Le CSS nous permet en le croisant au Javascript de récuperer des informations sur les objets pour gérer les collisions etc..

//déplacer un objet


function deplace() { $('.fond').animate({left: '-=647'},1000,'linear', function(){ $('.fond').css('left', -10); deplace(); }); };




// tester un événement par des variables et des données récupérées par le CSS


if ((e.which == 32) && (ensaut == 0)) { ensaut=1; vjX = parseInt($('#vj').css('top')); if (vjX < 280 ) { $('#vj').css('top', vjX-250); setTimeout(findesaut, 300); } } if (e.which == 78) { fshield(); } });

les positionnements en CSS:

1. obj1 {

height: 70px; position: absolute; z-index: 110; top: 300px; left: 700px; }

Jeu en 3D

Personnage