HTML5 prototype of “Serious Scramblers” powered by Phaser and written in TypeScript built with no physics engines: only Swept AABB collision detection

Read all posts about "" game

A lot of readers enjoyed my HTML5 Serious Scramblers prototype, but on oldest mobile devices there was an issue with collisions, since Arcade physics does not feature continuous collision detection.

So I started studying a bit about continuous collision detection, and apart from being a quite CPU expensive task, it can be simplified in some particular cases, like platform games, using Swept AABB collision detection.

Then I made two post about Swept AABB collision detection: understanding physics continuous collision detection using swept AABB method and Minkowski sum and understanding physics continuous collision detection using swept AABB method and Minkowski sum – Part 2: both bodies are moving.

Now it’s time to put these concepts into an actual game prototype, like the one you are about to see.

Before we start, remember this is not a physics engine and it’s not meant to replace your favourite physics engine.

It’s just another approach to simple collision detection, useful for you to learn something light and new.

Let’s see this first example:

Focus on the canvas, then move the yellow box with LEFT and RIGHT arrow keys, don’t fall down and don’t let platforms bring you to the top of the screen.

Everything is sooooooo slow, just to let you see collision detection works.

Now, let’s speed up a lot the whole stuff:

Try to play this one: apart from being almost unplayable, collision detection at this speed would be impossible without continuous collision detection, but I managed to do it with Swept AABB.

Finally, a playable prototype, the possible base for future improvements:

Did you see it? A continuous collision detection written in a few lines. Let’s see the source code:

index.html

The web page which hosts the game, just the bare bones of HTML and main.ts is called. No changes have been made.

Also look at the thegame div, this is where the game runs.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 0px;
            }
        </style>
        <script src = "main.js"></script>
    </head>
<body>
    <div id = "thegame"></div>
</body>
</html>

main.ts

The main TypeScript file, the one called by index.html.
Here we import most of the game libraries and define both Scale Manager object and Physics object.

Here we also initialize the game itself.

// MAIN GAME FILE

// modules to import
import Phaser from 'phaser';
import { PreloadAssets } from './preloadAssets';
import { PlayGame} from './playGame';

// object to initialize the Scale Manager
const scaleObject: Phaser.Types.Core.ScaleConfig = {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    parent: 'thegame',
    width: 750,
    height: 1334
}

// game configuration object
const configObject: Phaser.Types.Core.GameConfig = {
    type: Phaser.AUTO,
    backgroundColor:0x444444,
    scale: scaleObject,
    scene: [PreloadAssets, PlayGame]
}

// the game itself
new Phaser.Game(configObject);

gameOptions.ts

Game options which can be changed to tune the gameplay are stored in a separate module, ready to be reused.

// CONFIGURABLE GAME OPTIONS

export const GameOptions = {

    // first platform vertical position. 0 = top of the screen, 1 = bottom of the screen
    firstPlatformPosition: 4 / 10,

    // game gravity, which only affects the hero
    gameGravity: 600,

    // hero speed, in pixels per second
    heroSpeed: 80,

    // platform speed, in pixels per second
    platformSpeed: 20,

    // platform length range, in pixels
    platformLengthRange: [150, 250],

    // platform horizontal distance range from the center of the stage, in pixels
    platformHorizontalDistanceRange: [0, 250],

    // platform vertical distance range, in pixels
    platformVerticalDistanceRange: [150, 300]
}

preloadAssets.ts

Class to preload all assets used in the game.

// CLASS TO PRELOAD ASSETS

// this class extends Scene class
export class PreloadAssets extends Phaser.Scene {

    // constructor    
    constructor() {
        super({
            key: 'PreloadAssets'
        });
    }

    // preloading assets, the good old way
    preload(): void {
        this.load.image('hero', 'assets/hero.png');
        this.load.image('platform', 'assets/platform.png');
	}

    // method to be called once the instance has been created
	create(): void {

        // call PlayGame class
        this.scene.start('PlayGame');
	}
}

physicsBox.ts

Class which extends Sprite class and adds physics properties such as velocity.

// PhysicsBox class extends Phaser Sprite class
export default class PhysicsBox extends Phaser.GameObjects.Sprite {

    // vector containing x and y velocity
    velocity: Phaser.Math.Vector2;

    // constructor - arguments: the scene, x and y position and texture key
    constructor(scene: Phaser.Scene, x: number, y: number, key: string) {
        super(scene, x, y, key);
        scene.add.existing(this);

        // physics object has no velocity at the beginning
        this.velocity = new Phaser.Math.Vector2(0, 0);
    }

