Asteroid Arena is a twist on the classic game with an expanded world where asteroids bounce off the walls. Try to keep up as the amount of asteroids increases the more you destroy. Also watch out for rogue aliens!!

This Mobile First Progressive Web App is a submission to the 2023 Raylib Slo-Jam event hosted on itch.io, It was created by @dylanlangston using the following:

• Zig
• raylib via raylib-Zig
• Emscripten
• Binaryen
• Svelte
• TypeScript
• TailwindCSS

What's raylib Slo-Jam?

The goal of raylib Slo-Jam is to have participants all make the same kind of game, using raylib and not be rushed by short time constraints. The focus is on quality and polish, not scope and features. We want you to make the best game you can based on the theme.

Everyone who participates in the jam will be building the classic arcade game: Asteroids

Getting Started

This repository includes a devcontainer.json to get up and running quickly with a full-featured development environment in the cloud![^local-development]

Clone

1. Clone this repository: git clone https://github.com/dylanlangston/asteroids.git
2. Change directories into the newly created ./asteroids folder. Then initialize the submodules: git submodule update --init --recursive

Debug Locally:

1. If you haven't already, install Zig version 0.11.0 using the instructions here.
2. Configure you build environment for Raylib using the appropriate instructions for you platform.
3. Finally, to start the game run the command zig build run. Alternatively run the Debug task in VSCode.

Build for Web:

1. Complete steps to Clone and Debug Locally above first.
2. Change directories into the ./asteroids folder. Build the zig portion of the game using command zig build -Dtarget=wasm32-emscripten. Alternatively run the Build Web task in VSCode.
3. If you haven't already, install NodeJS LTS from here (or your preferred source).
4. Change directories into the ./asteroids/src/asteroids-website folder. Then install the required node packages using npm install.
5. Build the web version by running the command npm run build. You can find the generated static site in the ./asteroids/src/asteroids-website/build folder.

Localizing:

This application is fully localized into English, French, and Spanish. It should be possible to support any language using a Latin Character set. The following steps can be used to translate the application:

Localizating the Zig portion:

1. Open the ./src/Locales/ folder. Copy an existing locale .zig file and rename it to the appropriate language name. For example "german.zig".
2. Edit the new file by translating the strings to the choosen language (i.e. - German).
3. Open the ./src/Localelizer.zig file. Add your new language to the Locales enum, take note of the order for later. Then update the Localelizer.get function to handle the new enum. The changes should look something like this:

pub const Localelizer = struct {
    pub inline fn get(locale: Locales) Locale {
        switch (locale) {
            Locales.german => {
                return @import("./Locales/german.zig").german;
            },
        }
    }
};
pub const Locales = enum(usize) {
    ...
    german,
};

Localizating the Web portion:

1. Open the ./src/asteroids-website/src/locales folder. Copy an existing locale .json file and rename it to the appropriate language name. For example "de.json".
2. Edit the new file by translating the strings to the choosen language (i.e. - German).
3. Open the ./src/asteroids-website/static/manifests folder. Copy an existing manifest.json file and rename it to the appropriate language name (i.e. - "de.manifest.json").
4. Edit the new manifest file and translate the appropriate strings to the choosen language (i.e. - German). Read more about the manifest.json format here.
5. Open the ./src/asteroids-website/src/lib/localizer.ts file. Add your new language to the Locales enum, ensure the order is the same as the Zig enums you updated earlier. Update the LocaleGroup.LocalePrefixes array with the new enum and the language prefix (the file name from step 1). The changes should look something like this:

export enum Locales {
    ...
    german,
}

class LocaleGroup {
    public static readonly LocalePrefixes = [
        {
            key:   Locales.german,
            value: "de"
        },
    ];
}

Credits

All the included textures were created using Piskel and can be found in the Piskel folder. They are licensed as Creative Commons (by) Attribution.

[^local-development]: For local development check out Dev Containers and DevPod.