etcetera8 / game-time

Turing 1710 FEE Mod 2 Project - JOUST Re-imagined

Joust Clone

live page

One of my favorite arcade games of all time is Joust. Something about the art direction, the physics, and simple yet fun gameplay made me want to recreate it. This was my first attempt at utilzing HTML5's canvas, working with sprites, and using a game loop to clear and redraw the screen.

This project also helped solidify my understanding of JavaScript object oriented programming. I made classes for players, enemies, and platforms and had them inherit properities from the game manager class. The game is two player, with player 1 using A-W-D to control their bird and player 2 using the arrow keys.

I had trouble finding adequate sprite images of the characters so please forgive the blockiness. The hardest part I found was mimicking the physics from Joust.

The project is fully tested with Mocha and Chai and was built in two weeks with @NatBee

to run this project on your machine first clone the repo

'npm i' 'npm start' and navigate to localhost:8080 'npm t' to run the test suite

game-time's Issues

Add left and right player momentum movement

Keys don't work at the same time

Add Game Manager Class

Keeps track of player lives
Time
enemies

TDD

Create Canvas with background image

p2 can 'push' p1 but not visa versa

Refactor player life tracking to use bird images

refactor anonymous functions

End Game

Top Score? After three deaths? Get a life when score meets a threshold

Score Tracker

Eggs can be picked up by players and add to their points

Eggs should have default points that add to players points when collision with player occurs

Animate bird sprites

Player to Player Collision

extend something

Create Static Platforms

Event Listeners for Player Controls

Player and Platform collision

Player 'Jumps' through bottom right platform

Only on the right side of the platform jumps through bottom.

We think the 'flying' is changing the y enough briefly to register that the top of the platform is being touched so changes the player y to the top of the platform.

Enemies sometimes spawn "in" eachother

Creates a weird effect where they're stuck together

Eggs dip just below platform then rest on platform

Add Sprite Images for Platforms

Creater Players Objects

Add a pause button

Enemies some times dip below main platform

Create Enemy Objects

Enemies sometimes get "stuck" in platforms

May be they're spawning in platforms.

Screen Teleportation

Only when player standing have legs down sprite, otherwise floating down

refactor collision functions

Add "Frame" around game

Refactor xmovement function in index.js file

Show and Track Lives of each player on Screen

Player flapping sprite is only right facing

Player Gravity

Platform to player collision in level 2 launches player into lava if they walk off the edge

Add USB Controllers buttons to control players

add level 2

Get Images for game

• Bird standing
• Bird running (left foot forward/right foot forward)
• Bird flying (feet up/wings up)
• Bird floating (wings down/feet up)

-Platform Sprites

Enemy
-Wings up
-wings down

When player respawns change color to black to blend in, setinterval function to show after amount of time

Player and Enemy Collision