    // set body velocity - arguments: x and y velocity
    setVelocity(x: number, y: number): void {

        // update velocity property
        this.velocity.x = x;
        this.velocity.y = y;
    }
}

playerSprite.ts

Player extends PhysicsBox which extends Sprite:

// PLAYER SPRITE CLASS    

import PhysicsBox from "./physicsBox";

// player sprite extends PhysicsBox class
export default class PlayerSprite extends PhysicsBox {

    // is the first time player is moving
    firstMove: Boolean = true;

    // constructor
	constructor(scene: Phaser.Scene, x: number, y: number, key: string) {
		super(scene, x, y, key);

        // add the player to the scnee
        scene.add.existing(this);
	}
}

platformSprite.ts

Same thing for the platforms: they extend PhysicsBox class which extends Sprite:

// PLATFORM SPRITE CLASS    

import PhysicsBox from "./physicsBox";

// platform sprite extends PhysicsBox class
export default class PlatformSprite extends PhysicsBox {

    // constructor
    constructor(scene: Phaser.Scene, x: number, y: number, key: string) {
        super(scene, x, y, key);

        // add the platform to the scnee
        scene.add.existing(this);
    }
}

playGame.ts

The game itself, the biggest class, game logic is stored here.

// THE GAME ITSELF

// modules to import
import { GameOptions } from './gameOptions';
import PlayerSprite from './playerSprite';
import PlatformSprite from './platformSprite';
import SweptAABB from './sweptAABB';
import SweptAABBCollisionInfo from './sweptAABBCollisionInfo';

// this class extends Scene class
export class PlayGame extends Phaser.Scene {

    // group which will contain all platforms
    platformGroup: Phaser.GameObjects.Group;

    // the hero of the game
    hero: PlayerSprite;

    // here we store game width once for all
    gameWidth: number;

    // here we store game height once for all
    gameHeight: number;

    // instance of arrow keys to control the player
    arrowKeys: Phaser.Types.Input.Keyboard.CursorKeys;

    // our Swept AABB class
    AABB: SweptAABB;

    // flag to check if any left button has been pressed
    leftPressed: boolean;
 
    // flag to check if any right button has been pressed
    rightPressed: boolean;

    // constructor
    constructor() {
        super({
            key: 'PlayGame'
        });
    }

    // method to be called once the class has been created
    create(): void {

        // new arrow keys instance
        this.arrowKeys = this.input.keyboard.createCursorKeys();
 
        // new Swept AABB instance
        this.AABB = new SweptAABB();

        // save game width value
        this.gameWidth = this.game.config.width as number;

        // save game height value
        this.gameHeight = this.game.config.height as number;

        // create a new physics group
        this.platformGroup = this.add.group();

        // create starting platform
        let platform: PlatformSprite = new PlatformSprite(this, this.gameWidth / 2, this.gameHeight * GameOptions.firstPlatformPosition, "platform");

        // add platform to platform group
        this.platformGroup.add(platform);

        // add the hero
        this.hero = new PlayerSprite(this, this.gameWidth / 2, 0, "hero");

        // place the hero on top of the platform
        this.AABB.placeOnTop(this.hero, platform)

        // we are going to create 10 more platforms which we'll reuse to save resources
        for(let i = 0; i < 10; i ++) {

            // platform creation, as a member of platformGroup physics group
            let platform = new PlatformSprite(this, 0, 0, "platform");

            // add platform to platform group
            this.platformGroup.add(platform);

            // position the platform
            this.positionPlatform(platform);
        }
    }

    // method to position a platform
    positionPlatform(platform: PlatformSprite):void {

        // vertical position
        platform.y = this.getLowestPlatform() + this.randomValue(GameOptions.platformVerticalDistanceRange);

        // horizontal position
        platform.x = this.gameWidth / 2 + this.randomValue(GameOptions.platformHorizontalDistanceRange) * Phaser.Math.RND.sign();

        // platform width
        platform.displayWidth = this.randomValue(GameOptions.platformLengthRange);
    }

    // method to get the lowest platform, returns the position of the lowest platform, in pixels
    getLowestPlatform(): number {

        // lowest platform value is initially set to zero
        let lowestPlatform = 0;

        // get all platforms
        let platforms: PlatformSprite[] = this.platformGroup.getChildren() as PlatformSprite[];

        // loop through all platforms
        for (let platform of platforms) {

            // get the highest value between lowestPlatform and platform y coordinate
            lowestPlatform = Math.max(lowestPlatform, platform.y);
        };

        // return lowest platform coordinate
        return lowestPlatform;
    }

