[Démonstration] Un fond d'image qui défile !

[Démonstration] Un fond d'image qui défile ! - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Démonstration] Un fond d'image qui défile ! (/showthread.php?tid=2030)

Pages : 1 2 3

RE: [Démonstration] Un fond d'image qui défile ! - naholyr - 18-11-2007

Tiens toujours dans l'idée des objets anonymes, je te propose les syntaxes alternatives suivantes :

Quand tu utilises

Code :
clippingArray[bloc]['firstTime']

tu peux aussi bien utiliser

Code :
clippingArray[bloc].firstTime

(puisqu'il s'agit d'une propriété d'un objet, elle est accessible indifféremment en notation "tableau" ou "objet" je préfère utiliser le point car on y retrouve plus explicitement la notion d'objet).

Quand tu initialises un "tableau associatif" en remplissant ton objet anonyme champ par champ, tu peux aussi les spécifier tous d'un bloc, au lieu de

Code :
clippingArray[bloc] = {};

clippingArray[bloc]['firstTime'] = true;    

clippingArray[bloc]['position'] = 0;

clippingArray[bloc]['increment'] = 1;

tu pourrais utiliser

Code :
clippingArray[bloc] = {

    firstTime: true,

    position: 0,

    increment: 1

};

Et au passage, on notera que ce n'est pas parce qu'un objet est anonyme qui n'a pas le droit d'avoir de méthode, une méthode étant un attribut comme un autre on peut imaginer ça :

Code :
clippingArray[bloc] = {

    firstTime: true,

    position: 0,

    increment: 1,

    clip: function() {

        var element = document.getElementById(bloc); // Ici on peut utiliser "bloc" qui est défini dans la fonction parente, et en Javascript une fonction anonyme définie dans une autre utilise le scope de sa fonction parente

        if (element) {

            this.position = this.position + this.increment; // this est l'objet courant

            element.style.backgroundPosition = this.position + 'px 50%';

        }

    }

};

et du coup au lieu d'avoir

Code :
setInterval("clipBloc('bloc1')", 80);

tu auras

Code :
setInterval("clippingArray['bloc1'].clip()", 80);

Le gain n'est pas évident parce qu'on ne met qu'un pied dans le modèle objet Javascript, mais en mettant les deux pieds dedans tu transformerais ta fonction onload en simple

Code :
new clip('bloc1');

et tout se ferait dans l'initialisation de l'objet Wink

naholyr, introducteur sournois à la POO, même et surtout en Javascript

RE: [Démonstration] Un fond d'image qui défile ! - Sephi-Chan - 18-11-2007

Une fois de plus, merci Naholyr de partager tes connaissances. Je vais bientôt avoir à utiliser Javascript de manière intensive pour réaliser l'interface de Seelies, aussi je souhaite prendre de bons réflexes pour faire un code portable, propre et le plus léger possible.

Sephi-Chan

RE: [Démonstration] Un fond d'image qui défile ! - Sephi-Chan - 19-11-2007

Quelqu'un m'a expliqué pourquoi les couleurs ne ressortaient pas correctement sur IE7 et Safari. Il s'agit en fait d'un problème lié à Photoshop (au moins jusqu'à la version 9). Il renvoie mal les images PNG : il faut donc passer derrière lui avec un autre utilitaire qui gère mieux les exportations PNG.

Ma page est donc maintenant affichée de la même manière sur tous les navigateurs de dernière génération cités (IE7, Firefox 2, Safari 3 et Opera 9) ! Qu'il est bon de dire ça. Confused

iffle:

Je vais donc m'atteler à rendre le Javascript un peu plus modulaire.

Sephi-Chan

RE: [Démonstration] Un fond d'image qui défile ! - lanoix - 19-11-2007

Sephi-Chan a écrit :Ma page est donc maintenant affichée de la même manière sur tous les navigateurs de dernière génération cités (IE7, Firefox 2, Safari 3 et Opera 9) ! Qu'il est bon de dire ça. iffle

A titre informatif... Cela ne fonctionne pas sous IE6 (à mon avis simplement à cause de la mauvaise gestion des PNG par IE6). Ok, ce n'est pas la dernière version, mais beaucoup de gens utilisent encore IE6... Enfin, sont obligés, lol. Dans leurs boîtes...
Je connais 3 boîtes (dont celle où je bosse) ayant des parcs informatiques importants (+ de 1200 machines) où il ne veulent pas encore mettre à jour IE. Et pourtant on travaille du web... Smile

RE: [Démonstration] Un fond d'image qui défile ! - Plume - 19-11-2007

Et nous avons décidé : "Tant pis pour eux !"

RE: [Démonstration] Un fond d'image qui défile ! - lanoix - 19-11-2007

LexLxUs a écrit :Et nous avons décidé : "Tant pis pour eux !"

Si seulement je pouvais en faire autant Smile

RE: [Démonstration] Un fond d'image qui défile ! - Shidame - 19-11-2007

De toute façon ca sera juste un rendu plus "moche" et ca ne devrai pas changer grand chose au gameplay je suppose.

RE: [Démonstration] Un fond d'image qui défile ! - Plume - 19-11-2007

Non, normalement en tous cas. Nous développons de façon à ce que JS ne soit pas obstrusif - même si c'est pas français Smile

RE: [Démonstration] Un fond d'image qui défile ! - Roworll - 19-11-2007

Sur mes sites, IE6 représente encore 15-20% des visiteurs.
Bon, ce ne sont pas tous des jeux mais c'est une part non négligeable, bien au dessus de ce que je pensais à l'origine.

RE: [Démonstration] Un fond d'image qui défile ! - Sephi-Chan - 19-11-2007

Oui, cette décision a été prise en connaissance de cause. Nous on est des oufs' ! :O

Sephi-Chan