Un tower defense créé en 3 jours avec antigravity

Au départ, j’utilisais claude code et cursor, puis après avoir quitté mon poste l’an dernier, je suis passé à antigravity à partir de novembre et je créais chaque jour divers petits projets de services web. Et soudain, il y a 3 jours (02/01), j’ai eu envie d’essayer de faire un jeu de tower defense.
À la base, je suis développeur frontend web, donc emballer ça dans une app me paraissait fastidieux. J’ai donc décidé de le faire fonctionner uniquement dans un environnement de navigateur desktop, et comme les animations sur canvas et le travail sur des fichiers d’images risquaient de prendre trop de temps, je suis parti sur l’idée d’exploiter au maximum les emojis.

Je pensais terminer en une seule journée, mais comme c’était amusant à développer, j’ai continué à modifier et ajouter toutes sortes de choses, et au final cela m’a pris 3 jours. snif

La stack technique de base est la suivante.

• Frontend: Next.js 14+ (App Router), TypeScript, HTML5 Canvas
• Backend: FastAPI, Python 3.9+, Pydantic
• Base de données: Supabase (PostgreSQL)
• Déploiement: Vercel

Après divers ajustements, la logique du jeu a finalement été définie comme suit.

1. Puissance d’attaque des tours

Les tours gagnent 10 de portée (Range) à chaque montée de niveau via une fusion (Merge), mais l’efficacité de leur puissance d’attaque est ajustée à x1,8 (équilibrage).

• Formule: Damage = floor(BaseDamage * (1.8 ^ (Level - 1)))
  • Lv 1: 10
  • Lv 2: 18
  • Lv 3: 32
  • Lv 4: 57

2. Schéma d’apparition des ennemis (Wave Logic)

Divers schémas de vagues sont appliqués pour éviter la monotonie.

• Vague normale (Horde Mix): des ennemis du tier actuel (70 %) et du tier précédent (30 %) apparaissent mélangés.
• Vague de boss (Every 6th): un boss, soit l’ennemi le plus puissant du moment, apparaît, escorté par des sbires autour de lui.
  • Nombre d’ennemis dans une vague de boss: Wave / 6 (1 ennemi à la vague 6, 2 ennemis à la vague 12...)

4. Récompense en or (Active)

Vous gagnez de l’or en éliminant des ennemis ou en terminant une vague.

ps. L’environnement mobile n’a pas été vraiment pris en compte. J’ai ajouté des événements tactiles, donc cela fonctionne plutôt bien sur Fold ou sur tablette, mais je n’ai pas vraiment pensé aux petits écrans.~

ps. Si vous voyez des points à améliorer ou des bugs, dites-le-moi en commentaire et je les intégrerai quand j’aurai un peu de temps.

https://tower.dsp.ai.kr/

[wancomplete]

J’ai récemment essayé de créer un jeu moi aussi et j’ai testé https://verse8.io : le service génère même directement les images et les animations de sprites 2D, ce qui permet de ne pas perdre de temps sur la création des assets et de se concentrer uniquement sur la logique du jeu. En plus, comme le déploiement se fait directement sur la plateforme, pas besoin de se soucier de l’hébergement séparément, c’était vraiment très pratique.

[huiya]

C’est sympa. Le fait que les emojis soient utilisés activement me paraît vraiment très nouveau.
Je ne joue pas souvent aux jeux de tower defense, donc je ne sais pas si mon avis est pertinent, mais je trouve étrange qu’il n’y ait pas de séparation entre le temps de vague et le temps de préparation, ce qui permet de changer la position des tours même au moment où la vague arrive.
À l’extrême, on a l’impression qu’on peut les déplacer en permanence pour les faire attaquer à chaque instant, ce qui rend la portée insignifiante.

[cybrshin]

Merci d’y avoir joué avec plaisir.
En le développant moi-même, j’ai aussi trouvé étrange le fait de pouvoir déplacer la position, mais j’ai décidé de le laisser tel quel parce que ça me semblait pouvoir devenir à sa manière un point fort du jeu, un élément dynamique que l’on peut contrôler.
En réalité, si on veut déplacer rapidement, c’est vraiment très difficile sans fusionner les tours.
Je pense que l’équilibrage du jeu, notamment la question d’ajouter ou non une pénalité au déplacement, restera un point de réflexion permanent.

[huiya]

Ah, vous aviez déjà tout pris en compte. J’ai manqué de réflexion.

[cybrshin]

Non. Merci pour votre avis.

[waylake]

Bonjour, j’ai pris beaucoup de plaisir à y jouer. Je vous transmets un retour lié à la sécurité.

• Actuellement, le secret HMAC (clé de signature) est exposé dans le frontend
  • Il est possible de modifier directement depuis le frontend gold, wave, lives et towers

Je vous le signale également car cela pourrait entraîner des problèmes de facturation sur les offres Vercel et Supabase.

const state = {  
  towers: [],    
  gold: 9999,  
  wave: 1,       
  lives: 1       
};  
  
const state_raw = JSON.stringify(state);  
const user_id = "11111";  
const secret = "11111";  
  
(async () => {  
  const key = await crypto.subtle.importKey(  
    "raw",  
    new TextEncoder().encode(secret),  
    { name: "HMAC", hash: "SHA-256" },  
    false,  
    ["sign"]  
  );  
  const signatureBuffer = await crypto.subtle.sign(  
    "HMAC",  
    key,  
    new TextEncoder().encode(state_raw)  
  );  
  const signature = Array.from(new Uint8Array(signatureBuffer))  
    .map(b => b.toString(16).padStart(2, "0")).join("");  
    
  fetch("https://tower.dsp.ai.kr/api/sync";, {  
    method: "POST",  
    headers: {  
      "Content-Type": "application/json",  
      "Accept": "*/*"  
    },  
    body: JSON.stringify({  
      user_id,  
      state_raw,  
      signature  
    })  
  })  
  .then(res => res.text())  
  .then(console.log)  
  .catch(console.error);  
})();  
  

[cybrshin]

Ah, merci~

[roxie]

Mais ça n’a aucun sens… 700 vagues, sérieusement… ???

[cybrshin]

C’est possible haha