2d-gaming

Description

This is an Angular package fo developing 2d games in angular. Please report issues/questions/any ideas to better help this package.

Installing

1. Run npm instll 2d-gaming
2. Import { TwoDGaming } from '2d-gaming'; Into your module
3. Import { GameAreaObject, ObjectComponent, ObjectDesign, PositionObject } from '2d-gaming' into the file of your game.

Getting Started

Setup your game

1. Setup your game area. Each area object will have a name, width, height and gravity.

First Create Your Game Object

    // Create A New File gameArea.ts
    import { GameAreaObject } from '2d-gaming';

    export class GameArea implements OnInit{

        component: GameAreaObject;

        constructor() {
            this.component = new GameAreaObject('myGame', '300px', '300px');
            this.game.gravity = 0;
        }
    };

Then SetUp Your Object In Your Component

// Create A New File game.component.ts
  import {GameAreaObject, ObjectComponent, ObjectDesign, PositionObject, ObjectArray } from '2d-gaming';
  import {GameArea} from './gameArea.ts':
  @Component({
      selector: 'app-game',
      templateUrl: './game.html'
  })

  export class GameComponent implements OnInit {
      gameObject: GameArea

      ngOnInit() {
          this.gameObject = new GameArea();
          this.gameObject.component.doEveryFrame = (() => this.doPerFrame());
      }

      start() {
          this.gameObject.component.start(); // this starts the game
      }

      stop() {
          this.gameObject.component.stop(); // this stops and resets the game
      }

      doPerFrame() {
          // put code here you want to run everyFrame
      }
  }

<!--- In game.html Place This-->
<app-game-area></app-game-area>
<button (click)="start()">Start</button>

2. Now lets add a player.

// Create A New File player.ts
  import {GameAreaObject, ObjectComponent, ObjectDesign, PositionObject } from '2d-gaming'

  export class Player {
      component: ObjectComponent;
      position: PositionObject;
      design: ObjectDesign;

      constructor(public game: GameAreaObject) {
          this.design = new ObjectDesign(20, 20, 'square', 'green'); // create a design. we will add this to our player
          this.position = new PositionObject(150, 150); // create a position object. we will add this to our player
          this.component = new ObjectComponent(this.game, this.design, this.position) // add the design and position to the player.
          // we inject a gameObject into the constructor so the player can know what game it belongs to
      }
  }

Now SetUp the player in the component

  // back in game.component.ts
  gameObject: GameArea;
  playerObject: Player; //Import Player from the previous file

  ngOnInit() {
      this.gameObject = new GameArea();
      this.playerObject = new Player(this.gameObject.component); // Create a new Instance of it and inject the component of the gameObject in its constructor
  }

3. Lets give our player movement.

// Im using HostListener. You can use another event detection if you pefer
   @HostListener('document:keyup', ['$event'])

  onKeyup(e: KeyboardEvent) {
      const code = e.keyCode;
      this.playerObject.component.clearMovement();
  }

  @HostListener('document:keydown', ['$event'])

  onkeydown(e: KeyboardEvent) {
      const code = e.keyCode;
      // D Key
    if (code === 68) {
        this.playerObject.component.moveRight(1.5); // move right
    }
    // A Key
    if (code === 65) {
        this.playerObject.component.moveLeft(1.5); //move left
    }
    // W Key
    if (code === 87) {
        this.playerObject.moveUp(1.5); // move up
    }
    // S Key
    if (code === 83) {
        this.playerObject.component.moveDown(1.5); // move down
    }
  }

4. Lets add an object that will move from one point to another. To do this we set object.path. The path object has a x and y value for the points you want your object to move to.

// Create a new file item.ts
import {GameAreaObject, ObjectComponent, ObjectDesign, PositionObject, IPath } from '2d-gaming'

  export class item {
      component: ObjectComponent;
      position: PositionObject;
      design: ObjectDesign;

      constructor(public game: GameAreaObject) {
          this.design = new ObjectDesign(20, 20, 'square', 'red'); // create a design. we will add this to our object
          this.position = new PositionObject(100, 100); // create a position object. we will add this to our object
          this.component = new ObjectComponent(this.game, this.design, this.position) // add the design and position to the object.
          // we inject a gameObject into the constructor so the object can know what game it belongs to
          this.component.newPath = {
              x: 200, // New X Pos
              y: 200, // New Y Pos
              speed: 1, // Speed It Moves At
              infinit: false // If it stops at designated location or continue after
          }
      }
  }

add the object to our component

  gameObject: GameArea;
  playerObject: Player; //Import Player from the previous file
  movingObject: item; //Import item from the previous file

  ngOnInit() {
      this.gameObject = new GameArea();
      this.playerObject = new Player(this.gameObject.component); // Create a new Instance of it and inject the component of the gameObject in its constructor
      this.movingObject = new item(this.gameObject.component)
  }

Now Run And click Start

Objects In Package

Initialize each object like this

   var Init = new Object();

ObjectComponent

| Call | Description | Paramaters | | ---- |:-------------------:| ----------:| | draw() | draws the object on the canvas | none| | shoot() | shoots the bullets | none |

| name | Description | | --------- | ----------------- | | game | the gameArea it belongs to | | design | a designObject | | position | a PositionObject | | movement | a Movement Object | | bullets | items your wanting to shoot| | score | how points stored in this object | | isBarrier | if object is a barrier |

DesignObject

| Name | Description | | --------- | ----------------- | | shape | is type image, square, circle, text| | width | width of the connected object | | height | height of the connected Object | | color | is a color unless shape is image then is an image url| | text | the text of an text shape |

PositionObject

| Name | Description | | ----- | ----------- | | xPos | x position | | yPos | y position |

MovementObject

| Name | Description | | ------- | ----------------- | | speedY | the speed of the object on the y axis| | speedX | speed of object on x axis | | gravity | gravity of object | | position | a PositionObject |

| Name | Description | paramater | | ------- | ----------------- | --------- | | moveright() | moves object right | speed: number | | moveLeft() | moves object left | speed: number | | moveUp() | moves object up | speed: number | | moveDown() | moves object down | speed: number | | newPos | moves object to new location | xPos: number, yPos: number, speed: number, infinit: boolean |

GameComponent

| call | Description | Paramaters | | -------- | ------------------- | ----------- | | .start() | starts the game | none | | stop() | stops the game | none | | .clear() | clears the game area | none | | .doEveryFrame() | runs every frame | function | | .everyinterval() | returns true or false. Do somthing every interval | number for when you want the interval to be set at |

| name | Description | | ---------- | ---------------- | | frame | the current frame your on | | area | The element container of the game | | gravity | the gravity of the game | | crashHandler| handles collides in game | | height | height of the game | | width | width of the game | | gameObjects | all objects in game | | name | name of the game |

ObjectArray

This is a object that lets have multiple objects in one. Its main purpose is to create multiple intances of one object.

| call | Description | Paramaters | | ------- | ------------------- | --------------------- | | add() | Adds an Object | item: ObjectComponent | | addMulti() | Adds array of objects | items: ObjectComponent[] | | multiply() | adds multiple instances of one object | item: ObjectComponent, howMany: number | | removeFromGame() | removes its items from the game | none |

| name | Description | | ------- | --------------- | | items | array of objectcomponents |