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. #61
    Membre confirmé
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Par défaut
    lol, je comprend mieux.

    Lorsque je fais des modifs sur mes visuels dans mon hd ca ne fonctionnait pas. Je pensais pensé que ca venait de mon mac
    par contre suis je obligé de mettre le laby collé en haut a gauche ?

    Est ce que je peux le décaler de bord de 5 mm par exemple ?

  2. #62
    Invité
    Invité(e)
    Par défaut
    Ça se compte en pixels, pas en mm.
    Mais oui, tu peux.

    Par contre, il faut le répercuter dans les dimensions indiquées dans le css.


    N.B. si tu penses pouvoir faire plus simple avec tous les éléments en position:absolute : n'hésite pas !
    C'est TON projet...

  3. #63
    Membre confirmé
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Par défaut
    Ca commence a prendre forme.
    Il me reste encore le premier plan à mettre en couleurs.

    http://bull100.pagesperso-orange.fr/.../version2.html

    Par contre, je n'arrive pas e remonter le visuel des cheveux de Néphi ?!

    Fini ! http://bull100.pagesperso-orange.fr/.../version2.html

    Avant d'aller plus loin (portes et coffre) d'ici 15 jours je ferais une vidéo sur youtube pour expliqué tout ca ( pour toute la partie Developpez.com ca sera préciser )

  4. #64
    Invité
    Invité(e)
    Par défaut
    Graphiquement, c'est top !!


    1- Il reste juste les cheveux de Nephi à bien positionner :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #game-nephi-tete {
        position: absolute;
        display: block;
        width: 190px;
        height: 200px;
        left: 0;
        bottom: 168px; /* A MODIFIER */
        background: url(visuels/tete.png) bottom left no-repeat;
        /*border-radius: 100px;*/ /* A SUPPRIMER */
    }

    A ta place, j'aurais repris la tête complète.
    Et sur l'image de fond, je l'aurais enlevée.

    Ensuite, en CSS, tu aurais pu faire "bouger" un peu la tête (CSS animation: rotation,...) : pour la rendre un peu vivante.
    Voire même utiliser une 2ème image, et le faire cligner des yeux !


    2- Tu peux aussi augmenter la taille et changer la typo de #game-titre.
    Dernière modification par Invité ; 13/09/2018 à 23h51.

  5. #65
    Membre confirmé
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Par défaut
    Merci. Pour l'anim de la tête c'est prévu. Je l'avais déjà animé pour mon ancien site.

    Je te tiens au courant des que j'ai fais la vidéo.

  6. #66
    Membre confirmé
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Par défaut
    Bonjour,

    Tit question. Est ce que c'est possible de faire une capture d'écran (juste la partie map) pendant le jeu ?
    C'est à dire, j'aimerai faire plusieurs étage.
    Donc lorsque je change de niveau j'aimerai faire une capture comme un sprite afin de pouvoir afficher les endroit déjà vu su je retourne au niveau...

    Sinon il me reste encore la solution de faire une ligne de date avec des variables pour indiquer si c'est exploré ou pas et que je dessine la carte avec les carrés. Ex : 0 pas de carré 1 avec carré. Mais je pense que l'affichage risque d'etre long ?

  7. #67
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    J'ai trouvé Marion hier soir ! Ouf !

    Actuellement, la progression n'est pas sauvegardée : si on quitte la page ou l'actualise, on revient au point de départ, map vide.

    Donc, il faudrait pouvoir sauvegarder : à l'aide d'un cookie.
    Une fois que c'est fait, tu peux construire autant d'étages que tu veux, et récupérer les infos dans le cookie.

    Techniquement :
    1- si le cookie n'existe pas, on le crée.
    2- on initialise un array JS (ex. var moves = [];)
    Celui-ci va contenir les coordonnées des cases DEJA utilisées
    3- on récupère les données du cookie (si pas vide) -> on remplit moves
    4- (si moves pas vide)
    -> on (re)génère les images des "carrenoir"
    -> on positionne le carre blanc (flèche) *
    5- à chaque déplacement, dans la fonction moveAhead() :
    -> on obtient les coordonnées top et left
    -> on les enregistre dans l'array moves
    6- on enregistre le cookie
    -> soit à chaque mouvement,
    -> soit tous les xx mouvements
    -> soit au clic sur un bouton "save"

    * cela suppose qu'on enregistre aussi dans le cookie l'orientation de la flèche
    On peut aussi enregistrer la date, et envisager plusieurs sauvegarde

    N.B. Il faut peut-être prévoir aussi un bouton "Reset", pour effacer le cookie.

    Dernière modification par Invité ; 15/09/2018 à 16h01.

  8. #68
    Invité
    Invité(e)
    Par défaut
    Tiens,

    je te propose une petite modif., qui va permettre d'animer la boussole.

    1- dans le code HTML, remplace :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
          <img src="visuels/bou1.png" id="boussole" />
    par :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
          <div id="boussole-wrap">
    		<img src="visuels/boussole.png" id="boussole" />
          </div>

    2- télécharge l'image boussole.png ci-jointe (et mets-la dans ton dossier "visuels")
    Nom : boussole.png
Affichages : 254
Taille : 9,3 Ko
    Tu peux supprimer les images boul1.png, boul2.png, boul3.png et boul4.png, puisqu'elles ne servent plus.

    3- dans le code CSS, remplace :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #game-buttons img {
      display:inline-block;
      margin-left:20px;
    }
    par :
    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
    /* BOUSSOLE */
    #boussole-wrap {
    	position:relative;
    	display:inline-block;
    	margin-left:20px;
    	width:160px;
    	height:90px;
    	overflow:hidden;
    }
    #boussole-wrap img {
    	position:absolute;
    	width:160px;
    	height:160px;
    	top:0;
    	left:0;
    	-webkit-transition:all 0.5s;
    	-moz-transition:all 0.5s;
    	-ms-transition:all 0.5s;
    	-o-transition:all 0.5s;
    	transition:all 0.5s;
    }

    3- Enfin, dans le code JS, remplace :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
        function moveRight() {
          // t = t+1;
          // if (t==4) t=0; // c'est plus cool avec l'utilisation du modulo ( = reste de la division )
          t = (t+1)%4;
          document.getElementById('boussole').src = "visuels/bou"+(t+1)+".png";
        }
        function moveLeft() {
          //t = t-1;
          //if (t==-1) t=3;
          t = (t+3)%4;
          document.getElementById('boussole').src = "visuels/bou"+(t+1)+".png";
        }
    par :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
        var r = 0; // global
    	function moveRight() {
    	  r = r - 90;
    	  document.getElementById('boussole').style.transform = "rotate("+r+"deg)";
    	  t = (t+1)%4;
        }
        function moveLeft() {
    	  r = r + 90;
    	  document.getElementById('boussole').style.transform = "rotate("+r+"deg)";
    	  t = (t+3)%4;
        }

    Et voilà ! La boussole tourne !
    Dernière modification par Invité ; 15/09/2018 à 14h55.

  9. #69
    Invité
    Invité(e)
    Par défaut
    Je me suis amusé à animer aussi la tête !

    J'ai utilisé cette image nephi-tete.png :
    Nom : nephi-tete.png
Affichages : 222
Taille : 52,0 Ko

    Je sais que tu peux créer un gif animé (avec les yeux qui clignent, par exemple ).
    Ce qui n'empêche pas de la coupler à une animation CSS :

    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
    #game-nephi-tete { /* pour que la tete passe au dessus du grid */
        position: absolute;
        display: block;
        width: 175px;
        height: 175px;
        left: 2px;
        bottom: 63px;
        z-index:1;
        background: url(visuels/nephi-tete.png) bottom left no-repeat;
     
        animation:movehead 10s ease-in-out infinite;
    }
    @keyframes movehead { 
    	0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    	35% { -webkit-transform: rotate(10deg); transform:rotate(10deg); } 
    	50% { -webkit-transform: rotate(5deg); transform:rotate(5deg); } 
    	65% { -webkit-transform: rotate(-5deg); transform:rotate(-5deg); } 
    	70% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    	100% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    }

    N.B. Il faut effacer la tête de l'image de fond (interface.png).


    Ce ne sont que des propositions (que je me suis amusé à faire * ).
    ÉVIDEMMENT, tu n'es pas obligé d'en tenir compte...

    * L'idée était aussi de te montrer ce qu'il est possible de faire, juste en CSS :

    Dernière modification par Invité ; 15/09/2018 à 15h50.

  10. #70
    Membre confirmé
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Par défaut
    J'adore, c'est génial ! Merci

    Je suis en dédicace début octobre pour ma BD. Ce n'est pas sure, mais j'ai demandé au festival s'il pouvait me procurer un écran. Je me déplace en train et je peux prendre sans problème un macmini.
    Si c'est ok, je me demande si je ne vais pas proposer le jeu pendant le festival vu que ca a un lien avec ma BD

    A suivre...

    Par contre, vu tout ce que tu as apporter au programme, je me demande si ca ne serait pas plus cool d'ajouter un boutton style "info" et qu'il y a une fenetre qui s'ouvre en plein milieu (style fond mauve cadre beige) et mettre des infos style dessin de ... Programmation de ... et mettre ne lien vers le forum par exemple ?

  11. #71
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par bull100 Voir le message
    ...vu tout ce que tu as apporter au programme...
    Ça, c'est toi qui vois...

    Sur DVP, on est bénévole. On ne fait pas ça "pour la gloire".
    (pour quelques tout au plus )

    Si je me suis investi dans ton projet, c'est que ça m'a intéressé, et plu !
    (cf mon site ART perso)

    Ajoute juste dans les "crédits", ça suffit largement.
    (c'est vrai que c'est sympa de voir "jreaux62" dans les crédits du jeu ! )
    Dernière modification par Invité ; 15/09/2018 à 20h52.

  12. #72
    Membre confirmé
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Par défaut
    et artiste en plus de ca. Bravo

    Pour l'anim des yeux, Je fais la tête en gif ? ou est ce que c'est possible de faire bouger en même temps que la tête ces deux gif ? (pour la tête j'ai ajusté un peu par rapport au gif animés.)
    car j'ai fait un décalage entre les deux gifs de facon a ne pas avoir toujours la même anim...

    Nom : nephi-tete.png
Affichages : 240
Taille : 44,9 KoNom : neph2.gif
Affichages : 216
Taille : 11,5 KoNom : neph1.gif
Affichages : 276
Taille : 6,7 Ko

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

    Avec ces 2 images, on peut faire :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    	<div id="game-nephi-tete">
    		<img class="yeux" src="visuels/neph1.gif" />
    		<img class="yeux" src="visuels/neph2.gif" />
    	</div>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    #game-nephi-tete img.yeux {
        position:absolute;
        top:88px;
        left:82px;
    }
    Cela dit, la superposition des gif montre des "pixels pas propres"...

    Il faudrait que :
    • tu nettoies l'intérieur des orbites "vides" (transparentes : "clignement") (sinon, on voit des pixels clairs, qui se superposent aux yeux mobiles : ce n'est pas beau)
    • tu élargisses les dimensions : au moins de 5 à 10 px tout autour des yeux, jusqu'à une" zone qui ne change pas" (pour mieux se fondre dans le visage)
    • et fais des images "pleines" (surtout pour le "clignement") : sinon, on voit aussi des "pixels clairs non voulus" autour

    Vu que nephi-tete.png n'est pas en "couleur" indexées", ne met pas les gif en "couleur indexées" mais en RGB (RVB).


    Sinon... l'effet est TOP !!



    N.B. Oui, j'ai bien roulé ma bosse (ingénieur, prof. de dessin, graphiste, artiste,.... !)
    Dernière modification par Invité ; 15/09/2018 à 22h02.

  14. #74
    Membre confirmé
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Par défaut
    Voilà, c'est vraiment tip top !! http://bull100.pagesperso-orange.fr/.../version2.html

  15. #75
    Invité
    Invité(e)
    Par défaut
    Excellent !
    (juste le coin de l'oeil gauche, qui ne se fond pas totalement... *)

    J'adore quand c'est "vivant"...


    On peut imaginer aussi faire bouger les feuilles *... l'aile de Marion,... (tout en CSS !)

    * avec un peu de "dextérité" (animation CSS, opacity, scale,...), une feuille peut se détacher, tomber doucement... s'estomper... puis revenir à sa place initiale.
    TOUT ça : en CSS !

    (et avec un peu de JS, on peut faire tomber des feuilles...)

    * Je pense qu'on se comprend : on aime le "pixel près", le "sans défaut", la perfection...


    PROCHAIN DEFI(S) :

    1- faire bouger (un peu) la statue de Marion !
    Pourquoi pas son aile (légère rotation) ?

    Tu te sens d'attaque pour le CSS ?
    (comme la tête de Nephi, il faut créer une image du buste de Marion, à "sur-exposer" ** )

    2- La faire cligner des yeux... (même principe)


    ** comme tu connais Photoshop, c'est le même principe de "calque" : avec z-index (CSS), on positionne le "calque" au dessus/dessous.
    Dernière modification par Invité ; 15/09/2018 à 23h45.

  16. #76
    Membre confirmé
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Par défaut
    Pour Marion c'est jouable. Je pense que je vais pouvoir y arriver en m'inspirant de ce que tu as fait pour Néphi ;
    Et l'idée des feuilles c'est excellent. Ca ajoutera un peu de poésie au jeu. D'ailleur ca me donne une idée.

    Pour les portes, je vais faire des Sas. Dans un premier temps elles ne seront pas fermé a clé. Donc il suffira d'avancer et il y aura juste une anim de la porte qui s'ouvre. Le perso avance de deux cases et la porte se referme derriere.

    Je vais garder les data 0 et 1 pour les murs. Puisqu'il y aura tres peu de portes je les placerais ici :

    imgGrid_5.src = "visuels/"+im05+".jpg";
    imgGrid_6.src = "visuels/"+im06+".jpg";
    imgGrid_7.src = "visuels/"+im07+".jpg";
    if (pos==34 && t==2) imgGrid_4.src = "visuels/bravo.jpg";
    if (pos==976 && t==0) (affichage porte)

    Pour l'animation, je ne sais pas si c'est possible en CSS. Puisque la porte est en 2 partie et la partie gauche coulisse a gauche et la droite coulisse a droite. Ou alors je ferais l'anim en Gif.

    Donc L'idée c'est : lorsque la jeu démarre on se retrouve devant une porte. il y aura un bouton "commencer une partie" et lorsqu'on lance le jeu une anim de la porte. Le perso avance de deux cases et la porte se referme derriere. L'idée c'est qu'avant d'ouvrir la porte. Je mettrai un peu de feuillage autour (histoire d'avoir l'impression que l'on est à l'exterieur) et mettre des feuille qui tombe.
    J'ai également trouvé une musique libre de droit (youtube) pour l'intro : http://bull100.pagesperso-orange.fr/...ls/Retreat.mp3

    Qu'en penses tu ?

    J'essaierai ca d'ici une semaine car je n'ai toujours pas avancé sur mes sculptures et c'est des commandes et c'est bien dommage !
    A bientôt,
    Pat.
    Nom : anim.gif
Affichages : 348
Taille : 84,0 KoNom : anim.gif
Affichages : 348
Taille : 84,0 KoNom : porte3.jpg
Affichages : 239
Taille : 3,6 KoNom : demo.png
Affichages : 266
Taille : 160,3 KoNom : porte4.jpg
Affichages : 255
Taille : 1,6 KoNom : porte1.jpg
Affichages : 238
Taille : 2,0 KoNom : porte2.jpg
Affichages : 221
Taille : 3,9 Ko

  17. #77
    Invité
    Invité(e)
    Par défaut
    Hello,

    je vais réfléchir au système de portes...

    Actuellement on a une grid : 107 - 83 - 51 - 128 - 51 - 83 - 107

    Je pense qu'on peut mettre 1, 2 (ou 4) images supplémentaires "par dessus", en position absolute.

    De cette manière, on ne touche pas à la grid initiale (murs, couloirs,...).
    On vient en sur-impression, comme on l'a fait pour les yeux de Nephi.

    Par défaut, elles seront masquées ( display:none; ).
    Via le JS, on peut les afficher à la demande ( display:block; ou en ajoutant une classe "visible" ).

    Pour les (2 demi-)portes, à priori la solution se trouve dans l'[B]animation gif. Ca semble le plus simple...

    Je vais quand même chercher une solution en CSS.
    C'est possible, mais plus complexe, car il faut faire comme avec la boussole : un div + images en absolute dedans (on peut faire coulisser - translater - les images en CSS).
    Je vais me pencher sur la question...


    VA FAIRE VITE TES SCULPTURES !

  18. #78
    Membre confirmé
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Par défaut
    Je viens d'avoir le festival BD et c'est ok pour l'écran et même si besoin un videoprojo.

    Ne t'embête pas pour l'anim de la porte, je vais là faire en Gif

    A vrai dire j'ai pas trop la tête pour la sculpture

    Je fais l'anim et en place une dans le jeu pour voir ce que ca donne

    Bon voilà, c'est fait a l'arrache mais c'est pour tester : http://bull100.pagesperso-orange.fr/.../version2.html

    Donc si j'avance sur la porte l'anim de la porte s'ouvre. maintenant il faudrait ,une fois la porte ouverte, le perso avance automatiquement d'une case, j'affiche le laby et une autre case j'affiche le laby et derriere nous la porte se ferme....
    Plus compliqué.

    Pour l'anime il y a un mur qui s'affiche derriere. Je fais en sorte que la programmation du jeu soit le plus simple possible de facon a pouvoir ajouter un détails de temps en temps pour l'améliorer. Par expérience je suis vite rendu compte que si je pars sur un projet compliqué au bout d'un moment je me perd ou j'ai pas le temps et du coup sa reste en suspend donc, par exemple, pour les portes il n'y aura qu'un seul plan (une seule vue, jamais plus loin) et toujours un mur deux cases devant...

  19. #79
    Invité
    Invité(e)
    Par défaut
    Vu.

    Citation Envoyé par bull100 Voir le message
    ...Donc si j'avance sur la porte l'anim de la porte s'ouvre...
    Ca, c'est tout bon.
    Finalement, le gif, c'est très bien.

    ...le perso avance automatiquement d'une case... Plus compliqué.
    Non, je trouve ça bien comme ça.

    ...derriere nous la porte se ferme...
    Inutile.
    De toute façon, on ne verra pas la porte se fermer.


    Par contre, il faudrait la ré-afficher quand on fait demi-tour !
    On traverse la porte (on avance de 2 cases vers le Nord), puis demi-tour au Sud : là, on ne la voit plus.

  20. #80
    Membre confirmé
    Inscrit en
    Juillet 2008
    Messages
    88
    Détails du profil
    Informations forums :
    Inscription : Juillet 2008
    Messages : 88
    Par défaut
    Oui, c'est bien comme ca. Mais ...
    pour que ce soit plus simple le mieux c'est de faire avancer le perso de deux cases et refermer la porte. Pourquoi ; Sinon il faut faire des "if" pour les portes ouvertes ou fermé. si j'avance au niveau de la porte et fais une rotation il faut que j'affiche les petits murer de chaque coter. Ainsi que si je me trouve a distance.

    Je vais voir comment faire

    Exemple sur le jeu que j'avais fait sur amstrad (regarder à 50 s) :

+ Répondre à la discussion
Cette discussion est résolue.
Page 4 sur 10 PremièrePremière 12345678 ... 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, 01h58
  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, 15h10
  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, 12h39
  4. Réponses: 3
    Dernier message: 22/06/2006, 17h41
  5. Réponses: 10
    Dernier message: 06/06/2004, 19h05

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