    // method to toss a random value between two elements in an array
    randomValue(a: number[]): number {

        // return a random integer between the first and the second item of the array
        return Phaser.Math.Between(a[0], a[1]);
    }

    // method to be executed at each frame
    update(t: number, dt: number): void {

        // left and right arrow keys aren't been pressed, yet
        this.leftPressed = false;
        this.rightPressed = false;

        // is left arrow key down?
        if (this.arrowKeys.left.isDown) {
 
            // left button is being pressed
            this.leftPressed = true;
        }
 
        // is right arrow key down?
        if (this.arrowKeys.right.isDown) {
             
            // right button has been pressed
            this.rightPressed = true;
        }

        // is hero first move and was there an input?
        if (this.hero.firstMove &amp;&amp; (this.leftPressed || this.rightPressed)) {

            // it's no longer the first move
            this.hero.firstMove = false;

            // get all platforms
            let platforms: PlatformSprite[] = this.platformGroup.getChildren() as PlatformSprite[];

            // loop through all platforms
            for (let platform of platforms) {

                // start to move the platforms
                platform.setVelocity(0, GameOptions.platformSpeed * -1);
            }

            // start to apply the gravity to hero
            this.hero.setVelocity(0, GameOptions.gameGravity);
        }

        // isn't hero first move?
        if (!this.hero.firstMove) {

            // set hero horizontal velocity according to arrow keys pressed
            this.hero.velocity.x = this.leftPressed ? -GameOptions.heroSpeed : (this.rightPressed ? GameOptions.heroSpeed : 0);

            // check colliding platform, if any, once the hero moved
            let collidingPlatform: (SweptAABBCollisionInfo | null) = this.AABB.moveActor(this.hero, this.hero.velocity.x, this.hero.velocity.y, this.platformGroup, dt);
            
            // get all platforms
            let platforms: PlatformSprite[] = this.platformGroup.getChildren() as PlatformSprite[];

            // loop through all platforms
            for (let platform of platforms) {

                // move the platform
                this.AABB.moveObject(platform, platform.velocity.x, platform.velocity.y, dt);

                // if current platform is the colliding platform...
                if (collidingPlatform &amp;&amp; platform == collidingPlatform.collisionActor) {

                    // check which side of the platform collide
                    switch(collidingPlatform.collisionSide) {

                        // top side
                        case this.AABB.TOP_SIDE:

                            // place hero on top of the platform
                            this.AABB.placeOnTop(this.hero, platform); 
                            break;

                        // left side
                        case this.AABB.LEFT_SIDE:

                            // if the hero is moving right... 
                            if (this.hero.velocity.x > 0) {

                                // ... place the hero on the left side of the platform
                                this.AABB.placeOnLeft(this.hero, platform); 
                            }
                            break;

                        // right side    
                        case this.AABB.RIGHT_SIDE:

                            // if the hero is moving left... 
                            if (this.hero.velocity.x < 0) {

                                // ... place the hero on the right side of the platform 
                                this.AABB.placeOnRight(this.hero, platform); 
                            }
                            break;
                    }       
                }

                // if a platform leaves the stage to the upper side...
                if (platform.getBounds().bottom < 0) {

                    // ... recycle the platform
                    this.positionPlatform(platform);
                }
            }

            // if the hero falls down or leaves the stage from the top...
            if(this.hero.y > this.gameHeight || this.hero.y < 0) {

                // restart the scene
                this.scene.start("PlayGame");
            }
        }
    }
}

sweptAABB.ts

Swept AABB logic is stored here. The concepts explained in understanding physics continuous collision detection using swept AABB method and Minkowski sum and understanding physics continuous collision detection using swept AABB method and Minkowski sum – Part 2: both bodies are moving are applied here.

// SWEPT AABB CLASS

// modules to import
import PhysicsBox from "./physicsBox";
import SweptAABBCollisionInfo from "./sweptAABBCollisionInfo";

// class to handle Swept AABB physics
export default class SweptAABB {

    // a series of constants to 
    TOP_SIDE: number = 0;
    RIGHT_SIDE: number = 1;
    BOTTOM_SIDE: number = 2;
    LEFT_SIDE: number = 3;
    
    // method to place a physics object on top of another physics object
    // arguments: the two physics objects
    placeOnTop(s1: Phaser.GameObjects.Sprite, s2: Phaser.GameObjects.Sprite): void {
        s1.y = s2.getBounds().top - s1.displayHeight * (1 - s1.originY);
    }

