chocolateloverraj/banana-games

A cool gaming website

banana-games's Issues

Turret - save / load settings

Use game controller as input

This would be especially nice for the turret game, when we can use a joystick.

https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API

Remove background from video tool

• Use tensorflow human outline detection model
• Select video
• View and download video without background

Shooter finger gun game

This is a new game. It is like flame jump. It will use tensorflow hand pose detection model. You stand in front of camera and point a finger gun. Then it knows where you're pointing so you can aim in the screen. To fire you pretend that you fired and quickly angle your gun up to pretend there was recoil.

Camera does not turn off after leaving flame jump

Steps to reproduce:

1. Go to flame jump game
2. Go to some other page without reloading

Settings / inputs redesign

Why

Current settings are messy. There are plans to have many different input options, like on screen buttons, keyboard, mouse, gamepad, and camera, and there needs to be a way for a game to use any of those inputs.

Goals

• Work with many inputs
  • Keyboard
  • Mouse
  • Gamepad
  • On screen buttons (for touch screen or clicking with mouse)
  • Swiping (for touch screen)
  • Camera (physical actions without touching any controller)
• Easily able to add new inputs later
• Save multiple presets to switch between
• Easily switch between different inputs (like switching to touch screen after disconnecting gamepad from phone)
• Save settings
• Work for multiplayer games

Plan

UI

Presets

Presets are the containers which all settings are stored in.
Games will come with default presets.

For example, in the lane runner game, there will be these default presets:
Camera - jump irl to jump, duck irl to duck, irl x position is current lane.
Keyboard - wasd / arrows to move left, right, jump, and duck
Mouse - Mouse x will switch lanes. Left click to jump, Right click to duck.
Gamepad - Plus pad could be used similar to keyboard arrow keys. A could be another way to jump, and B could be for ducking.
Swipe - Swipe left / right to switch lanes, swipe up to jump, swipe down to duck.

Presets can be edited.

New presets can be created.

Activation

Presets can be activated manually or automatically. Automatic activation:

• Mouse
• Keyboard
• Gamepad
• Touch screen
  For example, pressing any button on a gamepad will switch to the preset which gets activated by gamepad.

A validation error will be shown if two presets have the same activation.

Settings

Each game has a specific amount of settings. The user cannot add or remove settings, they can only customize the settings.

Input

To keep inputs flexible, a setting cannot say, "keyboard or on-screen-button, those are your only options". Instead, settings will say something like "I want to know if the input is on or off". Different inputs can be used for different input types.

Other settings

Other settings are not device specific. For example, adjusting music and sound effect volume, graphics settings.

Input types

Action

An action input is like listening for an onClick event.

• Mouse: Left click, right click
• Keyboard: On pressing a key, or releasing a key
• Gamepad: On presssing a button, or releasing a button
• Touch: On touching / releasing, swiping
• Camera: Doing an action, like jumping

Boolean

A boolean input is either on or off. It's like listening for onMouseDown and onMouseUp events. Not every input can be a boolean input. For example, jumping in real life is not a boolean input. Once you jump you will automatically land because of gravity.

• Mouse: Holding down click
• Keyboard: Holding down key
• Gamepad: Holding down button
• Touch: Touching screen

Lanes

There will be a special input just for the lane-runner game (more game could use it but for now it's just the lane-runner game).

• Actions: this input can be made up of action inputs. One action for moving left and one for right.
• Camera: Based on where the person is in the camera, that's their lane

Turret / circle

Basically getting the angle, and optionally the radius as a fraction (0 is in center of circle, 1 is max radius).

• Mouse: Scroll based moving or on screen joystick
• Touch: On screen joystick
• Gamepad: Joystick

Array

Used for multiplayer. The array can have a minimum and maximum number of items. The array can have multiple sub-settings with their own type. There will be a special input for array input type.

Customizing inputs

Inputs can be customized / calibrated. Examples:

• Customizing if something will happen on press or on release
• Customizing which key / button
• Customizing which direction to swipe
• Calibrating camera to set limits of how far u can move

Input validation

Inputs can give warnings like "Key A is already being used". Settings can still be saved and the game can be played with warnings.

Require at least one input

To fix #20, settings can specify that the input type needs at least one input. Settings will not be saved with errors like this. The game cannot be played with errors.

Summary

You can add, edit, remove presets

Each preset is a customization of settings. Settings can be input settings.

You can set 0+ inputs for input settings.

You can customize inputs. Some inputs can be made up of other inputs.

Internal code / API

Game

Inputs this:

• Setting functions
• Default presets

Settings

Settings is an array of settings. Not a map.

Setting Functions

• get name (just for display, not used as id)
• render: renders the setting editor
• Saving to indexed db
  • Save
  • Load
• listen for changes to data
• is valid (return false if there are errors that cannot be ignored)
• get screen rects: returns an array of screen rect get-set functions

Input type

An enum of input types. Input types written in UI section.

Any Input

Any input is a helper function which returns a setting which can use any input, based on the input type.

Inputs: Name, input type
Output: Setting functions

Inputs

An array of all inputs in Banana Games. To add an input in the future (for example, an input which let's you use another device with a browser as an input), just include it in this array.

Input

• input type
• render: render react node to edit input
• Saving to indexed db
  • Save
  • Load
• listen for changes to data
• is valid
• get screen rects

Using inputs in a game

TODO

Reset all settings to default

• button to reset all key bindings
• button to reset all screen rects

Pong - save and load settings

Flame jump - 1v1 mode

In this mode two people stand side by side. The last person standing wins.

Flame jump - save / load settings

Show last updated in games

This would show the time of the last commit that changed files specific to a game

Fix link to all games

This link in https://chocolateloverraj.github.io/Banana-Games/#/service-worker doesn't work:

Removing all key bindings for pause makes game unpausable

Paused.Menu.Banana.Games.and.2.more.pages.-.Personal.-.Microsoft.Edge.2022-06-21.12-38-46.mp4

Make flame jump completely work offline

Lane-running game similar to Subway Surfer

• The player keeps moving forward
• There are 3 lanes (this can be adjusted but 3 is a nice number)

Blocks

X, Y, Z is measured in blocks. One lane width is one block wide.

The obstacles

• One block tall
• Two blocks tall
• One block tall but in the air so you have to duck

Jumping

The player can jump 1 block. So player can jump over short obstacles but not tall obstacles.

Controlls

Camera

Actually move left, right, jump, and duck.

Gamepad

Use plus pad < and > to switch lanes. Use A to jump and B to duck.

Keyboard

Use a, d, left arrow, right arrow to switch lanes. Use up / down arrows, w / d to jump / duck.

Touchscreen

Swipe left / right to switch lanes. Swipe up to jump. Swipe down to duck.

`Prompt` was removed from `react-router-dom`

remix-run/react-router#8139

I don't want to downgrade back to v5, or find an alternative. I will wait for them to add Prompt back to v6.

Restaurant cooking game

Switch to Vite

Development will be way easier and better with Vite because of little to no waiting between saving a file and seeing changes.

Use gamepad to navigate website

Flame jump - show fps

Show contributors in games