Skip to content
Ecotic Ecotic Game SDK

Guía rápida

En esta guía vas a crear un juego mínimo que:

  • Recibe el token de Ecotic automáticamente.
  • Envía el inicio de la partida.
  • Envía la puntuación al terminar.
  • Recibe y muestra la recompensa (XP + monedas).

Tiempo estimado: 5 minutos.

  1. Crea el archivo HTML

    Crea una carpeta para tu proyecto y dentro un archivo index.html:

    index.html
    <!DOCTYPE html>
    <html lang="es">
    <head>
      <meta charset="UTF-8" />
      <title>Mi Primer Juego</title>
    </head>
    <body>
      <h1>Mi Primer Juego Ecotic</h1>
      <p id="estado">Esperando conexión...</p>
      <button id="btn-jugar" disabled>Jugar</button>
      <p id="recompensa"></p>
    

      <!-- 1. Cargar el SDK -->
      <script src="https://sdk-ecotic.ced.com.co/ecotic-sdk.js"></script>
    

      <!-- 2. Tu lógica -->
      <script src="game.js"></script>
    </body>
    </html>

  2. Crea game.js

    game.js
    const sdk = EcoticSDK.init({
      gameSlug: 'mi-primer-juego',   // slug que registrarás en Ecotic
      debug:    true,                // ver logs en la consola
    

      onReady(token, api) {
        document.getElementById('estado').textContent = 'Listo para jugar';
        document.getElementById('btn-jugar').disabled = false;
      },
    

      onReward(reward) {
        document.getElementById('recompensa').textContent =
          `+${reward.xp} XP  +${reward.coins} monedas`;
      },
    

      onError(err) {
        console.error('Error SDK:', err.message);
      },
    });
    

    document.getElementById('btn-jugar').addEventListener('click', async () => {
      document.getElementById('btn-jugar').disabled = true;
    

      // 1. Notificar que el jugador inició
      await sdk.start({ modo: 'rapido' });
    

      // 2. Simular jugabilidad de 2 segundos
      document.getElementById('estado').textContent = 'Jugando...';
      await new Promise(r => setTimeout(r, 2000));
    

      // 3. Finalizar con puntuación 750 (escala 0–10 000)
      const resultado = await sdk.complete(750, { tiempo_segundos: 2 });
      document.getElementById('estado').textContent = 'Partida terminada';
      console.log('Resultado:', resultado);
    });

  3. Prueba con el GameCenter Tester

    El juego necesita recibir un token para activarse — por eso el botón empieza deshabilitado. Usa el Tester para enviarlo:

    Terminal window
    # Sirve tu juego desde la carpeta del proyecto
    npx serve .
    # → http://localhost:3000

    Luego abre el GameCenter Tester, ingresa http://localhost:3000 y haz clic en Cargar juego. El Tester enviará el token automáticamente y verás el botón habilitarse.

  4. ¿Qué acaba de pasar?

    • El GameCenter Tester simuló lo que hace el GameCenter real de Ecotic: envió un ECOTIC_GAME_TOKEN al iframe.
    • El SDK recibió el token y llamó a onReady() — el botón se habilitó.
    • Al completar la partida, el SDK envió los eventos al Tester (que los mostró en su panel) y llamó a onReward con una recompensa simulada (xp: 50, coins: 10).

    En producción real el flujo es idéntico, pero el token viene de un usuario autenticado en Ecotic y las recompensas se acreditan de verdad.

Siguiente paso

Ahora que tienes lo básico funcionando: