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:
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
This repository includes a devcontainer.json to get up and running quickly with a full-featured development environment in the cloud!1
- Clone this repository:
git clone https://github.com/dylanlangston/asteroids.git
- Change directories into the newly created
./asteroids
folder. Then initialize the submodules:git submodule update --init --recursive
- If you haven't already, install Zig version 0.11.0 using the instructions here.
- Configure you build environment for Raylib using the appropriate instructions for you platform.
- Finally, to start the game run the command
zig build run
. Alternatively run the Debug task in VSCode.
- Complete steps to Clone and Debug Locally above first.
- Change directories into the
./asteroids
folder. Build the zig portion of the game using commandzig build -Dtarget=wasm32-emscripten
. Alternatively run the Build Web task in VSCode. - If you haven't already, install NodeJS LTS from here (or your preferred source).
- Change directories into the
./asteroids/src/asteroids-website
folder. Then install the required node packages usingnpm install
. - 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.
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:
- Open the
./src/Locales/
folder. Copy an existing locale.zig
file and rename it to the appropriate language name. For example "german.zig". - Edit the new file by translating the strings to the choosen language (i.e. - German).
- 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:
- 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". - Edit the new file by translating the strings to the choosen language (i.e. - German).
- Open the
./src/asteroids-website/static/manifests
folder. Copy an existingmanifest.json
file and rename it to the appropriate language name (i.e. - "de.manifest.json"). - 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.
- 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"
},
];
}
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
-
For local development check out Dev Containers and DevPod. ↩