What is Codetoy?

Codetoy is a lightweight game development environment in your browser for making, sharing, remixing, and playing multiplayer browser games with friends.

Why use Codetoy?

• Start coding immediately - no installation or configuration
• VS Code powered code editor with intellisense and autocomplete
• Built-in debugging tools and console
• Instantly share and play your game with others
• Multiplayer by default

Runtime

Every Codetoy runs inside of a web worker in it's own subdomain, with access to it's own OffscreenCanvas for rendering and drawing things to the screen. Any input or output events are handled through a message based API. You can find more info about this in the Input Events (addEventListener) and Output Events (postMessage) documentation.

Offscreen canvas can return a context with the getContext("2d" | "webgl" | "webgl2" | "webgpu") function:

• "2d" CanvasRenderingContext2D can draw shapes, lines, curves, boxes, text, and images, with colors, rotations, transparencies, and other pixel manipulations.

• "webgl" WebGL an OpenGL based graphics API.

• "webgl2" WebGL2 an OpenGL ES 3.0 based graphics API.

• "webgpu" WebGPU a new, modern graphics API for the web that enables web applications to utilize the capabilities of the GPU (Graphics Processing Unit) for high-performance rendering and compute tasks.

One thing worth noting is that WebGPU can operate without the need for a canvas. You can achieve this by requesting a WebGPU adapter and device directly:

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// Now you can use the device for compute operations
const buffer = device.createBuffer({
  size: 4,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
});

Please note that this feature is only available in Chrome and Edge, support for WebGPU in Safari and Firefox is still in development. You can find the full compatibility list here caniuse.com/?search=webgpu.

Modules

Codetoy supports vanilla javascript import and export module syntax. This allows you to organize your code into multiple files in your project.

Multiplayer

Every codetoy is multiplayer by default using a peer-to-peer websocket. When someone joins a codetoy their username will show up at the bottom. If they are not signed in then it will show @guest.

The multiplayer API is made up of two events, one for sending data, and another for listening to data sent by connected players.

addEventListener("message", ({ data: { type, payload } }) => {
  if (type === "oncanvas") {
    // send data
    const { sessionId } = payload;
    postMessage({
      type: "broadcast",
      payload: {
        message: "Hello from " + sessionId,
      },
    });
  } else if (type === "onlisten") {
    // get data
    const { message } = payload;
    postMessage({
      type: "consolelog",
      payload: message,
    });
  }
});

Check out the Multiplayer Jumping Circles codetoy to see a working example.