https://github.com/florian-a/jsrassik

Serez-vous capable d'attraper tous les Tyrannosaurus Rex ?
https://github.com/florian-a/jsrassik

canvas dino-game dinosaur-game dinosaurs github-pages javascript webpack

Last synced: about 1 month ago
JSON representation

Serez-vous capable d'attraper tous les Tyrannosaurus Rex ?

• Host: GitHub
• URL: https://github.com/florian-a/jsrassik
• Owner: Florian-A
• License: apache-2.0
• Created: 2022-04-10T11:27:41.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2025-01-03T17:46:55.000Z (about 1 month ago)
• Last Synced: 2025-01-03T18:30:34.915Z (about 1 month ago)
• Topics: canvas, dino-game, dinosaur-game, dinosaurs, github-pages, javascript, webpack
• Language: JavaScript
• Homepage:
• Size: 3.27 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
JSrassiK

Jouez maintenant !


---

Enfant, j'aimais les dinosaures (comme beaucoup d'enfants), d'ailleurs qui n'aime pas les dinosaures ?

En attendant les progrès en clonage d’animaux préhistoriques, je propose un petit jeu dont le but est d'incarner un ptérodactyle qui chasse des tyrannosaures.

Je me suis inspiré des mécaniques de [Flappy Bird](https://flappybird.io/) et des textures ainsi que de certaines mécaniques de [Google T-rex-runner](chrome://dino/) pour imaginer ce jeu.

J'ai décidé d'utiliser les [canvas HTML](https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas) pour réalise ce projet, aucun framework n'a été utilisé.

  ![](./conception/mockup/trex.png)+ ![](./conception/mockup/flapybird.png) = ![](./conception/mockup/pterodactyl.gif)  

---

### Transpilation :

La commande pour transpiler l'ensemble du projet :

```

npm run build

```

### Commandes en jeu :

* Pression n'importe où sur l'écran (si ce dernier est tactile).

  * Via l'évènement [`touchstart`](https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Touch_events).

* Pression sur la barre d'espace.

  * Via l'évènement [`keydown`](https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent) .

* Pression sur la touche 1 pour afficher le nombre d'images par secondes.

* Pression sur la touche 2 pour afficher le nombre d'images par secondes + l'affichage des zones de collisions.

* Pression sur la touche 0 pour cacher toutes les informations de débogages.

### Démonstration :

![](./conception/readme/demo.gif)