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!¹

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

Font	Source	License
Hyperspace	https://www.fontspace.com/hyperspace-font-f18038	Freeware, Non-Commercial
Two Lines	https://www.fontspace.com/2-lines-font-f14541	Freeware, Non-Commercial

Palette	Source
AKC12	https://lospec.com/palette-list/akc12

Sound	Creator	Tool	Copy/Paste	License
Acceleration	miajohnson99	Chiptone	eNpjYig-PkOQgcFIngEIOhkZGBrq3RknMTEzvGH6X_-_ntXIGCTRUH_GB5WeEYldPE0NQjOsYzcynghi_7eHiMBowgJ8vG2nQbR3-ClGZDNhdv4HQ0cHixAGegIAUKwyuw..	Creative Commons (by) Attribution
Alien Explosion	miajohnson99	Chiptone	eNpjYig-PkOQieOMAQODHOvaOwwMDfUMDPNY-pmm8_2vV4pmEZBgYAAJnvGB0HdU_HVB9GNVHSMQnWG4-CiI7jEP7wPRaWpHHEA00zp2I-OJDAwKjM-lny4FiVxT3nkPbPx_e4hRMJoZXYCPt-00iPYOP8UIMRMiPiMSqg4MI1XmRzHQEwAAYv454w..	Creative Commons (by) Attribution
Alien Pew	miajohnson99	Chiptone	eNpjYig-PkOQgeWMQ8MpBjBoqGdgmMTUxiDH-r_eN4nFyBgieMYHQk-22HwXRDNqZ20E0TnqkTtBtHDe73kgOk0Nasg6diPjiQwMjEy8up4HQSIv1XbeA8v8t4cogdHM6AJ8vG2nQbR3-ClGZDNnRELVgWGkCsRNdAMAw4g3_g..	Creative Commons (by) Attribution
Explosion	miajohnson99	Chiptone	eNpjYig-PkOQkSNNi4Hh6953dxgYGuoZGJJZH7P-4_pfrxTNIiDBwAASPOODSs-IxC6epnbEAUQzrmM3Mp7IwKDA-t8eIgOjGdAFmNEF-HjbToNo7_BTjBAzUe38D4amcqlpDPQEADcqNn8.	Creative Commons (by) Attribution
Hit Wall	miajohnson99	Chiptone	eNpjYig-PkOQgeW_vlcrAxg01DMwlDHwM9kx_q__b898zRkieMYHQj9WNdsHomdEoorD6DQ1qCHr2I2MJ4LY_-0hIjCasAAfb9tpEO0dfooR2UyYnf_B0NEhOJmBngAA6yE0Wg..	Creative Commons (by) Attribution
Med Explosion	miajohnson99	Chiptone	eNpjYig-PkOQg-O_MgND7X8GIGioZ2CYxDSD-R_X_3q9WAYjY4jgGR9UekYkdvE0tSMOIJpxHbuR8USQ2H97iAyMJizAx9t2GkR7h59ihJiJaud_MHTWdkhgoCcAAKqnNQY.	Creative Commons (by) Attribution
Pew	miajohnson99	Chiptone	eNpjYig-PkOQie2_vcFeAYkmBQaGhnp3RmaGcOaVLP_ra-IZjIwZGECCZ3wg9BGF3OMg-poz6zZkcRidpgahGdaxGxlPBDKZeHU9D4JEXqrtvAeimf7bQ5TAaGZ0AT7ettMg2jv8FCOymTMioerAMFKF15eBngAATc423A..	Creative Commons (by) Attribution
Small Explosion	miajohnson99	Chiptone	eNpjYig-PkOQgSNNjoGh9j8DEDTUMzCEM59j_Mf1v_6_PYORMUTwjA8qPSMSu3iaGtSQdexGxhNBbKAhYBEYTViAj7ftNIj2Dj_FiGwmzM7_YFhl8iCKgZ4AACVNNOI.	Creative Commons (by) Attribution

Music	Creator	Tool	Link	License
Background	miajohnson99	BeepBox	Background	Creative Commons (by) Attribution
Game Over	miajohnson99	BeepBox	Game Over	Creative Commons (by) Attribution
Title Screen	miajohnson99	BeepBox	Title Screen	Creative Commons (by) Attribution

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

Footnotes

1. For local development check out Dev Containers and DevPod. ↩