diff --git a/src/config.js b/src/config.js new file mode 100644 index 0000000..7be99b5 --- /dev/null +++ b/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; diff --git a/src/main.js b/src/main.js index 20b064f..bd22d91 100644 --- a/src/main.js +++ b/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 texture = await Assets.load('https://pixijs.com/assets/bunny.png'); + const paddle = new Graphics().rect(0, CONTAINER_HEIGHT - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT).fill('#fff000'); - // Create a 5x5 grid of bunnies in the container - for (let i = 0; i < 25; i++) { - const bunny = new Sprite(texture); + container.addChild(paddle); - bunny.x = (i % 5) * 40; - bunny.y = Math.floor(i / 5) * 40; - container.addChild(bunny); - } + container.on('pointermove', (event) => { + const localPosition = container.toLocal(event.global); - // 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; + if (localPosition.x < CONTAINER_WIDTH - PADDLE_WIDTH) { + paddle.x = localPosition.x; + } }); })();