Outils pour utilisateurs
javascript:game_dev
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
javascript:game_dev [2019/10/12 07:04] marclebrun [Page HTML] |
javascript:game_dev [2019/12/20 08:42] (Version actuelle) marclebrun |
||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | ====== Développement de Jeu en JS ====== | + | ====== Développement de Jeux et Animations en JS ====== |
| Sources: | Sources: | ||
| * [[https://www.youtube.com/watch?v=3EMxBkqC4z0|Intro to Game Development with JavaScript - Full Tutorial]] | * [[https://www.youtube.com/watch?v=3EMxBkqC4z0|Intro to Game Development with JavaScript - Full Tutorial]] | ||
| + | * [[https://www.w3schools.com/tags/ref_canvas.asp|HTML Canvas Reference]] | ||
| + | * [[https://developer.mozilla.org/fr/docs/Jeux|Développement de jeux vidéo | MDN]] | ||
| - | ===== Structure du projet ===== | + | Exemples: |
| + | * [[javascript:game_dev:brick_breaker_example]] | ||
| - | <code> | ||
| - | /BrickBreaker | ||
| - | /assets | ||
| - | /images | ||
| - | ball.png | ||
| - | /src | ||
| - | Ball.js | ||
| - | InputHandler.js | ||
| - | main.js | ||
| - | Paddle.js | ||
| - | index.html | ||
| - | </code> | ||
| - | |||
| - | ===== Page HTML ===== | ||
| - | |||
| - | **Ne pas oublier** d'utiliser la propriété **type="module"** dans la balise **script** | ||
| - | lorsqu'on inclut le script JS principal !!! | ||
| - | |||
| - | <code html index.html> | ||
| - | <!DOCTYPE html> | ||
| - | <html> | ||
| - | <head> | ||
| - | <meta charset="UTF-8" /> | ||
| - | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| - | <title>Brick Breaker</title> | ||
| - | |||
| - | <style> | ||
| - | #gameScreen { | ||
| - | /* bordure du canvas */ | ||
| - | border: 1px solid black; | ||
| - | } | ||
| - | img { | ||
| - | /* rendre les images invisibles */ | ||
| - | display: none; | ||
| - | } | ||
| - | </style> | ||
| - | |||
| - | </head> | ||
| - | <body> | ||
| - | |||
| - | <!-- Canvas --> | ||
| - | <canvas id="gameScreen" width="800" height="600"></canvas> | ||
| - | |||
| - | <!-- Les images sont incluses au niveau du HTML mais --> | ||
| - | <!-- elles sont cachées au niveau du CSS --> | ||
| - | <img id="imgBall" src="assets/images/ball.png"> | ||
| - | |||
| - | <!-- Inclure script principal en tant que module --> | ||
| - | <script type="module" src="src/main.js"></script> | ||
| - | |||
| - | </body> | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | ===== Module principal ===== | ||
| - | |||
| - | <code javascript src/main.js> | ||
| - | let canvas = document.getElementById("gameScreen"); | ||
| - | let context = canvas.getContext("2d"); | ||
| - | |||
| - | // vider le canvas | ||
| - | context.clearRect(0, 0, 800, 600); | ||
| - | |||
| - | // dessiner un rectangle rouge | ||
| - | context.fillStyle = '#f00'; | ||
| - | context.fillRect(10, 10, 200, 100); | ||
| - | </code> | ||
| - | |||
| - | ===== Classe Paddle ===== | ||
| - | |||
| - | <code javascript src/Paddle.js> | ||
| - | </code> | ||
| - | |||
| - | ===== Classe Ball ===== | ||
| - | |||
| - | <code javascript src/Ball.js> | ||
| - | </code> | ||
| - | |||
| - | ===== Classe InputHandler ===== | ||
| - | |||
| - | <code javascript src/InputHandler.js> | ||
| - | </code> | ||
javascript/game_dev.1570863889.txt.gz · Dernière modification: 2019/10/12 07:04 (modification externe)
Outils de la page
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
