HTML5 remake of the original Pokemon, expanded for modern browsers.
The built lib/index.html uses UserWrappr to fill the available window size with a game screen, option menus, and piped input events.
It stores its generated instance as window.FSP.
To do this in your own page, use the exported createFspInterface function.
import { createFspInterface } from "fullscreenpokemon";
createFspInterface(document.getElementById("game")).then(() => {
console.log("Ready to play! ✨");
console.log(FSP);
});You can also directly create a new FullScreenPokemon instance with a manual size.
import { FullScreenPokemon } from "fullscreenpokemon";
// Creates a new game with a 320x480 screen size
const fsp = new FullScreenPokemon({
height: 320,
width: 480,
});
// Games contain a .canvas member for the screen
document.body.appendChild(fsp.canvas);
// Shows the initial in-game menu with start and load options
fsp.gameplay.gameStart();By default, the game doesn't set up input events. You'll need to set up your own event registrations manually.
FSP is built on top of EightBittr, a modular TypeScript game engine split across separate projects available on npm and hosted on GitHub in the FullScreenShenanigans organization. It consists of a couple dozen core modules under this organization.
See ./src/docs for documentation specific to FullScreenPokemon.
After forking the repo from GitHub:
git clone https://github.com/<your-name-here>/FullScreenPokemon
cd FullScreenPokemon
yarn
yarn run hydrate
yarn run compile
yarn run hydratecreates a few auto-generated setup files locally.yarn run compilebuilds source code with TypeScript
yarn run testTests are written in Mocha and Chai.
Their files are written using alongside source files under src/ and named *.test.ts?.
Whenever you add, remove, or rename a *.test.t* file under src/, watch will re-run yarn run test:setup to regenerate the list of static test files in test/index.html.
You can open that file in a browser to debug through the tests, or run yarn test:run to run them in headless Chrome.