    // method to place a physics object on the left of another physics object
    // arguments: the two physics objects
    placeOnLeft(s1: Phaser.GameObjects.Sprite, s2: Phaser.GameObjects.Sprite): void {
        s1.x = s2.getBounds().left - s1.displayWidth * (1 - s1.originX);
    }

    // method to place a physics object on the right of another physics object
    // arguments: the two physics objects
    placeOnRight(s1: Phaser.GameObjects.Sprite, s2: Phaser.GameObjects.Sprite): void {
        s1.x = s2.getBounds().right + s1.displayWidth * (1 - s1.originX);
    }

    // method to move an object
    // arguments: the sprite, the horizontal speed, the vertical speed and the amount of time, in milliseconds
    moveObject(s: Phaser.GameObjects.Sprite, xSpeed: number, ySpeed: number, ms: number): void {
        s.x += xSpeed * ms / 1000;
        s.y += ySpeed * ms / 1000;
    }

    // method to move an actor. Actors, unlike objects, may collide with other objects
    // argument: the main sprite, horizontal and vertical speed, collision group and the amount of time, in milliseconds
    moveActor(s: PhysicsBox, xSpeed: number, ySpeed: number, collisionGroup: Phaser.GameObjects.Group, ms: number): SweptAABBCollisionInfo | null {
 
        // get all possible collisions
        let possibleCollisions: PhysicsBox[] = collisionGroup.getChildren() as PhysicsBox[];

        // minimum collision time is 1 (no collision)
        let minimumCollisionTime: number = 1;

        // current colliding body is null at the moment, since there isn't any collision yet
        let collidingBody: SweptAABBCollisionInfo | null = null;

        // loop through all possible collisions
        for (let possibleCollision of possibleCollisions) {

            // get collision information
            let collisionInfo: SweptAABBCollisionInfo | null  = this.collisionInformation(s, possibleCollision, ms);

            // if there is a collision and its collision time is less than current minumum collision time...
            if (collisionInfo &amp;&amp; collisionInfo.collisionTime < minimumCollisionTime) {

                // update minimum collision time
                minimumCollisionTime = collisionInfo.collisionTime;  

                // update colliding body
                collidingBody = collisionInfo;
            }
        }

        // move the actor
        this.moveObject(s, xSpeed, ySpeed, ms);

        // return the colliding body, if any, or null
        return (minimumCollisionTime < 1) ? collidingBody : null;    
    }

    // method to check if two bodies collide within a certain time - arguments: the two bodies and a time
    collisionInformation(sprite1: PhysicsBox, sprite2: PhysicsBox, time: number): SweptAABBCollisionInfo | null {
         
        // determine relative speed subtracting the two speed vectors
        let relativeSpeed: Phaser.Math.Vector2 = new Phaser.Math.Vector2(sprite1.velocity.x, sprite1.velocity.y).subtract(new Phaser.Math.Vector2(sprite2.velocity.x, sprite2.velocity.y));
 
        // get movement line, from box origin to box relative destination
        let movementLine: Phaser.Geom.Line =  new Phaser.Geom.Line(sprite1.x, sprite1.y, sprite1.x + relativeSpeed.x * (time / 1000), sprite1.y + relativeSpeed.y * (time / 1000));
        
        // Minkowski rectangle built inflating the sprite bodies
        let minkowskiRectangle: Phaser.Geom.Rectangle = this.minkowskiSum(sprite1, sprite2);
 
        // array to store all intersection points between movement line and Minkowski rectangle
        let intersectionPoints: Phaser.Geom.Point[] = [];
         
        // get all intersection points between movement line and Minkowski rectangle, then store them into intersectionPoints array
        Phaser.Geom.Intersects.GetLineToRectangle(movementLine, minkowskiRectangle, intersectionPoints);

        // here we will store collision line
        let collisionLine: Phaser.Geom.Line;

        // here we will store collision side
        let collisionSide: number;

        // here we will store collision time
        let collisionTime: number;
 
        // different cases according to intersection points vector length
        switch (intersectionPoints.length) {
 
            // no intersection points: return 1, that is objects can move for the entire interval
            case 0:
                return null;
 
            // only one intersection point: this is the collision point    
            case 1:
 
                // get the collision line
                collisionLine = new Phaser.Geom.Line(sprite1.x, sprite1.y, intersectionPoints[0].x, intersectionPoints[0].y);

                // get the collision side
                collisionSide = this.getCollisionSide(minkowskiRectangle, intersectionPoints[0]);

                // get the collision time
                collisionTime = Phaser.Geom.Line.Length(collisionLine) / Phaser.Geom.Line.Length(movementLine);
               
                // return the ratio between collision line and movement line
                return new SweptAABBCollisionInfo(sprite2, collisionTime, intersectionPoints[0], collisionSide); 
             
            // more than one intersection point: collision point is the closest to moving body
            default:
                 
                // set the minimum distance to Infinity, the highest number
                let minDistance: number = Infinity;
 
                // set minimum index to zero (first element)
                let minIndex: number = 0;
 
                // looping through all instersection points
                for (let i: number = 0; i < intersectionPoints.length; i ++) {
 
                    // get distance between body and points
                    let distance: number = Phaser.Math.Distance.Between(sprite1.x, sprite1.y, intersectionPoints[i].x, intersectionPoints[i].y);
                     
                    // is distance less then minimum distance?
                    if (distance < minDistance) {
 
                        // update minimum index
                        minIndex = i;
 
                        // update minimum distance
                        minDistance = distance;
                    } 
                }
 
                // get the collision line
                collisionLine = new Phaser.Geom.Line(sprite1.x, sprite1.y, intersectionPoints[minIndex].x, intersectionPoints[minIndex].y);

                // get the collision side
                collisionSide = this.getCollisionSide(minkowskiRectangle, intersectionPoints[minIndex]);

                // get the collision time
                collisionTime = Phaser.Geom.Line.Length(collisionLine) / Phaser.Geom.Line.Length(movementLine);
               
                // return the ratio between collision line and movement line
                return new SweptAABBCollisionInfo(sprite2, collisionTime, intersectionPoints[minIndex], collisionSide); 
        }
    }

