How does game creation work?

AI-Powered Game Development

We use an AI agent to code both the client-side and server-side code for your game. Simply describe what you want to build, and our agent will generate a fully functional multiplayer game. The server-side code runs on our cloud infrastructure, so you can play with your friends anytime without needing to host anything yourself.

Manual Game Creation

If you want to manually create games without vibe coding, or you want to use your own ChatGPT/Gemini window to code, you can follow the structure below. Games consist of two main parts: client code and server logic.

Client-Side Structure

The client code defines a function called initGameClient that initializes your game's UI and handles rendering:

function initGameClient(container, socket, roomId, emitAction) {
  // Create your game's UI elements
  const canvas = document.createElement('canvas');
  canvas.width = 800;
  canvas.height = 600;
  container.appendChild(canvas);

  // Set up your game rendering and input handling
  // ...

  // Create the game instance
  const gameInstance = {
    onStateUpdate: (state) => {
      // This gets called whenever the server sends a new state
      // Update your UI based on the new state
      console.log('New state:', state);
    }
  };

  // Send actions to the server
  canvas.addEventListener('click', (e) => {
    emitAction('playerAction', { x: e.clientX, y: e.clientY });
  });

  return gameInstance;
}

Server-Side Structure

The server logic is an object with initialState and a moves object containing action handlers:

const serverLogic = {
  initialState: {
    players: {},
    gameData: {
      // Your game's initial state
      score: 0,
      items: []
    }
  },

  moves: {
    // Special handler called when a player joins
    playerJoined: (state, payload, playerId) => {
      state.players[playerId] = {
        x: 100,
        y: 100,
        score: 0
      };
    },

    // Your custom action handlers
    playerAction: (state, payload, playerId) => {
      // Modify state based on the action
      const player = state.players[playerId];
      if (player) {
        player.x = payload.x;
        player.y = payload.y;
      }
    },

    // Add more action handlers as needed
  }
}