JSFiddle - React, Tailwind, and code Playground

by hendrikeng

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.6/pixi.min.js"></script>

JavaScript

/* eslint-disable no-undef, func-names, guard-for-in */

/* eslint-disable camelcase,no-restricted-syntax, no-mixed-operators */

// define gamne variables
const appWidth = window.innerWidth;
const appHeight = window.innerHeight;
const paddleWidth = 150;
const paddleHeight = 30;
const ballSize = 15;
const halfBall = ballSize / 2;
const appWidthHalf = appWidth / 2;
const appHeightHalf = appHeight / 2;
const paddleWidthHalf = paddleWidth / 2;
const pongColor = 0x57dfbf;
const bgColor = 0x282625;
const computerPositionX = appWidthHalf - paddleWidthHalf;
const computerPositionY = 50;
const playerPositionX = computerPositionX;
const playerPositionY = appHeight - computerPositionY - paddleHeight;
const ballPositionX = appWidthHalf - halfBall;
const ballPositionY = appHeightHalf - halfBall;
const playerSpeed = 4;
const computerSpeed = 4;
const ballSpeed = 3;

// Setup the ticker and the root stage PIXI.Container.
const app = new PIXI.Application(appWidth, appHeight, {
  antialias: false,
  backgroundColor: bgColor,
  transparent: false,
  resolution: 1,
});

// append app to body
document.body.appendChild(app.view);

// create graphic elements
const player = new PIXI.Graphics();
const computer = new PIXI.Graphics();
const ball = new PIXI.Graphics();

// Player
player
  .beginFill(pongColor)
  .drawRect(playerPositionX, playerPositionY, paddleWidth, paddleHeight)
  .endFill();

// Computer
computer
  .beginFill(pongColor)
  .drawRect(computerPositionX, computerPositionY, paddleWidth, paddleHeight)
  .endFill();

// Ball
ball
  .beginFill(pongColor)
  .drawRect(ballPositionX, ballPositionY, ballSize, ballSize)
  .endFill();

// append childs to app
app.stage.addChild(player);
app.stage.addChild(computer);
app.stage.addChild(ball);

// Player Movement
player.update = function () {
  for (const key in keysDown) {
    const value = Number(key);
    if (value === 37) {
      player.move(-playerSpeed, 0);
    } else if (value === 39) {
      player.move(playerSpeed, 0);
    }...