Jeu CSS/JS multi-niveaux ?

Version imprimable

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

17/09/2018, 21h38
bull100

Ca déchire completement !!!

Il faut absolument faire un "crédit" et que tu mettes en avant ton "TALENT" de programmeur !!!
17/09/2018, 21h48
Invité

Disons surtout qu'on a su mettre nos compétences en commun !

Comme je l'ai lu récemment :

Citation:

"Tout seul on va plus vite, ensemble on va plus loin"

N.B. Prochaine étape : mettre une icône "music"... (pour lancer/arrêter la musique d'ambiance)
On avait bossé sur les sons dans cette discussion.
17/09/2018, 22h17
bull100

voilà déjà pour le cadena : http://bull100.pagesperso-orange.fr/...nephitrip.html

Je m'occupe de Marion...

Musique :
pour l'intro j'avais trouvé ca : http://bull100.pagesperso-orange.fr/...ls/Retreat.mp3 avec ton idée de feuilles qui tombent ca serait tres jolie...

Pendant le jeu : http://bull100.pagesperso-orange.fr/...ight Music.mp3
17/09/2018, 22h42
Invité

1- vert ? :koi:

2- pour la musique, je pense pouvoir m'en débrouiller... Demain...
17/09/2018, 22h51
bull100

vert, c'est parceque les chaines dans ma BD sont de cette couleur ;)
Pour la clé c'est prévu. Je la change lorsque je ferais l'anim
17/09/2018, 23h00
Invité

Comme quoi, il faut vraiment que je lise ta BD... ;)
17/09/2018, 23h02
bull100

1 pièce(s) jointe(s)

Pièce jointe 412641

normalement le visuel est en png transparent.

Je regarde pour la clé...

AH OUI, IL FAUT QUE JE RETIRE MARION DE LA DECO...
A non, c'est déjà fait ?!
17/09/2018, 23h19
Invité

