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
var imgFond;
var imgFlocon;
var imgCadeau;
var imgPereNoel;

//Sprite
var cadeau;
var pereNoel;
//tableau
var flocon = new Array();

var score=0; //gestion du score
var vitesse=2; //vitesse de déplacement cadeau
var cadeauPerdu=0; //nombre de cadeaux perdus

var width; //largeur de la scène
var height; //hauteur de la scène

//fonction pour charger les images
function preload() {

//lancer au demarrage
function setup() {

//fonction appelée en boucle pour dessiner la scène
function draw()

//gestiondes touches
function keyPressed()

//le cadeau est attrapé par le pere Noël
function attrape()

//remonte le cadeau en haut de la page
function initPosCadeau()

//affiche le score sur la scène
function afficherScore()

//gestion de la perte d'un cadeau
function perdu()

//stop le jeu
function stop()

//redemarre le jeu
function start()

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

 

 

 

 

 

 

En poursuivant votre navigation sur mon site, vous acceptez l’utilisation des Cookies et autres traceurs  pour réaliser des statistiques de visites et enregistrer sur votre machine vos activités pédagogiques. En savoir plus.