Un tower defense hecho con antigravity en solo 3 días

Originalmente usaba claude code y cursor, pero después de renunciar el año pasado me cambié a antigravity desde noviembre, y desde entonces he estado creando varios proyectos de servicios web de juguete, prácticamente uno por día. De repente, hace 3 días (1/2), me dieron ganas de intentar hacer un juego de tower defense.
Como originalmente soy desarrollador frontend web, me daba flojera envolverlo como app, así que decidí que funcionara solo en un entorno de navegador de escritorio. Además, como sentí que trabajar con Canvas y crear archivos de imágenes iba a tomar demasiado tiempo, empecé con la idea de aprovechar los emojis al máximo.

Quería terminarlo en un solo día, pero mientras lo hacía me fue divirtiendo y, entre ajustes y funciones nuevas, al final me tomó 3 días completos. T_T

El stack tecnológico básico es el siguiente.

• Frontend: Next.js 14+ (App Router), TypeScript, HTML5 Canvas
• Backend: FastAPI, Python 3.9+, Pydantic
• Base de datos: Supabase (PostgreSQL)
• Despliegue: Vercel

Después de varios cambios y ajustes, la lógica final del juego quedó así.

1. Poder de ataque de las torres

Las torres aumentan su alcance (Range) en 10 cada vez que suben de nivel mediante Merge, pero la eficiencia del daño se ajusta a 1.8x por balance.

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

2. Patrón de aparición de enemigos (Wave Logic)

Para evitar la monotonía, se aplican varios patrones de waves.

• Wave normal (Horde Mix): aparecen mezclados enemigos del tier actual (70%) y del tier anterior (30%).
• Wave de jefe (Every 6th): aparece 1 enemigo jefe, el más fuerte de la era, escoltado por secuaces.
  • Cantidad de enemigos en la wave de jefe: Wave / 6 (1 en la wave 6, 2 en la wave 12...)

4. Recompensa de oro (Active)

Obtienes oro al derrotar enemigos o al completar una wave.

P. D.: no consideré demasiado el entorno móvil. Agregué eventos táctiles y funciona bien en Fold o en tablets, pero no pensé mucho en pantallas pequeñas.

P. D.: si encuentran puntos de mejora o bugs, avísenme en los comentarios y los iré corrigiendo cuando tenga tiempo.

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

[wancomplete]

Yo también probé https://verse8.io hace poco mientras intentaba hacer un juego, y como incluso te crea directamente las imágenes y las animaciones de sprites 2D, pude enfocarme solo en la lógica del juego sin gastar tiempo en trabajar los assets. Además, como hasta te permite publicar de inmediato desde la plataforma, fue realmente muy cómodo no tener que preocuparme por el hosting por separado.

[huiya]

Está divertido. Se siente muy novedoso que se usen los emojis de forma tan activa.
Como no suelo jugar mucho juegos de tower defense, no sé bien si esta opinión sea acertada, pero me resulta raro que no estén separados el tiempo de oleada y el tiempo de preparación, y que incluso cuando llega una oleada se pueda cambiar de lugar la posición de las torres.
Llevándolo al extremo, se puede seguir cambiando la posición para hacer que ataquen en todo momento, así que siento que el alcance pierde sentido.

[cybrshin]

Gracias por jugarlo y divertirse.
Mientras lo hacía, a mí también me parecía raro mover la posición, pero me dio la impresión de que eso podía quedarse tal cual porque, a su manera, es una fortaleza de este juego y un elemento dinámico que se puede controlar.
De hecho, si quieres moverlo rápido, es muy difícil hacerlo si no haces merge de las torres.
Siento que el balance del juego seguirá siendo un punto para pensar, por ejemplo, si conviene agregar una penalización adicional por moverlas.

[huiya]

Ah, ya había considerado todo eso. Mi reflexión fue superficial.

[cybrshin]

No. Gracias por tu opinión.

[waylake]

Hola, lo jugué y me divertí bastante; les comparto un comentario relacionado con seguridad.

• Actualmente el secreto HMAC (clave de firma) está expuesto en el frontend
  • Desde el frontend se pueden modificar directamente gold, wave, lives y towers

También se los aviso porque podría haber problemas de costos con los planes de Vercel y 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, gracias~

[roxie]

No, esto no tiene sentido... ¿700 oleadas...???

[cybrshin]

Se puede jaja