Productions de divers projets en javascript

2016, productions de mes élèves d'OC Informatique de 2015 - 2016

Cacher la description du projet

Deux joueurs se trouvent face à une grille.
Chacun ayant sa couleur propre par exemple bleu et orange.
Chacun son tour les joueurs colorient un segment de quadrillage (le segment étant caractérisé par la plus petite différence spatiale entre deux intersections). Pour avoir le droit d'y apposer sa couleur le joueur doit répondre à une question d’arithmétique de base générée aléatoirement (que vaut 4 × 5 par exemple) et pourquoi pas de permettre aux joueurs de choisir le champ des tables de multiple qu’ils souhaitent entraîner. 
Dans un souci de visibilité pour les deux joueurs, les segments de quadrillage coloriés ne restent de la couleur des joueurs qu'un tour de jeu puis deviennent noires (afin qu'on puisse facilement se rendre compte où le dernier coup a été joué)
Lorsqu’un carré d’une unité du quadrillage est complètement encadré par des couleurs (dans ce cas orange et bleu), le joueur ayant colorié le dernier côté du carré verra sa couleur apposée à l’intérieur du carré venant d'être complété et pourra ensuite rejouer. Le joueur ayant rempli le plus de carrés est le vainqueur de la partie. La partie s’arrête lorsque le terrain est entièrement colorié ou permettre à un joueur d'abandonner (et de subir les railleries du vainqueur).

Terrain de jeu.
Le terrain de jeu est un quadrillage carré de 121 carreaux (soit 11 × 11) pour éviter le cas d'égalité. Il sera généré sur canevas.
Le code sera effectué en html et en javascript ainsi que css.

Des parties des ambitions du projet n'ont pas été réalisées.

Cacher la description du projet

   Pour ce projet d'informatique, je veux créer un quiz musical où le joueur doit recréer une partition de musique à partir de bouts de mélodies. Je vais créer une aventure dans laquelle un personnage doit retrouver et recomposer des morceaux pour réussir son aventure.
   Il y aura des cases et des bouts de partition disposés à l'écran et le joueur devra déplacer les parties dans les cases correspondantes. Il aura la possibilité de jouer les partitions indépendamment afin de se repérer ; il pourra vérifier sa réponse avant de la valider. L'aventure se déroulera en plusieurs niveaux avec un niveau de difficulté de plus en plus élevé, par exemple : au niveau un, le joueur devra reconstruire un partition de 3 morceaux ; puis en niveau deux, une partition de 4 morceaux ; etc.
   En ce qui concerne l’esthétique, je pense créer des textes pour expliquer le jeu et pour raconter l'histoire ; que ce soit au début du jeu ou  lorsque le joueur valide ses réponses. 

   Je me suis beaucoup inspiré du doodle de Google sur le 245ème anniversaire de Ludwig van Beethoven : 
http://www.google.com/doodles/celebrating-ludwig-van-beethovens-245th-year.

Cacher la description du projet

   Quizz de Culture Cinéma

L’idée générale du projet est de créer un quizz cinéma avec réponse à choix multiple. Comme indice l’idéal serait de soit faire apparaître une image liée au film, soit une citation, soit une bande originale (son), soit une séquence de film (video).  Il faut découvrir soit le titre d'un film, soit un acteur, soit un réalisateur, soit une question générale toujours autour du thème du cinéma.

Le projet sera certainement plus complexe au niveau graphique que au niveau codage. Car l'aspect graphique devra faire croire au spectateur/joueur qu’il est directement au cinéma. 
L'intro serait comme l'intro d'un film hollywoodien. 

Cacher la description du projet

Mon jeu reprend le concept de ces sites :
http://www.juggling.ch/gisin/MathZero/frame3.html.
http://www.juggling.ch/gisin/MathZero/bidons.html?0.
http://www.juggling.ch/gisin/MathZero/bidons.html?3.
Je vais surtout reprendre le concept du premier lien.
Dans mon jeu il y aura plusieurs niveaux.
De 2 à 3 bidons plus (+) une fontaine afin de les remplir.
Les bidons peuvent avoir les mêmes ou différents capacités. (par ex : 3, 5 et 7 litres)
Le but serait d'avoir un certain nombre de litre(s) dans un bidon.
Chaque niveau sera différent. Les bidons pourront avoir différentes capacités.
Chaque action est comptée. Remplir un bidon grâce à la fontaine utilise une action. Le transvaser dans un autre est une action et vider un bidon est aussi une action. Il y aura un nombre de coups (actions) maximum.
Les différents niveaux seraient à la suite (il n'y aura pas besoin d'aller sur une différente page pour jouer à un autre niveau).
Il y aura la possibilité de restart (remettre à zéro) le niveau et réinitialiser les coups.
Il y aura une musique ou un bruit d'ambiance. Possibilité de couper le son aussi.

Cacher la description du projet

Idée générale :
Ce jeu reprend le concept du jeu « 4 images =1 mot ». Il y aurait 1 niveau qui contiendrait une dizaine de questions. Le jeu « 4images = 1 mot » serait renommé en « 5images=1mot », cette partie de jeu impliquerait la recherche de 4 images qui sont reliés à un même mot.

Conception (+ détaillé) :
Je vais commencer par trouver des mots, auxquels j’associerais 4 images différentes par mot. Ces images je les trouverai sur Google images. Je n’ai pas encore les liens, car elles seront diverses et il n’y aura pas un site précis. Avec les images que je trouverai, je les disposerai côte à côte pour chacun des mots.
La visualisation du site avec le jeu: Il y aura une première page avec la description du jeu, où j'expliquerai les règles du jeu. Dans cette page, il y aura un lien pour aller directement sur le jeu. Sous cette photo se trouvera une place pour pouvoir écrire le mot recherché. Afin d'aider les joueurs j’aimerais mettre les lettres du mot sous cette place pour que les joueurs puissent simplement déplacer les lettres vers les trous. Lorsque la personne trouve le mot de l’image, il y aura un bouton (sur lequel il faudra appuyer) qui le redirigera sur une autre image, jusqu’à la fin du jeu. Lorsque tous les mots seront trouvés, un texte félicitera la personne.

Règles du jeu :
Trouvez le mot qui correspond à ces 4 images, grâce aux lettres données. À chaque fois que tu trouveras le mot une nouvelle série de 4 images apparaîtra. Bonne chance ! (à compléter)

Cacher la description du projet

BUT : Je voudrais faire un quizz qui apprendrais le nom des joueurs de la série A (football) 

Il y aurait tout d'abord 2 modes : un mode équipe et un mode nom de joueur 

Le premier mode (mode équipe) : 

Au milieu de la page il y aurait une image d'un joueur (ex. Balotelli) avec 3 possibilités proposant 3 des 18 équipes de la série A (ex. Inter Milan, A.C. Milan, Juventus): il faut donc trouver l'équipe auquel appartient le joueur sur l'image (bonne réponse : A.C. Milan) 

Le deuxième mode (mode nom): 

Au milieu de la page il y aurait une image d’un joueur avec 3 possibilités proposant 3 noms de joueurs : il faut donc trouver le nom du joueur qui est sur l'image. 

En cas de réponse correct le bouton s’illuminerait en vert et en rouge si le la réponse est incorrect. Dans tous les cas, après un délai de quelques secondes, la question suivante s'afficherait.

Joueurs :
Mario Balotelli, Riccardo Montolivo, Giacomo Bonaventura, Ignazio Abate,  Mamadou Niang, Luca Antonelli, Luiz Adriano, Jeremy Menez, Carlos Bacca, Christian Abate, Diego Lopez, Keisuke Honda, Niegl de Jong,  Mattia De Sciglio, Christian Zaccardo.

En rentrant le nom des joueurs sur google on trouve très facilement les photos des joueurs.

Les images peuvent être prise de wikipédia

En allant sur la page wikipédia de Mario Balotelli différentes images de ce dernier peuvent être tirées. 
ex : https://fr.wikipedia.org/wiki/Mario_Balotelli

Avec le logiciel GIMP je retoucherais la taille des photos et leur poids. 

Cacher la description du projet

Idée générale
Créer un parcours, composé de cases de couleurs différentes. Chaque couleur correspond à une matière, qui définira le type de question (histoire, géo, maths, langue). Avant le déplacement du pion de chaque joueur, ces derniers devront pouvoir répondre à une question, qui leur permettra d’avancer.
Un tirage aléatoire décidera de combien de cases avance le joueur.
Source des questions : http://www.quizz.biz/
Au début, l’utilisateur peut choisir le nombre de joueurs, de un à trois. Le/les joueurs pourra/pourront ensuite choisir la couleur de leur pion (trois couleurs à choix).
(Type trivial)

Questions à choix multiple
Les questions seront à choix multiple. Une fenêtre s’affichera lorsque le joueur devra répondre à la question, il aura trois choix de réponses et devra cliquer sur la bonne réponse.

