IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Jeu CSS/JS multi-niveaux ?


Sujet :

JavaScript

  1. #161
    Membre à l'essai
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Points : 12
    Points
    12
    Par défaut
    J'ai commencé à regardé les changement dans le programme. Ca se complique

    J'ai fait une petite anim pour la clé (visuels/cle.gif) J'ai essayé de l'inclure dans le programme mais je me demande si mon anim n'est pas trop longue. C'est peut etre pour ca qu'on ne la voit pas au début et l'anim se fait également sur les cles que l'on doit trouver...

  2. #162
    Invité
    Invité(e)
    Par défaut
    Hello,

    Pour l'icone du téléphone, elle s'appelle : visuels/nephitrip-ico-rotate.png (fichier à renommer, car tu dois l'avoir sous une autre nom)

    Si tu veux dessiner tes propres icônes, fais-toi plaisir ! (idem pour la note de musique : visuels/nephitrip-ico-music.png).
    Dernière modification par Invité ; 19/09/2018 à 11h58.

  3. #163
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par bull100 Voir le message
    ...Peut etre partir sur 4 ou 5 niveaux....
    Ce serait bien, en effet, mais ça va clairement compliquer et étoffer le code JS ! (qui est déjà passé de quelques dizaines de lignes à plusieurs centaines...)
    (déjà, je ne pensais pas qu'on arriverait aussi loin !)


    Pour l'instant, on a 1 niveau.
    TOUS les paramètres de CE niveau sont actuellement REGROUPES (c'est là où j'ai encore BIEN bossé ! dans la fonction initParam.

    Si on veut plusieurs niveaux, il suffit d'avoir initLevel1, initLevel2, initLevel3,...


    N.B. Mon idée était aussi d'avoir plusieurs labyrinthes, mais sur un seul niveau (histoire qu'on ne refasse pas toujours le même parcours, qu'on fini par connaitre par coeur ! ).
    cela dit, c'est techniquement un peu moins complexe que ton idée, mais ça la rejoint dans le principe : plusieurs labyrinthes.

    Important : je n'ai pas terminé la "synthétisation" du code.
    J'ai bien commencé, mais j'ai un peu de mal avec les array JavaScript...

    Pourtant, c'est ce qui permettrait de vraiment regrouper TOUS les paramètres d'un seul labyrinthe dans la fonction initParam.
    Dernière modification par Invité ; 19/09/2018 à 11h27.

  4. #164
    Invité
    Invité(e)
    Par défaut
    Bon,

    pour la musique d'intro, tu t'es trompé :
    • .../jeu/version2/visuels/visuels/music-game-intro.mp3

    Il faut écrire :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    		this.musicGameIntro = this.repMus+'music-game-intro.mp3';
    		this.musicGamePlay = this.repMus+'music-game-play.mp3';
    Explication :
    on a avant this.repMus = this.repImg; et encore avant this.repImg = 'visuels/';.
    Donc this.repMus contient déjà 'visuels/'.


    Pour mettre les musique dans un autre dossier* (ex. musics), c'est simple :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    		// ---------
    		// MUSIC - AMBIANCE
    		this.repMus = 'musics/';
    C'est tout l’intérêt d'avoir créé 2 variables repImg / repMus distinctes.

    * Ce qui serait une bonne idée
    Dernière modification par Invité ; 19/09/2018 à 11h29.

  5. #165
    Invité
    Invité(e)
    Par défaut
    Ch'tite modif.

    Remplace (dans displayGrid:function()) :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    		// ----------
    		if ( this.pos == this.posStart )
    		{
    			document.querySelector('#nephitrip-wrapper #nephitrip-btn-moveLeft').style.opacity = "0.25";
    			document.querySelector('#nephitrip-wrapper #nephitrip-btn-moveRight').style.opacity = "0.25";
    		} else {
    			document.querySelector('#nephitrip-wrapper #nephitrip-btn-moveLeft').style.opacity = '1';
    			document.querySelector('#nephitrip-wrapper #nephitrip-btn-moveRight').style.opacity = '1';
    		}
    		// ----------
    par :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    		// ----------
    		if ( this.pos == this.posStart )
    		{
    			this.moveBtnLeft.classList.add('inactive');
    			this.moveBtnRight.classList.add('inactive');
    		} else {
    			this.moveBtnLeft.classList.remove('inactive');
    			this.moveBtnRight.classList.remove('inactive');
    		}
    		// ----------

    et AJOUTE dans style.css (juste après #nephitrip-buttons input:hover {...} ):
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #nephitrip-btn-moveLeft.inactive, 
    #nephitrip-btn-moveRight.inactive {
    	opacity:0.5;
    }
    Ça permettra de modifier plus facilement plus tard, si on veux (mettre d'autres propriétés CSS,...).

  6. #166
    Invité
    Invité(e)
    Par défaut
    J'ai changé l'animation des ailes :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    #nephitrip-marion-statue-ailes {
    	position:absolute;
    	display:block;
    	width:110px;
    	height:140px;
    	top:5px;
    	right:5px;
     
    	animation:nephitrip-move-marion-statue-ailes 15s ease-in-out infinite;
    }
    @keyframes nephitrip-move-marion-statue-ailes { 
    	0% { height:140px; top:5px;  } 
    	31% { height:110px; top:35px; } 
    	62% { height:140px; top:5px; } 
    	95% { height:110px; top:35px; } 
    	96% { height:140px; top:5px; } 
    	97% { height:110px; top:35px; } 
    	98% { height:140px; top:5px; } 
    	99% { height:110px; top:35px; } 
    	100% { height:140px; top:5px;  } 
    }

  7. #167
    Invité
    Invité(e)
    Par défaut
    Je ne suis pas fan de l'animation de la clé.

    • en 1ère image, remet la clé (fixe)
    • ne garde que les 3 premières images de ton anim, en les décalant (2-3-4)
    • les 4 avec une tempo de 0.2

    Et renomme le fichier : cle-anim.gif *

    * quand le jeu va s'étoffer, tu auras beaucoup d'images.
    Autant leur donner des noms "explicites".


    Remarque : on peut aussi envisager des clés et des cadenas de plusieurs couleurs !
    Une clé rouge ouvrant un cadenas rouge, une clé bleu un cadenas bleu,.....

    Pour ça, il va falloir :
    • là aussi nommer précisément chaque fichier image : (cle-1.png, cle-anim-1.gif, porte-1.png,.....)
    • définir la corrélation image-porte-clé dans le fichier JS (dans initParam) : c'est là où ça se complique un peu, car pas encore prévu.

  8. #168
    Membre à l'essai
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Points : 12
    Points
    12
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Ce serait bien, en effet, mais ça va clairement compliquer et étoffer le code JS ! (qui est déjà passé de quelques dizaines de lignes à plusieurs centaines...)
    (déjà, je ne pensais pas qu'on arriverait aussi loin !)
    Ben tu as raison !

    C'est ok pour le tel, ailes de Marion (vraiment sympa) , music et les quelques mises à jours. Merci !

    Je pense que le jeu est pratiquement terminé !! Si tu es d'accord, je propose de faire comme tu le disais précédemment. Je vais réaliser 5 niveau different (avec emplacement des porte et cle)

    Qu'en penses tu si a la fin de chaque niveau on passe simplement au suivant et que l'on change "aide NEPHI ET MARION à sortir du Labyrinthe " A la fin de chaque niveau on fait comme un teleportateur (Juste quelque étoiles qui bougent) des que l'on va sur la case on arrive a l'autre niveau ?

  9. #169
    Membre à l'essai
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Points : 12
    Points
    12
    Par défaut
    Bon ,apres le fantome tu ne le voyais peut etre pas comme ca Mais c'est pour respecter l'univers de la BD.
    Pour la Clé, je vais la remettre fixe pour le moment. Je refais l'anim plus tard

    Je suis surpris car je viens de voir que l'on ne peut pas faire de gif transparent sur toshop ou alors une version un peu deg.
    Pour l'anim du fantome qui part du bas vers le haut, je le fais sur le gif ?

    Nom : anim1.gif
Affichages : 231
Taille : 235,6 Kofan.psdNom : fan2.gif
Affichages : 209
Taille : 28,0 Ko

  10. #170
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par bull100 Voir le message
    ...Je vais réaliser 5 niveau different (avec emplacement des porte et cle)...
    Qu'en penses tu...
    Que dirais-tu de garder ça pour... la version 3 du jeu ?


    Je pense aussi qu'il faudrait peaufiner le jeu actuel :
    • ajouter le fantôme,
    • une toile d'araignée par-çi par-là (sur des cases définies dans les params)
    • pourquoi pas une souris qui se sauve, des gouttes d'eau qui tombent du plafond,...
    • et aussi la Marion de fin (as-tu fais une nouvelle illustration ?)

    (j'ai déjà quelques illustrations sonores de fantôme, gouttes d'eau,... )

    Je pense aussi qu'il faudrait améliorer la qualité des gif animés.
    • peut-être avec 5 ou 6 images par gif (actuellement, on en a 4) ?
    • pas grave si la durée de l'anim. dépasse 1 ou 1.2 secondes
    • actuellement la temporisation dans le fichier JS est de 1.5 secondes : on peut l'augmenter un peu



    important : TOUTES les images qui ne sont pas affichées dès le départ DOIVENT être pré-chargées (sinon, elles "sautent" à l'affichage *).
    Ils faut donc les mettre ici :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    	<!-- mettre ici toutes les images (un peu lourdes) à pré-charger -->
    	<div id="nephitrip-preload" style="display:none !important;">
    		<img src="visuels/porte.jpg" />
    		<img src="visuels/porte-anim.gif" />
    		<img src="visuels/cle.png" />
    		<img src="visuels/cadenas.png" />
    		<!-- ... -->
    		<img src="visuels/nephi-start-deco.png" />
    		<img src="visuels/nephi-start-deco-anim.gif" />
    		<!-- ... -->
    		<img src="visuels/bravo.jpg" />
    		<img src="visuels/nephitrip-interface-portrait.png" />
    		<!-- ... -->
    	</div>
    C'est aussi valable pour les "murs".


    * C'est aussi pour ça qu'on ne voit pas correctement toute l'animation de la clé au début du jeu : car elle doit se charger en même temps qu'elle s'affiche.
    (finalement cette animation de la clé n'est pas si mal...)
    Dernière modification par Invité ; 19/09/2018 à 12h56.

  11. #171
    Invité
    Invité(e)
    Par défaut
    1-
    Citation Envoyé par bull100 Voir le message
    ...Je suis surpris car je viens de voir que l'on ne peut pas faire de gif transparent sur toshop ....
    Je suppose que tu parles de Photoshop ?

    SI, on peut faire un gif de bonne qualité.
    Il faut bien configurer "sans tramage..."

    Nom : photoshop-gif.png
Affichages : 183
Taille : 14,2 Ko


    2-
    Pour l'anim du fantome qui part du bas vers le haut, je le fais sur le gif ?
    Non, je vais essayer en CSS.

    J'avais en tête une autre animation : qu'il diminue, et s'évapore dans le fond du labyrinthe...
    Je vais tenter les deux...


    3- As-tu un logiciel de traitement audio ?
    Il faudrait "couper" la musique "bruit de chaine" (trop longue + il y a un "bruit de monstre" dedans... )
    (sinon, on doit pouvoir faire ça avec audacity)
    Dernière modification par Invité ; 19/09/2018 à 13h05.

  12. #172
    Membre à l'essai
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Points : 12
    Points
    12
    Par défaut
    Ok !!

    Pour les anim, oui, il faut que je revois tt ca. disons que pour le moment c'est une Base. Une fois que le jeu sera terminé (avec les 5 niveaux) Je prendrais le temps de faire ca proprement

    comme tu le disais, va falloir prendre un peu de recul. Lorsque ce sera fini. Je vais prendre de le temps de bien comprendre tout ce que tu as fait et je reviendrais surement vers toi. Surtout que j'aimerai faire par la suite des vidéos sur Youtube (pour le lancement du jeu ca sera plus facile). Mais la, j'ai perdu un peu le fil. va falloir que je réfléchisse a tt ca.

    Je pars cet aprem, pendant 3 jrs, en formation. Pour ma PAO, je vais bosser avec les commerciaux. Histoire de me mettre un peu a leur place et eux vont prendre la mienne
    Je prend un ordi au cas ou j'aurais une connection a l'Hotel. Mais dans le train je vais déjà voir dessiner les Laby...

    Oui, j'ai installé un logiciel audio. Je regarde ca
    Ah, et pour Marion, je ne l'ai pas encore fait. Apres j'ai mon dessin de base. A la fin du 5 eme Labyrinthe, on trouve Marion et on pourrait mettre la premiere illustration. C'est une page de ma BD mais que j'ai entierement refaite. Donc c'est une exclu pour le jeu..

    Ca peu peut être te donner une idée pour la fin.

    Nom : illu.jpg
Affichages : 204
Taille : 161,8 Ko

  13. #173
    Invité
    Invité(e)
    Par défaut
    OK.

    1- Pense à mettre TOUTES les images dans <div id="nephitrip-preload" style="display:none !important;">.
    C'est important pour la fluidité du jeu.


    2- Petite explication pour les images "extra" (clé, porte, fantome,.....) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    	<div id="nephitrip-grid-extras">
    		<img src="visuels/vide.png" id="extra01" />
    		<img src="visuels/vide.png" id="extra02" />
    		<img src="visuels/vide.png" id="extra03" />
    	</div>
    J'ai mis 3 niveaux : on peut donc (si on veut) afficher 3 "extra" en même temps.

    Mais chaque niveau a sa largeur propre (en hauteur, ils font tous 368px):
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #nephitrip-grid-extras img#extra01 {
    	width:396px;
    	left:107px;
    }
    #nephitrip-grid-extras img#extra02 {
    	width:230px;
    	left:190px;
    }
    #nephitrip-grid-extras img#extra03 {
    	width:128px;
    	left:241px;
    }
    Au niveau du fichier JS, ça se traduit par (ici porte + chaine + clé) :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    this.imgExtra_1.src = this.imgExtra_Door; // dans "extra01"
    ...
    this.imgExtra_2.src = this.imgExtra_Lock; // dans "extra02"
    ...
    this.imgExtra_3.src = this.imgExtra_Key; // dans "extra03"
    ...
    Dernière modification par Invité ; 19/09/2018 à 13h31.

  14. #174
    Membre à l'essai
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Points : 12
    Points
    12
    Par défaut
    Ah ,la vache c'est vraiment génial

    Je regarde pour le préload et le mp3 a couper

  15. #175
    Invité
    Invité(e)
    Par défaut
    Ils sont sympa ces petits fantômes :
    Nom : illu-fantome.jpg
Affichages : 182
Taille : 13,7 Ko
    Et c'est plus dans l'idée que je m'en faisait !
    Ils seraient aussi plus faciles à animer (gif + CSS), non ?

    Tu as aussi toute une galerie de personnages secondaires : même la souris (au 1er plan), et les papillons * !
    C'est TRÈS intéressant....

    * si tu me fais quelques papillons animés, je peux les faire voler près de la statue...




    N.B. l'AUTRE fantôme (que tu as déjà fait) : il pourrait servir de "personnage secondaire", par exemple devant chaque porte de passage au niveau suivant !
    Il pourrait dire quelque chose comme : "Viens, c'est par ici !", puis disparaitre.

  16. #176
    Membre à l'essai
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Points : 12
    Points
    12
    Par défaut
    Oui, cool ca me plait
    Pour les autres fantomes, ceux de L'illu, il faut que je les animes en gifs ? si oui, je peux prendre ma tablette graphique a l'hotel et voir ce que je peux faire
    Pour les papillons on pourrais également les garder pour l'illu de fin

  17. #177
    Invité
    Invité(e)
    Par défaut
    1- Pour tout ce qui est graphisme, tu es le seul maître à bord !

    Je ne fais qu'apporter les idées qui "pop" dans ma tête



    2- Concernant les animations :
    on ne peut pas tout faire en CSS.

    • Par exemple, pour avoir un papillon qui bat des ailes, ou un fantome qui tourne la tete à droite à gauche (ou cligne des yeux), il faut faire une animation gif.
    • Par contre, en CSS, on peut le faire flotter (comme la clé), tourner, ou même se déplacer !

    A toi de bien distinguer les 2.

    image animée gif + animation CSS peuvent parfaitement se combiner !


    remarque : pour les ailes de la statue, j'ai utilisé une astuce.
    Je modifie (via le CSS) la taille de l'image et sa position.
    Ça donne l'impression qu'elle bat des ailes !

  18. #178
    Invité
    Invité(e)
    Par défaut
    Je fais très certainement (re)faire des modifications dans le code JS.

    Donc, si tu fais des modif. de ton coté, préviens-moi.
    Dernière modification par Invité ; 19/09/2018 à 16h43.

  19. #179
    Invité
    Invité(e)
    Par défaut
    Tiens, un autre site de sons :

    Par contre, ils sont généralement trop long.
    • il faut les couper : 2 à 3 secondes maxi
    • sauf "passage secret" : ça peut être le son entre 2 niveaux (mur qui se déplace)

  20. #180
    Membre à l'essai
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Points : 12
    Points
    12
    Par défaut
    Ok
    Pour couper les MP3 J'ai utilisé ce logiciel en ligne : http://cutmp3.net/

+ Répondre à la discussion
Cette discussion est résolue.
Page 9 sur 10 PremièrePremière ... 5678910 DernièreDernière

Discussions similaires

  1. Menu multi niveaux en CSS
    Par mbar dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 29/06/2009, 02h58
  2. [Joomla!] Menu horizontal multi-niveaux
    Par erman_yazid dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 1
    Dernier message: 05/03/2008, 16h10
  3. [Conception] Génération d'un menu HTML multi-niveaux (indéfini)
    Par R'SKaP dans le forum PHP & Base de données
    Réponses: 1
    Dernier message: 15/02/2007, 13h39
  4. Réponses: 3
    Dernier message: 22/06/2006, 18h41
  5. Réponses: 10
    Dernier message: 06/06/2004, 20h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo