Jeu CSS/JS multi-niveaux ?

Version imprimable

Voir 40 message(s) de cette discussion en une page

13/09/2018, 15h24
bull100

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 ?
13/09/2018, 15h50
Invité

Ç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...
13/09/2018, 20h29
bull100

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 ;) )

Graphiquement, c'est top !! :ccool:

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

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.

13/09/2018, 22h56
bull100

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.
15/09/2018, 08h31
bull100

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 ?
15/09/2018, 09h00
Invité
Bonjour,

J'ai trouvé Marion hier soir ! Ouf ! :calin:

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.
- La gestion des cookies en JavaScript

1 pièce(s) jointe(s)

Tiens,

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

1- dans le code HTML, remplace :

Code:

<img src="visuels/bou1.png" id="boussole" />

par :

Code:

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")
Pièce jointe 412139
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:

1
2
3
4
#game-buttons img {
  display:inline-block;
  margin-left:20px;
}

par :

Code:

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:

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:

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 !

1 pièce(s) jointe(s)

Je me suis amusé à animer aussi la tête !

J'ai utilisé cette image nephi-tete.png :
Pièce jointe 412147

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:

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 :

CSS - animation
CSS - transform (rotate,...)

15/09/2018, 19h13
bull100

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 ?
15/09/2018, 20h07
Invité

Citation:

Envoyé par bull100

...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 :plusser: 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 ! ;))
15/09/2018, 21h13
bull100

3 pièce(s) jointe(s)

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...

Pièce jointe 412181 Pièce jointe 412183 Pièce jointe 412187
15/09/2018, 21h46
Invité
OK.

Avec ces 2 images, on peut faire :
Code:

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:

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 !! :ccool:

N.B. Oui, j'ai bien roulé ma bosse (ingénieur, prof. de dessin, graphiste, artiste,.... !)
15/09/2018, 23h18
bull100

Voilà, c'est vraiment tip top !! http://bull100.pagesperso-orange.fr/.../version2.html
15/09/2018, 23h32
Invité

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.
16/09/2018, 00h25
bull100

6 pièce(s) jointe(s)

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.
Pièce jointe 412219 Pièce jointe 412219 Pièce jointe 412211 Pièce jointe 412201 Pièce jointe 412215 Pièce jointe 412203 Pièce jointe 412207
16/09/2018, 10h51
Invité

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 ! ;)
16/09/2018, 11h01
bull100

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...
16/09/2018, 12h23
Invité

Vu.

Citation:

Envoyé par bull100

...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.

Citation:

...le perso avance automatiquement d'une case... Plus compliqué.

Non, je trouve ça bien comme ça.

Citation:

...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.
16/09/2018, 12h58
bull100

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) : https://www.youtube.com/watch?v=BB9c...?v=BB9clJmpasg

Voir 40 message(s) de cette discussion en une page