TMNT React

www.suhanwijaya.com/tmnt

TMNT React is inspired by TMNT 4: Turtles in Time, a classic "beat 'em up" 2D scroller game on SNES. It utilizes Redux to track character states, React and CSS to animate sprites and program the motion of characters.

Features

Viewport that centers on Turtle

I used three components to setup the display frame:

Game creates a div to define the frame width and height.
Viewport is positioned absolute relative to Game.
Stage is a child of Viewport , renders the location/environment and is sized with the full width of the stage level (i.e., the full distance that the turtle may potentially travel). This is where the Turtle component lives.

Moving the Turtle is simply updating its absolute left position relative to Stage, which is tracked via Redux. Viewport listens for changes to the turtle's left value, and sets its own left position as the negative of the turtle's position, when the Turtle reaches at least 1/4 through the Game frame width. Because Viewport is positioned absolute, a negative left position would place it to the left of the Game frame, creating the illusion of panning from left to right. When the Viewport changes its position as the turtle changes its position, it "follows" the turtle.

Turtle Combo Attack

To accomplish a combo attack, I use an array that tracks the number of times a player presses the 'attack' key. The Turtle component renders the appropriate sprites based on a set of conditions to determine if it's a combo attack.

Foot Soldier

While the event handlers for controls are defined in the Turtle component, the logic for the interaction between the Turtle and Foot soldiers lives in the Foot component. Foot is a Redux container that listens for changes to Turtle position and actions (i.e., move or attack). This would minimize the number of operations in the game as the Turtle does not have to keep track of all the Foot soldiers in front of it, and only the Foot nearest to the Turtle would update and re-render.

When Turtle approaches a Foot, the Foot is "activated" by moving forward and attacking. Only the nearest Foot responds and re-renders when the Turtle approaches. Additionally, while every Foot listens for Turtle changes, any change to Turtle state does not cause a re-render to Foot

Foot listens for Turtle attacks, and reduces health when the attack lands within the Foot's hitbox.