DS4H Minor Web Technologies / Master Informatique 2022-2023

Année 2022-2023

Exemple fait en cours : https://github.com/micbuffa/M1InfoCanvasExemple.git 

Documentation sur les modules JavaScript (import/export) : https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Modules 

Exemple de jeu que je vous incite à refaire (utilise rectangles, cercles, collisions cercle-rectangle ou rectangle-rectangle) : 

 MOOCs à voir :

• Sur w3cx.org :
  • HTML5 coding essentials and best practices pour tout sur le dessin dans un canvas et animation,
  • Mooc HTML5 Apps and Games pour collisions, moteur de jeu, animation basée sur le temps etc.

Année 2021-2022

During this minor you will learn the JavaScript langage through the development of a multiplayer tank game inspired by the Wii Tank game (sold with the WiiPlay game disk). If you don't have a Wii gaming console + this game, you can download the remake named Wee Tanks (made with Unity) and play it on your PC/Mac. The game was originally made using a 3D engine, but you will prototype it using pure JavaScript in 2D, without using any external library.

This year, the Game On Web challenge will be proposed to students from all computer science schools, including your Master. You will be encouraged to port your JavaScript prototype to this BabylonJS platform and turn your 2D game into a 3D game.

Things to do

1. First, play the game and identify the different classes you will have to develop.
    
2. I will live code a small prototype with you that can be seen as a starting point. It will show how we can control a 2D tank with rotating cannon, and control it with keyboard + mouse or with a gamepad.
    
3. You will have to start developing the gameplay, add obstacles, ennemy tanks, mines, etc.
    
4. An editor will also certainly be welcome for creating the different levels.
    
5. You may add music and sound effects later. I can explain that to you in a later session (video or in a classroom).

Ressources

• Projet zip avec un char qui tire et suit la souris. Dezipper, ouvrir le folder avec Visual Studio Code, ouvrir le fichier index.html et le lancer avec click droit/Open With Live Server (si vous n'avez pas cette option, installez l'extension VSCode "Live Server"). C'est un bon exemple de squelette de jeu minimal pour faire un jeu de chars. Montre les classes, les événements, le dessin et l'animation dans un canvas HTML5. Pour approfondir les fonctions de dessins dans le canvas, voir les chapitres 3 et 4 du MOOC HTML5 Coding Essentials and best practices.
  
  
  • Projet fait en cours en live coding. J'ai corrigé l'erreur qui était à la fin du cours. Z avance dans la direction pointée par la souris, S recule. Les touches Q et D sont détectées mais non gérées.
     
• The JavaScript MOOC associated to this course. Don't forget that you can a 100 euros value certification by passing the quizzes.
   
• MOOC : HTML5 Apps and Games that I made in 2016, contains explanations about collision detection, how to handle bullets bouncing off the walls, sprite animation, GAMEPAD API,  etc.)
  • Here is an old project made by a student of this MOOC (tank battle for two players, using keyboard/mouse/gamepad). The code is a bit messy, it does not use classes and modern JavaScript Object Oriented features and best practices, but it shows how a two player tank game can be achieved. Unzip and open index.html with live server.