– bonne réponse :
Le joueur peut retirer le dé (en attendant son tour, s’il joue avec plusieurs joueurs).

– mauvaise réponse :
Le joueur ne peut pas avancer et doit attendre le prochain tour pour pouvoir retirer le dé.

Parcours
Le parcours sera fixe, réalisé avec gimp ou paint.
La détection de couleur (pour afficher le type de question) sera fait avec un canevas.

Cacher la description du projet

Mon projet est une forme de blind test, c'est-à-dire un quiz musical.
Il y aura donc une musique qui se jouera, et le but de l'utilisateur sera de trouver le bon titre de la musique par rapport aux différentes réponses qui lui seront proposées. 4 possibilités seront proposées à l'utilisateur. Il y aura 10 musiques ou il faudra deviner le titre. 
Voici le fonctionnement exact du jeu:
Lorsque l'on arrive sur la page, il y a un bouton «play» au centre. Si l'on clique dessus, une musique joue pendant une dizaine de secondes.
4 titres de musiques sont proposés sous le bouton «play». si le joueur clique sur le titre juste, le bouton devient vert. Si non, le bouton devient rouge. 
 Après que le joueur ait cliqué sur la réponse qui lui semble juste, la page passe à une deuxième musique. 
Le jeu contiendra 10 musiques en tout. 
À la fin du jeu, la page annonce au joueur le nombre de bonne réponses qu'il a donné, avec un petit commentaire.

Références :
Page de Monsieur Gisin, memory musical : http://www.juggling.ch/gisin/javascript/JeuMemorySon/jeu_memory_son.html 

Cacher la description du projet

Note : Ce qui se trouve entre parenthèses est optionnel, je le ferai si tout se passe bien avec une image.

Le jeu consisterait à prendre une image, la couper en plusieurs parties, en de multiples carrés plus précisément. L'image se trouverait dans un cadre. Le but du jeu serait ensuite de reconstituer cette image en déplaçant un carré à la fois dans l'espace vide du cadre.

