ID311_FinalProject

Game Concept

The baby penguin and adult penguin lost an egg that was on an iceberg. They are on a chase to follow the egg to the destination point to get back their precious egg.

Game Explanation

Our game is a cooperation game of 2 players to reach the destination in shorter time. The scores are equivalent to the amount of time it took the two players to escape the map.

Game Flow

Rule

Using the map gimmicks and cooperating with the other player, the players have to reach the destination point.

Players

Player1 would be a large penguin which can

• grab and throw the small penguin

• push boxes

• image

  

Player2 would be a small penguin that can

• be thrown by the large penguin

• do double jump

• image

  

Map

There are several map gimmicks in this map, and by using each of the penguin's capabilities, the penguins have to escape the map wisely.

1. Pit-Filling gimmick : If one penguin pushes the button , the pit (empty blank space) will be filled by ascending iceberg. The small penguin should be thrown by the large penguin to another side of the pit. THe small penguin will step on the button and fill in the pit so that the large penguin can continue the journey with it.
2. Tunnel gimmick : The tunnel is of height that only the small penguin can pass. The small penguin will pass through the tunnel and press a button. THen the tunnel will disappear so that the big penguin cna continue the journey.
3. ButtonDoor : The buttondoor gimmick is where the player can press the button on top of the big box and then the box will split horizontally into two parts. There can be an ending point inside the splitting element or it can be used to just passing through.
4. Spring : Spring gives force to the player to jump in certain direction.

Operations

1. left arrow key : move left
2. right arrow key : move right
3. up arrow key : jump
4. g key : big penguin grabs small penguin. If g is pressed again, the big penguin throws the penguin.

Code Explanation

Basic information

The game is implemented using the socket.io(for multiplay), p5.js(out-game part) and p5.play(in-game part)

UML

Assets

1. We drew the sprites of the penguins, background, boxes, and walls(floors), egg, and any other things needed to be rendered in the screen. They are stored in the ~/image folder, in the root.
2. The font is placed inside ~/server/client/assets/font. The font we used is "Coolvetica".
3. The material icons used in the outgame part is placed inside ~/server/client/assets/icon

Implementation

1. Server element : server.js

2. Player element: PlayerClient.js

3. Out-game elements: outgame folder

   Start Game Implementation

   The order of files executed in the outgame folder is like the following : Loading.js -> Nickname.js -> Search.js -> WaitRoom.js. Each of the files have separate html files that are called on page rendering.

   • outgame/Loading.js

     This is a page where the leaderboard and the background sprite is rendered.

      window.location.href = "../nickname";

     on game start, the page is moved to nickname page.

   • outgame/Nickname.js

     This is a page where the user inputs their playername to use during the game.

     const nickname = String(player.value());
     sessionStorage.setItem('nickname', nickname);
     window.location.href = "../search?nickname=" + nickname;

     We use sessionStorage to pass on the nickname to the search page.

   • outgame/Search.js

     This is a page where the user can search for their friend with their nickname or to get random player assigned for cooperation game.

     const nickname = sessionStorage.getItem('nickname');
     window.location.href = "../waitroom?nickname=" + nickname + "&random=" + String(isRandom) + (isRandom ? "" : ("&partner=" + String(searchfriend.value())));

     We put the information in the link depending on if it is random search or friend search.

   • outgame/WaitRoom.js The waitroom is where the matched players wait to enter the game. If both players are ready, they can move to the game. We added small effect where the code detects the mouse position.

   End Game Implementation

   • the file related to this part is GameOver.js. If the penguin touches the game over component, the score will be calculated and the screen will move to the endgame. If the player presses the endgame button, it will go to the start of the game, the Loading.js page.

4. in-game elements : src folder

   Game Sprite Implementation

   (what each of the gimmicks do are written in the upper part of the document Rule)

   • src/PitFill.js

     PitFill is a gimmick that fills up a space on button press to make other map sprite move and mvoe on.

     pitFill = new PitFill(width, height-50, 100, 50,width-200, height-50, 50, 50);

     first four parameters are about the box positiopn and box size. The next four parameters are about the button position and button size. We can customie the size and position of the button and object affectd by the button using this. The last two parameter is how the block will move - the direction and the amount of movement.

     Pitfillobject.create () draws the sprites Pitfillobject.ispressed(player) decides if the player is pressing button from the top and moves the position of the sprite.

     ---

   • src/ButtonDoor.js

     (This element is implemented but is not in the map for more fluent flow of the game. It functions and for future use, will leave document here.)

     ButtonDoor is a gimmick that fills up a space on button press to make other map sprite move and mvoe on.

     buttonDoor = new ButtonDoor(width + 100, height-50, 50, 100,width+ 300, height-50, 200, 200);

     first four parameters are about the button position and button size. The next four parameters are about the cliff position and cliff size. The buttondoor will split up-down into exactly same two parts.

     ButtonDoorobject.create () draws the sprites ButtonDoorobject.ispressed(player) decides if the player is pressing button and splits the cliff.

     ---

   • src/Tunnel.js

     Tunnel is a gimmick that only the small penguin can go through and widen the tunnel by pressing the button after the tunnel.

         tunnel = new Tunnel('tunnel-1', 3000, 600, 200, 1200, 110);

     first four parameters are about the tunnel position and tunnel size.

     TunnelObject.create () draws the sprites TunnelObject.activate(player) gets the button click and moves the tunnel so that the big penguin can go through.

     ---

   • main.js

         flyingWall = createSprite(3600, 0, 2400, wallD);
         flyingWall.immovable = true;
         flyingWall.debug = true;
         gameMap.add(flyingWall);

     The gimmick that was added the most recently is implemented directly to the main.js file. If the small penguin steps up on the big penguin and climb to the high part of the map and press the button, the sprite that worked as a bridge will move up and down. This enables the big penguin to climb onto the moving sprite and reach where the small penguin is.

Character Implementation