arkanoid/src/main.js

import './style.css';
import { Application, Assets, Container, Graphics, Sprite } from 'pixi.js';
import { CONTAINER_HEIGHT, CONTAINER_WIDTH, PADDLE_HEIGHT, PADDLE_WIDTH } from './config';

(async () => {
  // Create a new application
  const app = new Application();

  // Initialize the application
  await app.init({ background: '#1099bb', width: CONTAINER_WIDTH, height: CONTAINER_HEIGHT });

  // Append the application canvas to the document body
  document.body.appendChild(app.canvas);

  // Create and add a container to the stage
  const container = new Container({
    eventMode: 'static',
    hitArea: app.screen,
  });

  container.x = 0;
  container.y = 0;

  app.stage.addChild(container);

  const paddle = new Graphics().rect(0, CONTAINER_HEIGHT - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT).fill('#fff000');

  container.addChild(paddle);

  container.on('pointermove', (event) => {
    const localPosition = container.toLocal(event.global);

    if (localPosition.x < CONTAINER_WIDTH - PADDLE_WIDTH) {
      paddle.x = localPosition.x;
    }
  });
})();