(Au début, on pourrait choisir un thème pour l'image, ensuite) L'image à réarranger s'afficherait dans un cadre puis en cliquant sur un bouton, l'image se séparerait en plusieurs carrés de manière aléatoire en 7 (voire 15) morceaux.

(Avant le choix de thèmes, on pourrait également choisir la difficulté du jeu. Plus le jeu serait difficile, plus il y aurait de morceaux à recoller. Il y aurait 3 ou 4 niveaux de difficulté.)

(Il y aurait trois grands thèmes : Musique, Films/séries et Jeux vidéo. Pour chaque thème, il y aura environ 10 images (voire plus) à disposition qui arriveront aléatoirement lorsque on choisira le thème.)

Au moment où l'image serait recollée, une musique en rapport avec l'image (par exemple : Musique de Mario si image de Mario, œuvre de Mozart si portrait de Mozart, etc.) serait automatiquement jouée.

(A ce même moment, le nom de l'artiste/compositeur de la musique avec son titre apparaîtra sous le cadre.)

Je vais donc d'abord juste tenter de faire un jeu de taquet avec une image seulement. Je la couperai avec un logiciel de manipulation d'images (Gimp, Paint,…) en 9 (3x3) dans un premier temps, (puis en 16 parties (4x4) si je réussis à aboutir à quelque chose avec 9 parties) puis j'enlèverai une partie (Il y en aura alors 8 et 15 respectivement) pour pouvoir avoir un espace libre dans lequel déplacer un morceau de l'image.

Par la suite, je gérerai les morceaux de l'image et leur placement dans le cadre à l'aide de Javascript. Les morceaux seront en fait considérés comme des petites images. 

Références : image zelda 

Cacher la description du projet

Le but du projet est de réaliser un site web permettant de jouer au Jass en ligne. On pourra jouer à quatre joueurs (deux équipes de deux). Le jeu utilisera les règles standard du Jass.
Pour créer ce jeu, j'utiliserai javascript et html/CSS côté client ainsi que JQuery pour simplifier les requêtes AJAX. Côté serveur, j'utiliserai PHP et PDO pour interagir avec la BDD MySQL.

Voici les différentes parties qui composeront mon programme. Elles seront exécutées dans l'ordre :

1. Page de connexion : Ici on rentre son pseudo.
2. Choix des équipes : Sur cette page, on choisit la partie qu'on veut rejoindre et les équipes.

3. Jeu : Voici les différentes étapes qui composent le développement de la partie.
3.1 Distribution des cartes : Les cartes du joueur sont affichées en bas de l'écran.
3.2 Choix de l'atout : le joueur qui choisit l'atout a une fenêtre qui s'affiche sur son ordinateur avec les différentes couleurs. Il peut cliquer sur la couleur pour la choisir comme atout ou alors chibrer.
3.3 Tour de chaque joueur : le joueur clique sur la carte qu'il veut jouer. La carte est affichée sur son écran ainsi que sur celui des autres joueurs.
3.4 Fin de la plie : On vérifie qui gagne, on l'affiche et on recommence le tour.
3.5 Après 9 plies, on compte les points puis on redistribue les cartes (3.1)

4.  Fin de la partie : Quand une équipe atteint le nombre de points requis, il gagne la partie. On peut recommencer une partie ou quitter.

Tous les fichiers, y compris les fichiers .php, la base de données et quelques explications peuvent être télécharger ICI (5.6 Mo)
Il faut avoir des connaissances PHP et SQL pour les utiliser.

Cacher la description du projet

Mon projet se situe dans la catégorie des jeu de mémorisation. Il se structura de la manière suivante : Il y aura plusieurs rectangles (9 cases) étant chacun d'une couleur différente (rouge, bleu, vert, jaune …), par ailleurs, il y aura un bouton suivant (séquence suivante).

Le but du jeu sera de reproduire la combinaison de couleurs dictée par l'ordinateur. En effet, l'ordinateur produira de manière aléatoire une combinaison de couleurs et le joueur reproduira la séquence de couleurs. Le nombre de couleurs augmentera à mesure que le joueur avance dans le jeu. 

Ordre de fonctionnement :
- l'ordinateur crée de manière aléatoire une séquence de 100 couleurs
- l'ordinateur montre les deux premières couleurs
- le joueur doit reproduire la séquence de deux couleurs
- une phrase dit si c'est juste => +1 point  et séquence suivante; ou non =>retour au début du jeu 

Informatiquement :
- tableau avec des images
- id => lien avec le script => « onclick »
- fonction « random » permettant de trouver une combinaison de 100 couleurs aléatoirement
- « button » => bouton suivant

Références :
 Bernard Gisin : 
   - Création d'un tableau de boutons
 Jeu web :
   - http://fr.ibraining.com/colors 
   - http://fr.ibraining.com/simon/

Cacher la description du projet

Ce jeu est en quelque sorte un quiz linguistique où le but est d'identifier la langue à laquelle appartient un bout de phrase prononcé dans un enregistrement vocal. Il y aura 2 niveaux.

Un niveau normal : Il faudra uniquement identifier la langue. (grâce aux enregistrements vocaux)

Un niveau avancé : Il faudra identifier non seulement la langue, mais aussi l'origine de l'accent. (les phrases dans les enregistrements vocaux auront ensuite une variation d'intonation permettant de déterminer l'accent. À condition d'avoir une bonne oreille !)

Il y aura, en somme, une quinzaine de questions, de difficulté croissante, par niveau.

Interface :
Titre dans l'en-tête de la page.
Fond de page bleu avec des caractères et des phonèmes en blanc éparpillés et de taille variée.
Introduction au jeu : « Bonjour ! Je m'appelle Tristan, et comme l'indique le titre titre, j'ai créé cette page web afin de pouvoir mettre nos capacités auditives et notre mémoire linguistique à l'épreuve.  Il y a ci-dessous deux boutons menant à deux niveaux différents : Un niveau normal et un niveau avancé. Les règles de ce quiz linguistique seront expliquées en tant voulu. Je vous conseille donc commencer par le niveau normal afin de ne pas être dégoûté et 'rage-quitter' ma page à coups de 'ctrl q'».
deux boutons : niveau normal  /  niveau avancé
Niveau normal :
Explication des règles : « Bravo vous êtes sage, et vous avez suivi la voie de la raison ! Dans ce petit quiz, vous seront présentés une quinzaine d'enregistrements audio de diverses langues qu'il faudra identifier. Le plus vous avancez, le plus l'identification des langues sera dure. Vous aurez 4 options mais une seule sera correcte. Si vous ratez, vous devez recommencer ! Bonne écoute ! ». 

2015, productions de mes élèves d'OC Informatique de 2014 - 2015

2010, productions de mes élèves d'OS application des mathématiques de 2009 - 2010