TD: décembre 2014

Closure encore et encore

JS Bin
Vous pouvez écrire vous même du code pour animer vos pages (exemple). Mais aujourd'hui, de nombreuses bibliothèques proposent des effets d'animation (exemple).

Introduction

Etudier le code permettant de rendre un effet sur un élément.

function effet( elem ) {

// init : Start for example the slide down or the opacity at 0
fx(0);

// Show the element (but you can't see it, since the height or opacity is 0
show( elem );

// We are going to do a 20 frame animation that takes
// place over one second
for ( var i = 0; i <= 100; i += 5 ) {
// A closure to make sure that we have the right i
(function(){
var pos = i;

// Set the timeout to occur at the specified time in the future
setTimeout(function(){

// Set the new height or opacity of the element
fx(pos);

}, ( pos + 1 ) * 10 );
})();
}
}

Exemple

Dans le code précédant remplaçons fx() par elem.style.height.

function slideDown( elem ) {
// Start the slide down at 0
elem.style.height = '0px';

// Show the element (but you can't see it, since the height is 0)
show( elem );

// Find the full, potential, height of the element
var h = fullHeight( elem );

// We are going to do a 20 frame animation that takes
// place over one second
for ( var i = 0; i <= 100; i += 5 ) {
// A closure to make sure that we have the right i
(function(){
var pos = i;

// Set the timeout to occur at the specified time in the future
setTimeout(function(){

// Set the new height of the element
elem.style.height = (( pos / 100 ) * h ) + "px";

}, ( pos + 1 ) * 10 );
})();
}
}

Fade-in

On cherchera à remplacer fx par une fonction permettant de créer un effet d'apparition.

(function(pos){
setTimeout(function(){
elem.style.height = (( pos / 100 ) * h ) + "px";
elem.style.width = (( pos / 100 ) * h ) + "px";
elem.style.opacity= pos / 100 ;
}, ( pos + 1 ) * 10 );
})(i);

Vous pouvez voir ce code en action (ici).

Vers l'objet et au delà !

Objet Message : in action

Pour afficher dans un jeu des messages de début ou de fin de jeu, nous pouvons définir un objet.

L'idée principale est de regrouper en une partie commune "create" l'ensemble des fonctions à répéter pour chaque message.

var Screen = {
welcome: function() {
// Setup base values
this.text = 'SORT the Buddles';
this.textSub = 'find the criteria';
this.textColor = 'red';
// Create screen
this.create();
},

gameover: function() {
this.text = 'We have a Winner';
this.textSub = 'Winner !';
this.textColor = 'red';

this.create();
},

create: function() {
// Background
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Main text
ctx.fillStyle = this.textColor;
ctx.textAlign = 'center';
ctx.font = '40px helvetica, arial';
ctx.fillText(this.text, canvas.width / 2, canvas.height / 2);

// Sub text
ctx.fillStyle = '#999999';
ctx.font = '20px helvetica, arial';
ctx.fillText(this.textSub, canvas.width / 2, canvas.height / 2 + 30);
}
};

Collision simple : how to

Télécharger le code

Principe

Mettons en place la détection de collision entre deux éléments du jeu.

Pour simplifier notre recherche, nous disons qu'il y a collision si le rond noir rentre dans le carré noir.
Les figures sont dessinées sur l'image d'illustration suivante.

Les coordonnées du point noir sont les coordonnées de la princesse {girl.x, girl.y} et les coordonnées du carré sont les coordonnées du joueur plus un delta {player.x-deltaX, player.y+deltaY}.

La précision est contrôlable en fonction des valeurs du delta qui augmente ou diminue la zone du carré noir.

Sur la figure suivante, le rond noir est dans le carré, la condition de collision est vrai, la princesse va se transformer !

Code

Pour écrire notre programme, nous pouvons faire appelle à la fonction

function xBetween(x,a,b){
if(x>a && x<b)
return true;
else
return false;
}

function checkCollisions(){
allGirls.forEach(function(girl) {
if(xBetween(girl.x,
player.x-deltaX,
player.x+deltaY) &&
xBetween(girl.y,
player.y-deltaX,
player.y+deltaY)){
//collision do something
}
});
}

Game : how to

Pour réaliser un jeu, nous devons nous rappeler la conception des livres flip.

L'illusion est presque parfaite, seul le personne bouge dans un décor figé.

Pour obtenir ce résultat, nous avons page par page redessine entièrement le décor sur chaque page.

La logique de création sera :
>tourner la page
bouger le personnage
dessine le personnage
dessine le décor
> tourner la page
bouger le personnage
dessine le personnage
dessine le décor

Passons à notre programme de jeu.

La logique précédente va se traduire par les lignes de code suivantes

function main() {

update();

render();

win.requestAnimationFrame(main);

};

La fonction requestAnimationFrame est chargée de tourner la page. La fonction main est la fonction de callback appelée avant que le navigateur effectue une nouvelle animation.

Cette logique de base varie peu. Elle peut être isolée dans un fichier dit "engine".

remarque : Ce fichier deviendra vite une véritable bibliothèque contenant des outils de création et de gestion de votre jeu. Il doit exister aujourd'hui une bonne trentaine de bibliothèque de jeu.

https://github.com/dupontdenis/Game-move.git

Pour aller plus loin :

Pour tenir compte des variations de fréquences, nous introduisons un delta time.

Pages