Code Monkey home page Code Monkey logo

fullscreenpokemon's Introduction

FullScreenPokemon

Code Style: Prettier TypeScript: Strict NPM version

HTML5 remake of the original Pokemon, expanded for modern browsers.

Usage

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.

Documentation

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.

Development

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 hydrate creates a few auto-generated setup files locally.
  • yarn run compile builds source code with TypeScript

Running Tests

yarn run test

Tests 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.

fullscreenpokemon's People

Contributors

blingenau avatar chrisnvalmas avatar colinehiggins avatar danstiner avatar dependabot[bot] avatar funnymanpatrick avatar gpnoel avatar greenkeeper[bot] avatar guvjose avatar joechip504 avatar joshuakgoldberg avatar machinocheese avatar phansa avatar tsitsop avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fullscreenpokemon's Issues

Implement groupType-based quadrant rendering

Fix for FullScreenShenanigans/FullScreenMario#30. In summary, the steps would be...

  1. QuadsKeepr: Make each Quadrant start out with an Object containing a <canvas> for each groupType
  2. PixelDrawr: When redrawing Quadrants, instead of drawing to the main canvas, have Things drawn to their respective groupType canvas.
  3. GameStartr: Instead of appending the main canvas, append all the little ones, with position: absolute and the correct left and top.
  4. GameStartr: Modify the screenshot code to account for all the canvases.

Cannot select name for character

When I selected "New Game", everything went smoothly. However, as soon as I went to pick my name, the game wouldn't let me choose a name, whether it was a preset name, or the "NEW NAME" option.

Player name should be stored as string[]

Right now it's the direct string equivalent, which was a bad call. Fancy characters had to be taken out of they keyboard because they're not supported.

Desired storage: ["CharB", "Charo", "CharB", "CharTimes"]

PALETTE TOWN

(maps.js line 82)

Palette is funnier, but not sure if you did it on purpose

image

Fix Mocha tests from the 1.6 conversion

Running "mocha_phantomjs:all" (mocha_phantomjs) task
ReferenceError: Can't find variable: EightBittr
   at file:///home/travis/build/FullScreenShenanigans/FullScreenPokemon/Source/References/GameStartr-0.2.0.js:1383
   at file:///home/travis/build/FullScreenShenanigans/FullScreenPokemon/Source/References/GameStartr-0.2.0.js:1385
Warning: 1 tests failed� Use --force to continue.

Add a module for mouse/touch on top of TouchPassr

Two use cases I can think of...

  • Mapping point contacts to MenuGraphr::registerA on menus
  • Point-to-walk: touch a point on the screen, and the player will walk to it
    • Hover events could show the predicted path.

This might require UserWrapper to have a registration function for extra modules such as this one. Perhaps it should default to using DeviceLayr?

Add palette changing to PixelRendr

The colored versions of RBY have it so different areas have different color schemes. PixelRendr should be able to scrap everything and take in a new palette.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.