How to start the game:

To start the game, do any of the following:

  • click on a sample level image
  • open a level image file using the file selector input
  • drag a level image file from your filesystem to the input box
  • use your browser's paste command to paste a level image from your clipboard into the input box

If there is something wrong with the image or file, a message will appear in the input box.

How to play:

You control the white pixel.

Press the left and right arrow keys to move. You can move up one-pixel steps without jumping, and you move down one-pixel steps immediately without leaving the ground.

Press Z to jump. In a typical level, holding Z jumps higher than tapping it.

Holding Z will also bounce you higher from a bounce pad.

In areas with a cyan background, press Z repeatedly to swim upward.

Press R to respawn if stuck.

Press Q to quit the level.

The object of a level is to touch all the yellow items.

How to make a new level (click to expand):

Levels are just PNG files, using specific pixel colors to place specific game objects.

Right-click and save the first sample level (witwap_sample1.png), or download it with the source code zip. Use this as a reference for the pixel colors you can use and their effects.

The level size must be at least 32x20 pixels, and no more than 1920x1080. The level must contain a white pixel for the player's start point. The file must be in PNG format.

Only the first hex digit each of the red, green, and blue channels are considered. For instance, #FEFEFE and #F1F1F1 are both considered #FFF pixels. If the alpha channel is 0, the pixel is treated as empty regardless of the RGB channels.

In many cases, a single connected object behaves differently from two separate objects. Pixels of the same color are connected if there's a path of that color between them. Diagonally touching pixels do count as connected.


* #FFF (white): This is the player start position. If you place more than one, only one is used. There must be one.

* #FCF (pale magenta): This is a checkpoint. The player respawns from the last touched pixel on a checkpoint. Make sure the entire checkpoint is somewhere safe to respawn into! You don't necessarily have to place any checkpoints.

* #FF0 (yellow): This is a goal item. If you don't place any, there won't be a way to complete the level.


* #050 (dark green): This is normal solid terrain that blocks the player and all movingobjects.

* #850 (brown): This is solid for the player, but moving objects can move through it.

* #8F0 (pale yellow-green): This is a bounce pad when the player is on top of it, and otherwise solid.

* #0C0 (medium-light green): This is a vertically moving platform. It starts by moving up and turns around when it hits a solid. If it tries to push the player into solid space, the player will end up inside the platform instead, and will fall through if it's only 1 pixel thick.

* #0CF (bluish cyan): This is a horizontally moving platform. It starts by moving right and turns around when it hits a solid. Like the vertical platform, it moves through the player instead of pushing the player into solid space.


* #F00 (red): This is a stationary hazard. Like all hazards, objects can move through it, and the player respawns on contact.

* #C08 and #F08 (off-red): These are blinking hazards. They're safe to move through when they're dark. The difference between them is timing.

* #F50 (orange), #F0F (magenta), #C0F (bluish magenta), and #F58 (off-magenta): These are moving hazards that start moving down, left, down+left, and up+left respectively. Like platforms, they turn around when they hit a wall.


* #008 (dark blue): This is open space for the player, but solid for moving platforms and moving hazards.

* #45F (off-cyan): This is open space where the player can swim instead of jumping.


* #CCC (light gray): The width and height of this object are used to determine gravity and jump velocity.  The player's jump height matches the height of the object. The time to the peak of the jump matches the width of the object (when moving horizontally at full speed). Bouncing and swimming physics are changed proportionally. If you don't place one of this object, the game's default behavior is like it was 9 wide by 6 high. If you place more than one, only one is used (make sure it's fully connected to itself!)

* #444 (dark gray): The height to width ratio of this object is used to determine the player's maximum falling speed. The fall speed matches the slope of the object's diagonal (when moving horizontally at full speed). If you don't place one, the default is like it was 2 wide by 3 high. If you place more than one, only one is used (make sure it's fully connected to itself!)

Any pixel colors not mentioned above are treated as empty.

This game is open source and incorporates other open-source code; see LICENSE.txt in the download package.

Rated 2.5 out of 5 stars
(2 total ratings)
Tags2D, Arcade, Creative, Level Editor, Lo-fi, Pixel Art, Retro, Short
Code licenseMIT License


What If There Was a (source code) 144 kB

Leave a comment

Log in with to leave a comment.