Vous allez réaliser un mini projet pour créer un jeu sur le thème de Noël.
Télécharger ici les fichiers du projet.
Celui-ci a la structure suivante :
Vous décompresserez le fichier p5js.zip
Vous utiliserez "Netbeans 8.2 -> Fichier -> ouvrir projet" et sélectionnerez le répertoire où vous l'avez décompressé.
Ensuite vous "Exécuterez le fichier" index.html (clic droit sur ce fichier) et vous devriez obtenir le résultat suivant :
La structure des fichiers index.html et script.js est la suivante :
| index.html |
| <link rel="stylesheet" href="/css/style.css"> <script src="/lib/p5.js"></script> <script src="/lib/p5.play.js"></script> <script src="/js/script.js"></script> |
| script.js |
|
// images //Sprite var score=0; //gestion du score var width; largeur de la scène |
|
//fonction pour charger les images //lancer au demarrage //fonction appelée en boucle pour dessiner la scène //gestiondes touches //le cadeau est attrapé par le pere Noël //remonte le cadeau en haut de la page //affiche le score sur la scène //gestion de la perte d'un cadeau //stop le jeu //redemarre le jeu |
Maintenant, vous n'aurez plus cas modifier le fichier js/script.js pour réaliser le mini projet en suivant les étapes ci-dessous.
Etape 1 : Déplacement du père Noël
Aller dans la fonction keyPressed() et ouvrir la console ( clic droit inspecter) et récupérer le numéro des touches.
Modifier la fonction pour que le père Noël puisse se déplacer vers la gauche.
Etape 2 : Gestion du score
Aller dans la fonction attrape() pour gérer le score.
Le score devra s'incrémenter lorsqu'il y a contact entre le cadeau et le père Noël.
Etape 3 : Gérer la perte d'un cadeau
Aller dans la fonction perdu.
Le jeu doit s'arrêter au bout de 3 cadeaux perdus. Il faudra alors appeler la fonction stop().
Etape 4 : Relancer le jeu
Il faudra appuyer sur la barre d'espace pour relancer le jeu (fonction start()).
Etape 5 : Augmenter la vitesse
La vitesse devra augmenter tous les 10 points. Il faudra utiliser le modulo.
Etape 6 : Sauvegarde du meilleur score
Vous devrez utiliser le localstorage pour sauvegarder le meilleur score.
Etape 7 : Cordova
Cordova est une application libre qui permet de compiler une application au format des mobiles.
Attention l'application cordova s'utilise uniquement en ligne de commandes (CLI).
Lancer l'invite de commandes
Créer l'application
cordova>cordova create perenoel com.perenoel perenoel
Aller dans le répertoire perenoel
cd perenoel
Ajouter les plateforme pour android et windows.
cordova platform add android
cordova platform add windows
Avec l'explorateur de fichier copier les répertoires (asset, css, js, lib) de votre application dans le répertoire www du perenoel de cordova.
Ajouter les librairies javascripts dans le fichier index.html de répertoire www.
Brancher votre device (mobile, tablette)
Envoyer l'application vers celui-ci :
cordova run android
Normalement, elle doit être téléversé sur votre device.