Pour suivre ces activités, il est nécessaire d'avoir des connaissances de base en matière de programmation en JavaScript. Des connaissances sur l'utilisation de la bibliothèque JavaScript p5.js sont aussi requises. Si nécessaire, vous trouverez des activités consacrées aux bases de la programmation en JavaScript ici et des activités consacrées à p5.js ici

p5.play est une bibliothèque qui facilite la création de jeux vidéos, elle est développée par Paolo Pedercini. Vous trouverez le site officiel du projet ici.

Il est important de bien comprendre que p5.play est, en quelque sorte, une "surcouche" à la bibliothèque p5.js. Tout ce qui a été vu sur p5.js reste valable ici, p5.play apporte juste de nouvelles fonctionnalités.

À faire vous même 1.1

Dans un dossier "p5_play", que vous aurez créé au préalable dans votre dossier personnel, créez un dossier "play_0".

Dans le dossier "play_0", créez les dossiers et fichier suivants :

À faire vous même 1.2

Vous allez maintenant avoir à télécharger 2 bibliothèques : p5.js et p5.play

Pour télécharger p5.js, rendez-vous sur le site http://p5js.org/download/

Cliquez dans le rectangle "p5.min.js", cela devrait lancer le téléchargement du fichier.

Une fois le téléchargement terminé, placez le fichier "p5.min.js" dans le dossier "lib" que vous venez de créer.

Ensuite il vous faut télécharger la bibliothèque "p5.play" en allant sur le site http://p5play.molleindustria.org/

Une fois sur le site, cliquez sur "Download", cela devrait lancer le téléchargement d'une archive au format zip ("p5.play-master.zip").

Dès que le téléchargement est terminé, "dézippez" cette archive. Vous devriez alors vous retrouver avec un dossier "p5.play-master".

Dans ce dossier "p5.play-master", vous devriez trouver un dossier "lib". Dans ce dossier "lib", vous devriez trouver un fichier "p5.play.js".

Copiez ce fichier "p5.play.js" dans le dossier "lib" que vous avez créé ci-dessus.

Vous devriez maintenant avoir dans votre dossier "lib" 2 fichiers : "p5.min.js" et "p5.play.js"

À faire vous même 1.3

Complétons le fichier index.html :

index.html 


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Créer un jeu avec p5.play</title>
    <link rel="stylesheet" href="style.css">
    <script src="lib/p5.min.js"></script>
    <script src="lib/p5.play.js"></script>
    <script src="script.js"></script>
</head>
<body>
</body>
</html>

Le contenu de ce fichier "index.html" ne devrait pas vous poser de problème, si ce n'est pas le cas n'hésitez pas à poser des questions.

La structure que nous venons de mettre en place (dossier "play_0") pourra être "copier-coller" à chaque fois que vous commencerez à coder un nouvel exemple (il suffira de renommer le dossier en "play_1", "play_2",....). Dans la suite, seul le fichier "script.js" sera modifié. Le fichier "style.css" n'est pour l'instant pas utilisé, il le sera, si nécessaire, dans les prochaines activités.