vue-pixijs Game

## Game

## index.ts
import { Application, Container } from "pixi.js";
import keyboard from "./keyboard";
import { hitTestRectangle } from "./collisiondetection"

const app = new Application({
  width: window.innerWidth,
  height: window.innerHeight,
  antialias: true,
  backgroundColor: 0x87CEEB
});

document.getElementById("app")?.append(app.view);

export function getRootContainer(): Container {
  return app.stage;
}

export function getGame(): Application {
  return app
}

export const keyboards = keyboard

export const hitTestRectangles = hitTestRectangle

## keyboard.ts
export declare interface key {
  value:string,
  isDown:boolean,
  isUp:boolean,
  press:any,
  release:any,
  downHandler: (event: any) => void,
  upHandler: (event: any) => void,
  unsubscribe: () => void
}
export default function keyboard(value:string):key {
  const key:key = {
    value:value,
    isDown:false,
    isUp:true,
    press:undefined,
    release:undefined,
    downHandler:(event: any) => {
      if (event.key === key.value) {
        if (key.isUp && key.press) key.press();
        key.isDown = true;
        key.isUp = false;
        event.preventDefault();
      }
    },
    upHandler:(event: any) => {
      if (event.key === key.value) {
        if (key.isDown && key.release) key.release();
        key.isDown = false;
        key.isUp = true;
        event.preventDefault();
      }
    },
    unsubscribe:() => {
      window.removeEventListener("keydown", downListener);
      window.removeEventListener("keyup", upListener);
    }
  };

  const downListener = key.downHandler.bind(key);
  const upListener = key.upHandler.bind(key);
  
  window.addEventListener(
    "keydown", downListener, false
  );
  window.addEventListener(
    "keyup", upListener, false
  );
  
  return key;
}

## collisiondetection.ts
export function hitTestRectangle(r1: any, r2: any):boolean {

    //Define the variables we'll need to calculate

    //hit will determine whether there's a collision
    let hit = false;

    //Find the center points of each sprite
    r1.centerX = r1.x + r1.width / 2;
    r1.centerY = r1.y + r1.height / 2;
    r2.centerX = r2.x + r2.width / 2;
    r2.centerY = r2.y + r2.height / 2;

    //Find the half-widths and half-heights of each sprite
    r1.halfWidth = r1.width / 2;
    r1.halfHeight = r1.height / 2;
    r2.halfWidth = r2.width / 2;
    r2.halfHeight = r2.height / 2;

    //Calculate the distance vector between the sprites
    const vx = r1.centerX - r2.centerX;
    const vy = r1.centerY - r2.centerY;

    //Figure out the combined half-widths and half-heights
    const combinedHalfWidths = r1.halfWidth + r2.halfWidth;
    const combinedHalfHeights = r1.halfHeight + r2.halfHeight;

    //Check for a collision on the x axis
    if (Math.abs(vx) < combinedHalfWidths) {

        //A collision might be occurring. Check for a collision on the y axis
        if (Math.abs(vy) < combinedHalfHeights) {

            //There's definitely a collision happening
            hit = true;
        } else {

            //There's no collision on the y axis
            hit = false;
        }
    } else {

        //There's no collision on the x axis
        hit = false;
    }

    //`hit` will be either `true` or `false`
    return hit;
}