Regarde dans mes images .psd (dans l'archive).

Par contre, il faut diminuer l'ombre portée : elle est coupé a gauche et en bas.
17/09/2018, 23h44
bull100

Au cas ou :
http://bull100.pagesperso-orange.fr/...isuels/cle.wav

http://bull100.pagesperso-orange.fr/...isuels/sas.wav

Pour le dessin de Marion (fin) Je vais faire une illu pour l'occasion...
18/09/2018, 01h10
bull100

1 pièce(s) jointe(s)

Merci à toi psychadelic. Comme tu le disais, tu aurais aimé pourvoir participer d'avantage mais le temps t'a manqué. Même si jreaux62 ne l'a pas demandé, je pense que vu tout le temps et l'énergie qu'il a dépensé sur ce projet, tu seras surement d'accord avec moi pour qu'il soit mis en avant !

Donc jreaux62, j'aurais aimé que l'on puisse faire quelque chose comme ceci (tu peux ajouter l'adresse de ton site si tu veux et ajouter "Consevoir un projet seul on va plus vite, ensemble on va plus loin") :

Pièce jointe 412657
18/09/2018, 03h19
psychadelic

Citation:

Envoyé par bull100

Merci à toi psychadelic. Comme tu le disais, tu aurais aimé pourvoir participer d'avantage mais le temps t'a manqué. Même si jreaux62 ne l'a pas demandé, je pense que vu tout le temps et l'énergie qu'il a dépensé sur ce projet, tu seras surement d'accord avec moi pour qu'il soit mis en avant !

aucun soucis, et c'est amplement mérité pour le travail de jreaux62 ;)
18/09/2018, 08h15
Invité

Good morning, :java:

(je suis réveillé depuis 5h du mat' : j'ai pensé à des amélioration du code !)

Peux-tu me dire le nom de la typo (titres,...) ?

N.B. Pour le crédit, je préfère "jreaux62" plutôt que "Jerome R".
Car je suis plus connu sous ce pseudo.
18/09/2018, 10h10
bull100

Ah je suis Au taff jusque 19h
18/09/2018, 10h53
Invité
OK ;)

J'ai terminé :
- le bouton "Rejouer"
- le bouton "Crédits", avec la "popup" qui apparait/disparait
- le bouton "Orientation" (paysage/portrait)
- j'ai trouvé une typo qui convient : Anton (Google fonts)
Par contre, ton site est H.S !
Ça affiche :

Citation:

Cette page est en réparation.
Patience, nous travaillons à son rétablissement...

Du coup, je n'ai plus accès à tes images... :calim2:
Mais ça ne m'empêche de bosser en local.
18/09/2018, 11h01
bull100

Oui, j ai vu. C orange qui est en maintenance...
18/09/2018, 20h16
bull100

Hello,

Est ce que je peux modifier le Js ? ou est ce que tu vas en avoir un nouveau à me donner ?
Je t'explique. Pour prolonger le jeu, lorsque l'on trouve Marion, on passe a un autre étage.

Je vais ajouter un variable Niv=1 pour les contidiontions (porte et clé) Niv=2 etc...
18/09/2018, 20h20
Invité
Hello,

Houlà !
N'y touche surtout pas !

J'ai fait PLEIN de modif. :
de la musique, des animations,... !
- La dernière version en ligne : http://www.jerome-reaux-creations.fr...nephitrip.html
18/09/2018, 20h23
bull100

C'est magnifique ! Bravo.

Ok, je vais regarder pour l'anim de la clé...

Re.

1- A télécharger : http://www.jerome-reaux-creations.fr...ephi-JR-v3.zip

2- Musiques à renommer :

Retreat.mp3 -> music-game-intro.mp3
Night Music.mp3-> music-game-play.mp3

3- Musiques (sons) à télécharger :

https://www.memoclic.com/medias/sons-wav/2/646.mp3 // harpe
https://www.memoclic.com/medias/sons-wav/2/724.mp3 // bruit de chaine
https://www.memoclic.com/medias/sons-wav/2/691.mp3 // reload gun (ou poignée de porte)
https://www.memoclic.com/medias/sons-wav/2/723.mp3 // Grincement de porte
https://www.memoclic.com/medias/sons-wav/2/646.mp3 // harpe
https://www.memoclic.com/medias/sons-wav/2/729.mp3 // La complainte du fantôme
https://www.memoclic.com/medias/sons-wav/2/383.mp3 // fuite d'eau

D'autres sons :

https://www.memoclic.com/sons-wav/

Important : Il faut mettre des musiques et sons en .mp3 (pas en .wav).

Evidemment, tu peux en mettre d'autres...
Il suffit de les définir dans script.js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // --------- // MUSIC - AMBIANCE this.repMus = this.repImg; this.musicPlayerAudio = document.querySelector('#nephitrip-wrapper #nephitrip-ico-music-audio'); this.musicGame = ''; // this.musicGameIntro = this.repMus+'music-game-intro.mp3'; // this.musicGamePlay = this.repMus+'music-game-play.mp3'; this.musicGameIntro = 'http://www.jerome-reaux-creations.fr/DVP/nephi/'+this.repMus+'music-game-intro.mp3'; this.musicGamePlay = 'http://www.jerome-reaux-creations.fr/DVP/nephi/'+this.repMus+'music-game-play.mp3'; // --------- // MUSIC - SOUNDS this.soundFindKey = 'https://www.memoclic.com/medias/sons-wav/2/646.mp3'; // harpe this.soundLockedDoor = 'https://www.memoclic.com/medias/sons-wav/2/724.mp3'; // bruit de chaine this.soundUnlockDoor = 'https://www.memoclic.com/medias/sons-wav/2/691.mp3'; // reload gun (ou poignée de porte) this.soundOpenDoor = 'https://www.memoclic.com/medias/sons-wav/2/723.mp3'; // Grincement de porte this.soundFindGoal = 'https://www.memoclic.com/medias/sons-wav/2/646.mp3'; // harpe
Tu ne va pas reconnaitre le code JS !
Par contre, je n'ai pas terminer de synthétiser le code : pour les portes, ce n'est pas si simple...
Autant en PHP, on fait ce qu'on veut avec des array. Autant en JS, c'est galère...

Astuce : regarde en bas du code JS, et décoche la ligne :

Code:

// NephiTrip.mapReveal();

(j'ai repris/adapté le cheatcode de psychadelic ;)
Important : N'oublie de SUPPRIMER cette ligne après !!

N.B. Le crâne sur le titre a disparu ?
J'avais justement imaginé d'activer le mapReveal() en cliquant sur le crâne !

18/09/2018, 21h55
bull100

Ah, ca bug ? Est ce que ca vient du fait que je soit sur Chrome ?

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

J'avais le même problème avec le lien d'avant :
La dernière version en ligne : http://www.jerome-reaux-creations.fr...nephitrip.html
18/09/2018, 22h00
Invité

Citation:

Envoyé par bull100

Ah, ca bug ?

1- Explique... :koi:

2- As-tu téléchargé toutes les images / musiques / sons ?

3- Le crâne a toujours disparu ! :weird:

Sinon,... tu as vu : CA CLAQUE ~~SA MERE~~ ~~SA RACE~~ ça plaque, quoi..., NON ? (:fessee:)
18/09/2018, 22h12
bull100

Bah, je ne peux pas tester car le bouton "Demarrer la quête ne fonstionne pas" et il n'y a plus la porte ???

dans les telechargement le Mp3 fuite d'eau le lien ne fonctionne pas.

Par contre j'ai retiré le <base> dans html. C'est peut etre ca ?
18/09/2018, 22h14
Invité
Bon.

Quand on aura l'esprit plus clair (après une période de "recul"), ce serait bien qu'on parle "technique"...

1- Que je t'explique le CSS notamment.
Pour que tu sois en mesure de le comprendre, et de pouvoir le modifier à ta convenance.

2- Concernant le JS.
Tu as vu que j'ai créé un objet :
Code:

1 2 var NephiTrip = { ...
Qu'on initialise au chargement :
Code:

1 2 3 4 5 // au chargement de page window.onload = function() { NephiTrip.initGame(); };
En fait, RIEN n'empêche de créer PLUSIEURS objets :
Code:

1 2 3 4 5 6 7 8 9 10 var NephiTrip = []; // array var NephiTrip[0] = { ... }; var NephiTrip[1] = { ... }; var NephiTrip[2] = { ... };
Ce qui permettrait de créer PLUSIEURS LABYRINTHES DIFFERENTS !
Et de les proposer aléatoirement, à CHAQUE RESET/REPLAY.

Techniquement, c'est essentiellement la fonction initParam:function() qu'il faut modifier (le reste est, à priori, "général")

3- Autre point qui a été abordé mais qui n'a pas été finalisé : la sauvegarde de la partie !
On garde ça pour une prochaine fois, OK ? ;)
18/09/2018, 22h19
Invité

Citation:

Envoyé par bull100

Bah, je ne peux pas tester car le bouton "Demarrer la quête ne fonctionne pas" et il n'y a plus la porte ???

ACTUALISE LA PAGE (touche "F5" du clavier, plusieurs fais si nécessaire)

Si ça ne suffit pas : il faut effacer le cache du navigateur.

Perso, je suis sur ta page... : la Quête Commence !! * ;)

(bon ,c'est vrai, je commence à connaitre le parcours par coeur...
d'où mon post précédent !)
18/09/2018, 22h24
bull100

pareil. Ca ne fonctionne pas :(

et toi si tu testes sur ce lien ca fonctionne : http://bull100.pagesperso-orange.fr/...nephitrip.html

Sinon ca voudrait dire qu'il y a des chemin d'accés pour certain visuels que tu es le seul a pouvoir lire. J'ai vu dns le programme que ce n'est plus lié aux dossier visuel mais "http://www.jerome-reaux-creations.fr/DV.... c'est peut etre ca ?

Une ch'tite anim. si on tarde trop... (toutes les 9s) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#nephitrip-before-start-deco {
 
	/* AJOUTER */
	animation:nephitrip-before-start-deco 9s ease-in-out infinite;
}
@keyframes nephitrip-before-start-deco { 
	0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
	95% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
	96% { -webkit-transform: rotate(-2deg); transform:rotate(-5deg); } 
	97% { -webkit-transform: rotate(5deg); transform:rotate(2deg); } 
	98% { -webkit-transform: rotate(-2deg); transform:rotate(-2deg); } 
	99% { -webkit-transform: rotate(2deg); transform:rotate(2deg); } 
	100% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
}

18/09/2018, 22h28
Invité

Citation:

Envoyé par bull100

pareil. Ca ne fonctionne pas

Si tu ne m'expliques pas ce qui "ne fonctionne pas", je ne peux pas le corriger.... ni te dire ce qui ne va pas...*

* As-tu suivi mes conseils ?

VU !!

Il faut enlever les : ...http://www.jerome-reaux-creations.fr/DVP/nephi/... !
(désolé, je pensais l'avoir fait dans l'archive...)
18/09/2018, 22h36
bull100

1 pièce(s) jointe(s)

Lorsque je lance le jeu ca se presente comme ca.

Pas de porte et le bouton "Lancer la Quête" ne fonctionne pas :(

Pièce jointe 412911
18/09/2018, 22h42
bull100

attends, j'ai essayé sur un autre ordi ca fonctionne !!!

Je regarde et te dis
18/09/2018, 22h42
Invité
Bon...

Sur quel navigateur ??

Car pour moi, ça fonctionne sur Firefox,.... !

...Je teste sur d'autres navigateurs...

Résultats :
OK sur :
- Firefox
- Google Chrome
- Opera
- Edge (!)
18/09/2018, 22h54
bull100

T'as fait un boulot de malade ??? C'est vraiment génial ? et t'as pensé au moindre détails ;)

Les cases de couleur differentes pour les clés et porte c'est top et le son pour "rejouer" lol !!!

par contre ca ne fonctionne pas sur mon mac mais il est en MAC OS 10.6.8 avec chrome

sr mon autre mac "el capitan" ca fonctionne super ainsi que sur Win 10

J'ai un autre mac en OS 10.6.8. Je vais le brancher et tester pour voir si ca viens tu fais qu'il soit trop vieux ou de mon mac

Apres je testerais tout ce que tu m'as indiqué.

MAIS C'EST TOUT SIMPLEMENT GENIAL !
J'AI HATE DE LE FAIRE TESTER !!
18/09/2018, 23h02
bull100

Ok, ca ne vient pas de mon mac car sur l'autre (que je n'ai pas utilisé depuis des mois) ca ne fonctionne pas non plus. (pas de portes au départ et le bouton démarré ne fonctionne pas)

C'est Chrome en Mac OS 10.6.8
18/09/2018, 23h04
bull100

Par contre ca ne viens surement pas du mac mais du fait que je ne peux plus faire de mise a jours sur chrome a cause du fait qu'il soit trop vieux.

Version Chrome 49.0.2623.112 (64-bit)

Cet ordinateur ne recevra plus les mises à jour de Google Chrome, car la compatibilité n'est plus assurée sur les versions 10.6, 10.7 et 10.8 de Mac OS X

Peut etre idem sur xp ou vista ??
18/09/2018, 23h21
Invité

Citation:

Envoyé par bull100

Par contre ca ne viens surement pas du mac....

mac....
Évidemment, j'ai aussi débuté sur Mac... (en 1944-1995)....
Le TOP pour le graphisme, la mise en page,... (Photoshop, QuarkXpress,.....)
Les versions PC n'ont jamais été à la hauteur...
(sans compter, que sur Mac, il était RARISSIME qu"on se fasse hacker...)
Bref : les "années bonheur"....

Et puis,... j'ai cédé au sirènes du "moins cher" (logiciels, jeux,...) *.....

* mais surtout : "qu'on peut hacker comme on veut !"

"PC" = "Plante Constamment".

Ah.... le bon temps du Mac....... (j'ai même eu un iMac !... que j'ai toujours... :calim2: )
18/09/2018, 23h30
bull100

Ben j'ai 3 garcons à la maison (9, 13 et 14 ans) ils ont tous des PC. des geeks :lol:
Mon problème c'est que je ne supporte pas de bosser PC, c'est con hein :lol:

Donc je prefere bosser sur un vieux mac alors que j'ai aussi un PC (qui déchire)

C'est des mac Mini model 2009 que j'ai acheté pour 2 fois rien (j'en ai 3). franchement j'ai tout fait dessus sans le moindre problème. Tel que ma BD sur Toshop avec tablette graphique . Sans compter que je bosse beaucoup sur Blender.
Du coup je change le Mac. C'est toujours un model 2009 mais avec El Capitan. Je ne l'utilise pas car je sent qu'il rame un peu.

Le temps de faire le changement, j'installe deux trois appli et je regarde tes dernieres notes.

J'ai pris le temps de tester sur le PC. Franchement c'est top pro et vraiment agréable a jouer.
18/09/2018, 23h32
Invité

Sincèrement, je t'avoue que, avant d'avoir répondu à ton post, je n'imaginais pas qu'on puisse faire "tout ça"...

Je me suis "pris au jeu"... et j'ai apporté... ma contribution.

Clairement, c'est un jeu !

... mais... comme je l'ai évoqué :

Citation:

"à plusieurs, on va plus loin..."

N.B. Je me demande si la musique d'intro n'est pas en train de m’hypnotiser..........................."
18/09/2018, 23h38
bull100

Tu m'étonnes.

Et c'est peut être un plus pour ceux qui veulent programmer. Dans le sens ou ca permet de voir ce que l'on peut faire en CSS, et JS.
19/09/2018, 00h02
bull100
Citation:
Envoyé par jreaux62

Bon.

Quand on aura l'esprit plus clair (après une période de "recul"), ce serait bien qu'on parle "technique"...

1- Que je t'explique le CSS notamment.
Pour que tu sois en mesure de le comprendre, et de pouvoir le modifier à ta convenance.

2- Concernant le JS.
Tu as vu que j'ai créé un objet :

Code:

1 2 var NephiTrip = { ...

Qu'on initialise au chargement :

Code:

1 2 3 4 5 // au chargement de page window.onload = function() { NephiTrip.initGame(); };

En fait, RIEN n'empêche de créer PLUSIEURS objets :

Code:

1 2 3 4 5 6 7 8 9 10 var NephiTrip = []; // array var NephiTrip[0] = { ... }; var NephiTrip[1] = { ... }; var NephiTrip[2] = { ... };

Ce qui permettrait de créer PLUSIEURS LABYRINTHES DIFFERENTS !
Et de les proposer aléatoirement, à CHAQUE RESET/REPLAY.

Techniquement, c'est essentiellement la fonction initParam:function() qu'il faut modifier (le reste est, à priori, "général")

3- Autre point qui a été abordé mais qui n'a pas été finalisé : la sauvegarde de la partie !
On garde ça pour une prochaine fois, OK ? ;)
Oula.. J'avais perdu le fil de la discution avec le jeu qui ne fonctionné pas sur mon vieux Mac. Mais c'est génial ca !!
C'est exactement ce qu'il manqué..
Je t'explique ce que j'avais en tete. Plusieurs niveaux (3 ou 4) de facon a faire durer la partie. Mais ! J'avais pensé, idem que pour les cles, mettre des rouages. (éparpillé un peu partout) et a la fin du dernier niveau mettre a coter d'une porte des emplacements pour mettre les rouages. et une fois qu'on a tout on peut actionner la derniere porte de fin.

Peut etre partir sur 4 ou 5 niveaux.

En fin de compte. Ce qu'on pourrais faire, c'est de ne pas afficher marion au départ. Une fois qu'on a trouvé Marion a la fin du premier niveau. On affiche marion dans la déco et on change le texte "Trouver la sortie". Pour que ce soit plus simple a programmer, peut etre la derniere porte de chaque niveau d'une couleur differente et on ne peut pas revenir en arriere. Ce qui implique que l'on est obligé de trouver tout les objets avant de passé au niveau suivant. Pas simple...

Qu'en penses tu ?

Mais tu as raison, il vaut peut etre mieux prendre un peu de recul.

Citation:

Envoyé par jreaux62

Une ch'tite anim. si on tarde trop... (toutes les 9s) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#nephitrip-before-start-deco {
 
	/* AJOUTER */
	animation:nephitrip-before-start-deco 9s ease-in-out infinite;
}
@keyframes nephitrip-before-start-deco { 
	0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
	95% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
	96% { -webkit-transform: rotate(-2deg); transform:rotate(-5deg); } 
	97% { -webkit-transform: rotate(5deg); transform:rotate(2deg); } 
	98% { -webkit-transform: rotate(-2deg); transform:rotate(-2deg); } 
	99% { -webkit-transform: rotate(2deg); transform:rotate(2deg); } 
	100% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
}

C'est le genre de petits détails qui me fait marrer dans le jeu Lol...

19/09/2018, 00h40
bull100

Code:

// NephiTrip.mapReveal();

J'ai pas vu la difference en retirant les // ??

Par contre la musique ne fonctionne plus le jeu (en ligne) les sons c'est ok et je n'ai plus l'icone du telephone. J'ai retiré tout les "http://..." pour mettre "visuels/..." ca vient peut etre de ca ma boulette. ?

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