hello.
Je me suis vaguement remis à la programmation et je vais lancer un laboratoire d'étrangetés et de gameplays
Pour l'instant c'est pas glorieux mais vous pouvez déjà jouer avec le code si ça vous chante
http://patrick.gomez.ruiz.free.fr/canvas/exemple01
http://patrick.gomez.ruiz.free.fr/canvas/exemple01/index3.html
test 3 en #javascript #HTML5 #CS3 gestion d'évènements souris
Cliquez pour déclencher des explosions qui vont disperser les balles.
C'est pas mal visuellement. Tu sais où tu vas, une idée de jeu précise ? Ou tu fais au pif pour découvrir les possibilités du canvas ?
Par contre, sur ta page d'accueil, le menu de gauche reste vide chez moi, je ne sais si tu es au courant.
pour l'instant j'etudie un peu canevas et j'essaie de retrouver mes repères.
pour le menu de gauche de la page d'accueil, c'est juste un test de canevas qui s'adapte en fonction de la taille d'affichage.
ce n'est pas développé. je veux mettre une galerie dans une barre déroulante latérale qui se rétracte. Le tout alimenté par du contenu dans des fichiers xml. ça pourra être des retours d'appels de PHP plus tard pour l'instant ce sont juste des fichiers xml en dur.
donc en gros mes tests me permettent aussi de mettre en pratique ce que je decouvre sur le site. Pour ce dernier je souhaite pouvoir naviguer de video en video (j'utilise une librairie que je bidouille pour directement afficher des videos Youtube )
http://patrick.gomez.ruiz.free.fr/canvas/exemple01/index4.html test 4 en #javascript #HTML5 #CS3 effet de gravité et concrétion assez marrant avec 600 billes (gros ralentissements sur IE)
Cliquez pour déclencher des explosions qui vont disperser les balles.
http://patrick.gomez.ruiz.free.fr/canvas/exemple01/index5.html test 5 en #javascript #HTML5 #CS3 insertion de texte
Premier petit gameplay : Cliquez pour déclencher des explosions. Les balles prises dansle souffle d'une explosion, explosent. L'explosion générée par une explosion de rang N est de rang N+1. Une explosion de rang N rapporte N points aussi le but est de créer les réactions en chaîne les plus longues.
http://patrick.gomez.ruiz.free.fr Bienvenue à toi, barre latérale rétractable et redimensionnée en fonction de la taille de la fenêtre #HTML5 #CSS3 #javasccript #canvas #CMB
Toute la barre de menu à gauche est dans un canvas ? Si oui, tu y vois un avantage particulier ou c'est juste pour l'envie de jouer avec l'objet canvas ?
Je me faisais la réflexion que si tu cherchais un sujet d'exercice pour continuer à explorer ça, tu pouvais nous améliorer le compteur Saint-Con. J'avais ce truc généré en php gd, mais c'est limité et je suis nul pour faire des trucs bien visuellement : http://www.lazone.org/images/reclameSaintCon (noter la taille 150x75 comme pour les vignettes). Juste une idée qui m'était venue l'autre jour en regardant tes tests, si ça t'amuse. Si jamais, éviter de faire un truc trop lourd à charger, évidemment, et puis éviter le son, je dirais.
N.B. : c'est peut-être justifié pour les gens à qui s'adresse ta page d'accueil mais, perso, une page qui m'ouvre d'office une vidéo bruyante, ça me donne toujours envie de refermer l'onglet illico.
oui ça me parait marrant,
je peux même faire un jeu saint con maintenant en javascript
la je dois partir une quelques jours en opération commando et en fonction de mon état au retour je m'y penche
on pourra faire des tests avec des appels php et retour xml je pense qu'on doit pouvoir faire des trucs marrants comme des viewers
pour la barre elle est entièrement dans un canvas parce que je voulais pouvoir gérer le menu déroulant avec des formules mathématiques. ça sera dynamique quand je reprendrais le truc apres mon opération commando
http://patrick.gomez.ruiz.free.fr/canvas/exemple01/3D1.html moteur 3D filiforme - test 01 - réalisation d'une grille. Cliquez sur l'écran pour impulser une vitesse d'Euler aléatoire à la caméra. #javascript #HTML5 #CSS3
http://patrick.gomez.ruiz.free.fr/#id_revue Redécouvrez les 5 premiers numéros de La Revue Qui Te Parle sur le site full video d'Entertaining Monkeys #javascript #HTML5 #CSS3
Il me semble que ton monkey du dimanche travaille pendant la semaine et le samedi.
malheureusement sans le moindre espoir d'une quelconque rémunération
et hop ! http://patrick.gomez.ruiz.free.fr/canvas/exemple01/block1.html (http://patrick.gomez.ruiz.free.fr/canvas/exemple01/block1.html)
Canvas - block game - test 01
test de jeu de bloc en #javascript #HTML5 #CS3
Pour l'instant on gère un loader de medias puis lorsqu'ils sont prêts en cache
alors on lance le jeu qui rempli la grille. Cliquez sur un bloc de couleur pour
détruire toute la zone des cellules limitrophes de la même couleur puis recommencez.
Citation de: lapinchien le Décembre 24, 2015, 12:19:32
et hop ! http://patrick.gomez.ruiz.free.fr/canvas/exemple01/block1.html (http://patrick.gomez.ruiz.free.fr/canvas/exemple01/block1.html)
Canvas - block game - test 01
test de jeu de bloc en #javascript #HTML5 #CS3
Pour l'instant on gère un loader de medias puis lorsqu'ils sont prêts en cache
alors on lance le jeu qui rempli la grille. Cliquez sur un bloc de couleur pour
détruire toute la zone des cellules limitrophes de la même couleur puis recommencez.
Tout ce que j'ai chez moi (Iceweasel alias Firefox), c'est un genre d'allumette qui ne répond à aucun clic. Juste une barre noire avec deux carrés jaunes à gauche. Faut pas coder pendant le réveillon (je suppose que tu es au Japon, ou alors tu réveillonnes tôt).
et si tu fais CTRL+F5 ?
mais j'avais déjà remarqué que beaucoup de fonctionnalités javascript sont interprétées différemment en fonction des OS et browsers et de leur version. ça craint j'ai fait chauffer la console dans plusieurs environnements pour voir d'où venaient deux problèmes. le premier est lié au preloader que j'ai essayé d'innocemment réaliser à scratch. D'abord en lançant le chargement simultané de tous mes media puis en désespoir de cause en enchaînant les chargements. Le problème vient de la détection de la fin du chargement qui n'est pas la même pour les images qui ont une méthode onload() permettant d'appeler une fonction, cette même fonction onload() existe théoriquement pour les videos/audios mais elle est obsolète dans beaucoup d'environnements. En écument les forums j'ai trouvé qu'il était préférable d'associer un Event listener à mes fichiers audio mais ça semble se comporter différement d'un environnement à l'autre. Ce que tu vois est la barre de chargement et j'ai l'impression qu'elle bloque sur le dernier élément à charger. Le second problème est lié à la gestion merdique de la lecture audio en javascript. Pareil en fonction des environnements, on peut ou on ne peut pas sans faire planter l'interpréteur javascript, lire plusieurs sons en même temps. En plus certaines méthodes et propriétés ne sont pas compatibles partout (ex: lire un son à partir d'un moment précis). Je regrète vraiment Flash qui rendait toutes ces conneries de bas niveau transparentes pour les codeurs qui théoriquement devraient n'en n'avoir rien à foutre. J'ai constaté que pour contrecarrer cette instabilité absurde de nombreuses librairies javascript sont apparu mais on se retrouve rapidement à télécharger des mégatonnes de code inutiles pour gérer la moindre connerie basique comme la lecture de sons ou le préchargement.
Après toutes mes adaptations et compromis chez moi, ça marche sur IE12, Firefox, Chrome, Opera mais je suis à deux doigts d'abandonner car pour débugger la moindre connerie il faut se dire que le comportement est different sur des centaines d'environement différents, d'ailleurs les librairies conseillées (CreateJS et compagnie provoquent des bugs dans certains environnement chez moi en particulier la lecture de sons multiples) En réalité c'est juste super mal fichu. Je regrète l'ère des middlewares même s'ils n'étaient pas open source. là non seulement mon code est facilement accessible (mais j'ai bien compris que dans tous les corps de métier il était de plus en plus rare de produire des choses qui puissent avoir une valeur marchande de nos jours et en un sens tant mieux) par contre j'ai pas de machine assez puissante pour coder sous Unity, Sterling, Haxe qui semblent être les outils produisant dans cette période misérable les codes les plus stables et exportables sur de multiples supports.
sinon si tu lances la console sur ton browser, t'as des messages qui apparaissent pendant que le preloader tourne à vide ? voir d'autres bugs signalés comme l'obsolésance d'une methode qui ferait tout planter ?
C'est vrai que j'aurais pu jeter un coup d'oeil à la console. Elle dit :
La ressource média http://patrick.gomez.ruiz.free.fr/canvas/exemple01/block/snd_beep.mp3 n'a pu être décodée. block1.html
J'utilise Iceweasel, qui est une recompilation par Debian de Firefox sans tout ce qui est propriété de Mozilla, mais avec un retard dans les versions. Le support de MP3 est récent dans Firefox. Bref, c'est moi qui ai une vieille config.
http://caniuse.com/#search=mp3 (site intéressant, si tu ne connais pas)
Sinon, au niveau librairies, j'ai de plus en plus de pages qui coincent sur mon vieux PC à force d'en charger, qui bloquent. Mais jQuery, de base, est légère et est devenue une sorte de référence, très répandue. Par contre, pour contrôler l'audio et la vidéo, je ne sais s'ils sont intéressants. Au pif, je vois ce lien qui correspond peut-être à tes besoins : http://codesamplez.com/programming/control-html5-audio-with-jquery
merci bien. Je vais bien être obligé de m'intéresser à ces librairies absurdes et merci à l'open source de bien avoir détruit les players propriétaires qui eux se faisaient un devoir d'être stables sur tout support sans qu'on ait à aller jeter un coup d'oeil dans leur slip pour voir si tout fonctionne bien.
http://patrick.gomez.ruiz.free.fr Ajout d'un parser pour gérer les liens dans la fenêtre info. Surtout utile dans la section "La Revue Qui Te Parle" vers les pages auteurs pour l'instant. #javascript #HTML5 #CSS3
http://patrick.gomez.ruiz.free.fr/canvas/exemple01/3D4.html Canvas - moteur 3D filiforme - test 04 en #javascript #HTML5 #CS3 sphère En cliquant sur la sphère on va créer des explosions de facettes localisées. Des triangles vont se désolidariser de la sphère. La caméra tourne aléatoirement autour de la sphère à chaque explosion.
http://patrick.gomez.ruiz.free.fr/canvas/exemple01/3D6.html Canvas - moteur 3D filiforme - test 06 - #javascript #HTML5 #CS3 Simulation d'un effet de tunnel généré à la volée
http://patrick.gomez.ruiz.free.fr/canvas/exemple01/3D8.html Canvas - moteur 3D filiforme - test 08 3D en #javascript #HTML5 #CSS3 Nous allons réaliser le squelette d'un personnage afin
de l'animer en variant les paramètres qui le composent.
Canvas - moteur 3D filiforme - test 09
http://patrick.gomez.ruiz.free.fr/canvas/exemple01/3D9.html
3D test 9 en #javascript #HTML5 #CSS3 - Classe personnages
Tentative de faire coexister plusieurs personnages animés
sur une petite surface et gérer leurs positions et vitesses.
http://patrick.gomez.ruiz.free.fr/canvas/exemple01/3D10.html 3D test 10 en #javascript #HTML5 #CSS3 - gestion scène - Modifier la manière dont est géré le rendu afin d'entrer à l'intérieur de scènes dont des objets sont derrière la caméra. Rien à voir, mais si on pouvait récupérer les quelques bones en temp réel des squelettes de tous les joueurs d'un vrai match, ça permettrait de voir en 3D des matchs enregistrés voire même en live en baladant la caméra où on le veut. Probablement des milliards pour la startup qui produira ce concept pour une vingtaine de capteurs sur chaque joueur.
(https://pbs.twimg.com/media/CYnwmdvWQAAPvre.jpg)
http://patrick.gomez.ruiz.free.fr/canvas/exemple01/block3.html | test de jeu de bloc en #javascript #HTML5 #CS3 | Cliquez sur un bloc de couleur pour détruire toute la zone des cellules limitrophes de la même couleur. Plus les cellules détruites sont éloignées et plus vous marquez de points. Vous jouez à présent en tour par tour contre un algorithme absurde qui fait des choix aléatoires. Le vainqueur est celui qui dépasse 1000 points. Il est assez facile de gagner et il est très amusant d'essayer de perdre.
(https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/13221055_1080737298639626_906868490243139376_n.jpg?oh=1a2f997fd8f1e6939b33102b072b7c17&oe=57DED3E4)
Pas mal fait, mais effectivement trop facile de gagner et, aussi, de perdre (suffit de cliquer sur des cases isolées). Dès la deuxième part, celle où je perdais exprès, j'ai dû me forcer pour aller jusqu'au bout. Pas le concept de jeu qui va te rendre millionnaire, a priori.
Le dessin de fin de jeu (surtout quand on perd) est trop maladroit mais c'est tellement évident que t'en es sûrement conscient.
S'il y avait du son, je ne l'ai pas entendu mais, comme déjà dit, ce serait alors sans doute lié à ma version spéciale de Firefox (Iceweasel). Pour un projet "pro", éventuellement prévoir un ficher son alternatif au format Ogg, par exemple.
en fait, le CPU joue aléatoirement pour l'instant mais je vais faire une version ou il essaie vraiment de faire le maximum de points et une autre version ou le but sera de pousser l'adversaire à inexorablement avoir à cliquer sur de grandes zones par pénurie de pièces isolées (c'est pour ça que je dis qu'actuellement c'est plus marrant d'essayer de perdre car on voit bien que le CPU jouant aléatoirement au bout d'un moment se bouffe plein de points en faisant tout s'effondrer). les images de fin ont été aléatoirement choisies. En l'état ça n'a aucun intérêt si ce n'est de filer le code d'un jeu de type candy crush à qui voudra en faire quelque chose. Perso, mon intérêt est l'étape suivante qui me servira dans d'autre jeux du même type, l'IA du CPU (même si c'est probablement un bien grand mot)
-sinon pour les graphismes de fin, ça vient des rage comics de 4chan https://fr.wikipedia.org/wiki/Rage_comic
-pour le son, c'est plus ma priorité c'est vraiment trop mal géré par javascript
-pour les jeux pro : je cherche désespérément un vrai framework pour m'y remettre, faire des apps et les vendre mais j'en trouve pas. On ne peut sérieusement pas faire de jeux pro en javascript parce que tout le code est visible ce qui pose des problèmes surtout s'il faut communiquer avec un serveur
-sinon se faire de l'argent avec des casual games, c'était une niche au debut des années 2000, là ce n'est plus trop possible. Les gros groupes sont constitués et continuent à se bouffer les uns les autres, flash est mort, les jeux sont produit en Inde et sous traités chez les pygmées et on paye les développeurs avec des pacotilles.
http://patrick.gomez.ruiz.free.fr/canvas/exemple01/block4.html | test de jeu de bloc en #javascript #HTML5 #CSS3 | Vous jouez à présent contre un algorithme qui fait des choix plus judicieux. Le CPU trouve les cellules qui permettent de remporter le plus de points et il choisit aléatoirement l'une d'entre elles, puis clique dessus. Vous pouvez suivre la réflexion du CPU dans la console de votre navigateur.
Il doit être possible de le battre car il n'anticipe pas la configuration qu'il va vous laisser après s'être gavé de points mais ça va être difficile. Essayez de le piéger par excès de gourmandise afin qu'il vous offre au tour suivant, des zones rapportant encore plus de points.
Cliquez sur un bloc de couleur pour détruire toute la zone des cellules limitrophes de la même couleur. Plus les cellules détruites sont éloignées et plus vous marquez de points. Le vainqueur est celui qui depasse 1000 points.
(https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/13254438_1081248265255196_6160836390199387629_n.jpg?oh=ec50c2a2aa3c160af897813936de3c94&oe=57E2973D)
http://patrick.gomez.ruiz.free.fr/canvas/exemple01/block6.html
Cette version du jeu est plus lente et privilégie le suspense. On fait un test en inversant les rêgles du jeu.
On part de 1.000 points et l'objectif est de rester au dessus de 0. Cliquez sur un bloc de couleur pour détruire toute la zone des cellules limitrophes de la même couleur. Plus les cellules détruites sont éloignées et plus vous perdez de points. On joue contre le CPU et chacun à son tour est obligé de faire des sacrifices. Le vainqueur est le dernier à rester au dessus de 0.
(https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/13241242_1081447678568588_3927302987220728530_n.jpg?oh=4cb9add01e6b55171081488d765021b1&oe=57D4D022)
Je n'ai pas essayé ta toute nouvelle version (pas en étéat). Mais j'ai essayé tout à l'heure avec l'am&lioration des décision côté prog, et je me suis fait battre sans avoir eu vraiment envie de comprendre comment l'éviter, et en faisant ALT + F4 (en fait CTRL-W, je crois, mais osef).
Alors j'ai eu une idée qui est probablement stupide, mais je l'exprime 1 mpinute après l'avoir eue, hein. Le jeu donne une impression de déjà vu, avec cette grille de carrés (Tetris, et tous les déja vu d'après).
Pourquoi pas des putains de triangles équltaréruax ?
Je ne dis pas ça simplement parce que j'ai fait des triangles équilatéraux récemment pour le logo SVG, mais aussi parce que j'ai lu des textes sur les délires pythagoriciens, et le fait est que les triangles équilatéraux, c'est beau.
ça peut se faire. ça s'est déjà fait d'ailleurs. faut aimer les hexagones. à savoir que quand on empile les triangles equilatéraux de manière à ce qu'il n'y ait pas de trous, ça forme des hexagones. une approche intéressante peut être de mettre à contribution des coins des triangles comme dans ce jeu de dominos http://www.domino-games.com/domino-rules/tri-ominos.html (je ne parlerai pas de l'importance des triangles équilatéraux en 3d isométrique et également dans les jeux de type command and conquer mais elle est centrale)
voila ce à quoi ressemble une disposition harmonieuse avec des triangles equilatéraux
(http://fscomps.fotosearch.com/compc/CSP/CSP557/k18522637.jpg)
sinon on notera que dans les règles de ces jeux dits "puzzle games", la gravité a souvent un rôle important pour dynamiser le jeu. Quand on voit l'image ci dessus, qu'on imagine cliquer sur un ou plusieurs triangles, on se rend compte qu'il n'y a pas d'incidence évidente, qu'on ne sait pas trop comment réorganiser naturellement les triangles restant relativement à ceux qui ont été suprimés. souvent ça bloque : par exemple en supprimant un triangle il ne peut absolument rien se passer à moins de mettre en place des rêgles de réorganisation peu intuitives. Il faut un minimum que le joueur puisse anticiper ce qu'il va se passer lorsqu'il retire une ou plusieurs pièces.
sinon dans le genre puzzle game, le plus connu des jeux utilisant une configuration en hexagone est le bubble shooter.
j'en ai deja reproduit dans le passé mais ça m'a l'air plus artificiel, moins épuré qu'une approche avec une bonne vieille matrice + la gravité
(http://www.shooter-bubble.fr//jeux/bubble-shooter-3.png)