    // method to get the collision side 
    // arguments: the minkowsky rectangle and a point
    getCollisionSide(minkowsky: Phaser.Geom.Rectangle, point: Phaser.Geom.Point): number {
        
        // is the point along top side?
        if (minkowsky.top == point.y) {
            return this.TOP_SIDE;
        }

        // is the point along bottom side?
        if (minkowsky.bottom == point.y) {
            return this.BOTTOM_SIDE;
        }

        // is the point along left side?
        if (minkowsky.left == point.x) {
            return this.LEFT_SIDE;
        }

        // is the point along right side?
        if (minkowsky.right == point.x) {
            return this.RIGHT_SIDE;
        }

        // no collision side, should be impossible to reach this line
        return -1;
    }

    // method to perform the Minkowski sum between two Sprites - argument: the sprites
    minkowskiSum(sprite1: Phaser.GameObjects.Sprite, sprite2: Phaser.GameObjects.Sprite): Phaser.Geom.Rectangle {
         
        // get bounding boxes
        let spriteBounds1: Phaser.Geom.Rectangle = sprite1.getBounds();
        let spriteBounds2: Phaser.Geom.Rectangle = sprite2.getBounds();
 
        // new rectangle leftmost point
        let newLeft: number = spriteBounds2.left - spriteBounds1.width / 2;
 
        // new rectangle upper point
        let newTop: number = spriteBounds2.top - spriteBounds1.height / 2;
 
        // new rectangle width
        let newWidth: number = spriteBounds1.width + spriteBounds2.width;
 
        // new rectangle height
        let newHeight: number = spriteBounds1.height + spriteBounds2.height;
 
        // return the inflated rectangle
        return new Phaser.Geom.Rectangle(newLeft, newTop, newWidth, newHeight);
    }
}

sweptAABBCollisionInfo.ts

Just a simple class to store collision information:

// modules to import
import PhysicsBox from "./physicsBox";

// class to handle Swept AABB collision information
export default class SweptAABBCollisionInfo {

    // colliding actor
    collisionActor: PhysicsBox;

    // collision time, from 0 (beginning of the frame, already colliding) to 1 (no collision)
    collisionTime: number;

    // collision point
    collisionPoint: Phaser.Geom.Point;

    // collision side
    collisionSide: number;
    
    // constructor - arguments: the actor, the time, the point and the side
    constructor(actor: PhysicsBox, time: number, point: Phaser.Geom.Point, side: number) {
        this.collisionActor = actor;
        this.collisionTime = time;
        this.collisionPoint = point;
        this.collisionSide = side; 
    }
}

And that’s it. It may not be the easier way to build a simple platformer, but learning the basics of AABB collision detection will help you in future development in case you won’t be able to rely on physics engines. Download the source code of the entire project.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers