Tir à l’arc en SVG sur 5 niveaux : bandez l’arc, visez, relâchez — trajectoire en Bézier physique et sons entièrement synthétisés à la volée.
Vue d’ensemble
Apex Shot est un jeu de tir à l’arc entièrement rendu en SVG : arc, cible, lune, arbres et obstacles composent une scène vectorielle qu’on parcourt sur cinq niveaux. On bande l’arc en appuyant sur l’écran, on vise en déplaçant le doigt ou la souris, et on relâche pour tirer — cinq flèches par niveau, avec une cible à six anneaux concentriques qui note la précision du tir.
Le dernier niveau introduit une cible mobile animée en boucle, avec un bras télescopique qui n’apparaît que sur ce niveau. Le jeu impose l’orientation paysage — une invite de rotation s’affiche automatiquement en portrait.
Fonctionnalités
- Scène SVG complète — arc, cible, lune, arbres, obstacles et HUD, tous dessinés en vectoriel dans un même viewBox.
- Visée à la souris ou au doigt — appui pour bander l’arc, glissé pour ajuster l’angle et la tension, relâchement pour tirer.
- Trajectoire physique — vol de la flèche calculé en courbe de Bézier cubique à partir de la vitesse et de la gravité, recalculé image par image.
- Détection de collision précise — intersection de segments entre la pointe de la flèche et chaque arête d’obstacle.
- 5 niveaux — obstacles différents à chaque niveau, le dernier ajoutant une cible mobile animée en boucle.
- Score en anneaux concentriques — six zones de score (10 à 100 points), cinq flèches par niveau, score total cumulé.
- Sons 100 % synthétisés — aucun fichier audio : chaque bruitage (tension, twang, sifflement, impact, craquement) est généré à la volée par synthèse Web Audio.
Sous le capot
La trajectoire de la flèche n’est pas une simple parabole : c’est une courbe de Bézier cubique paramétrée par la vitesse et la gravité, dont on fait avancer un paramètre t à chaque frame pour repositionner la pointe (bezierPoint/bezierTangent). La détection d’impact teste, à chaque frame, l’intersection du segment formé par la pointe de flèche avec chaque arête d’obstacle — les obstacles eux-mêmes sont dessinés de façon imprative avec dégradé bois, ombre, reflet et lignes de veinage.
Toute l’animation — vol de flèche, ressort de l’arc, transitions d’interface, scintillement des étoiles, pulsation de la cible — passe par GSAP 1.x (TweenMax). Le son, lui, ne charge aucun fichier : une IIFE expose directement des fonctions de synthèse procédurale Web Audio pour la tension de l’arc, le relâchement, le sifflement de vol, l’impact et le craquement du bois.
Contrôles
| Geste | Action |
|---|---|
| Appui (souris ou tactile) | Bande l’arc |
| Glisser | Vise — ajuste l’angle et la tension |
| Relâcher | Tire la flèche |
Stack technique
- SVG — scène et rendu vectoriel complet du jeu
- GSAP 1.x (TweenMax) — toutes les animations du jeu
- Web Audio API — synthèse procédurale de tous les sons, sans fichier
- Vanilla JS — script unique, sans classe ni module, zéro framework
Cas d’usage
Un mini-jeu d’adresse pensé pour le portfolio : démontrer une physique de trajectoire crédible, une détection de collision précise et une synthèse sonore procédurale, le tout en SVG pur et sans la moindre ressource externe.
Cinq flèches, zéro fichier son — tout se joue en vecteurs et en ondes.
