GameKit & UIKit Modules Sample

GameKit and UIKit Sample project

This sample project ilustrates how to use the Game Kit Module and the UI Kit Module developed by The Electric Factory. It is possible to either clone this full project, or just import the GameKit Module or the UI Kit Module into your own project.

For full information on modules visit: Modules

Project Overview

Files/

• body.html:
• app.js: Imports the Game Module, imports the UI (as a different file) and defines the basic game logic. It also register the AFRAME components used by this demo app.
• components/sample-game-components.js: Declares sample game components elements.
• ui/ui.js: Imports the ui-kit, defines the UI components and embeds the ui/ui.html and ui/ui.css into the document's body
• debugger/debugger.js: Creates a new UI debugger tool to interact with the game elements.
• utils.js: General purpose functions.

Modules

• game-kit: For reference check out game-kit/readme.md
• ui-kit: For reference check out ui-kit/readme.md

Sample game logic

• the player moves to the position in the board when you tap it.
• if the player collides with a coin the game score increases by 10, and the game energy increases by 0.01.
• if the player collides with an enemy, the game energy decreases by 0.2.
• if the player collides with a powerup, the game energy increases to 1.
• if the player collides with a coin, the coin moves to a random position.
• if the player collides a powerup, the powerup moves to a random position.
• if the player collides with a powerup more than 3 times, the powerup disappears.
• the game energy decreases by 0.0001 on every frame.
• if the player is colliding an enemy, the energy decreases by 0.005 on every frame.
• if the game energy reaches 0, the game ends.

SetUp a new game:

1. Create the DOM Elements for the game (or create the ThreeJs elements)
2. Create a new GameKit instance with the initial gameState (amount of lives, score, etc)
3. Add the game player to the game.
4. Register the actors types to the game (enemies, coins, powerups, etc), and declare how those elements affect the gameState.
5. Add all the game actors elements to the game (enemies, coins, etc)
6. Declare the game event listeners (onEnterFrame, onCollisionEnter, onCollisionExit, onStateChange)
7. Complete the game logic (eg: when the lives reach to 0, call the gameOver logic)
8. Create the DOM Elements for the UI (buttons, labels, etc)
9. Create the UIKit elements for the ui (create UIKit.Button, UIKit.Label, etc...)
10. Start the game

Example:

import { GameKit } from 'game-kit'; import { Button, Label } from 'ui-kit';

//Create GameKit Instance const myGame = new GameKit({ lives: 3, score: 0 });

//Add the player to the game myGame.setPlayer(document.getElementById('PlayerElement'));

//Register the game actors types myGame.registerActor('coin', 'score', 1); myGame.registerActor('enemy', 'lives', -1, 0);

//Add all game actors to the game myGame.addActor(document.getElementById('CoinElement'), 'coin'); myGame.addActor(document.getElementById('enemyElement'), 'element');

//Declare the game listeners myGame.onCollisionEnter(function (event) { const colliderElement = event.detail.other; console.log(colliderElement.type); });

myGame.onCollisionExit(function (event) { const colliderElement = event.detail.other; console.log(colliderElement.type); });

myGame.onGameStateChange(function (event) { const oldData = e.detail.oldGameState; scoreLabel.set('score:' + myGame.gameState.score);

if (oldData.lives > 0 && myGame.gameState.lives == 0) { gameOverLogic(); } });

myGame.onGameEnterFrame(function (event) { if (!myGame.playing) return; //move game elements });

//Create the UIKit elements for the ui

let btnStart = new Button(document.getElementById('btnStart')).onClick(() => { myGame.reset(); myGame.start(); btnStart.setVisible(false); }); let scoreLabel = new Label(document.getElementById('scoreLabel')).set( 'score:0' );

function gameOverLogic() { btnStart.setVisible = true; }