src/config.js

@@ -0,0 +1,5 @@
+export const CONTAINER_WIDTH = 800;
+export const CONTAINER_HEIGHT = 600;
+
+export const PADDLE_WIDTH = 50;
+export const PADDLE_HEIGHT = 10;

src/main.js

@@ -1,45 +1,37 @@
 import './style.css';
-import { Application, Assets, Container, Sprite } from 'pixi.js';
+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', resizeTo: window });
+  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();
+  const container = new Container({
+    eventMode: 'static',
+    hitArea: app.screen,
+  });
+
+  container.x = 0;
+  container.y = 0;
 
   app.stage.addChild(container);
 
-  // Load the bunny texture
+  const paddle = new Graphics().rect(0, CONTAINER_HEIGHT - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT).fill('#fff000');
-  const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
 
-  // Create a 5x5 grid of bunnies in the container
+  container.addChild(paddle);
-  for (let i = 0; i < 25; i++) {
-    const bunny = new Sprite(texture);
 
-    bunny.x = (i % 5) * 40;
+  container.on('pointermove', (event) => {
-    bunny.y = Math.floor(i / 5) * 40;
+    const localPosition = container.toLocal(event.global);
-    container.addChild(bunny);
+
+    if (localPosition.x < CONTAINER_WIDTH - PADDLE_WIDTH) {
+      paddle.x = localPosition.x;
     }
-
-  // Move the container to the center
-  container.x = app.screen.width / 2;
-  container.y = app.screen.height / 2;
-
-  // Center the bunny sprites in local container coordinates
-  container.pivot.x = container.width / 2;
-  container.pivot.y = container.height / 2;
-
-  // Listen for animate update
-  app.ticker.add((time) => {
-    // Continuously rotate the container!
-    // * use delta to create frame-independent transform *
-    container.rotation -= 0.01 * time.deltaTime;
   });
 })();