diff --git a/public/sprites/background_1.png b/public/sprites/background_1.png new file mode 100644 index 0000000..074cba4 Binary files /dev/null and b/public/sprites/background_1.png differ diff --git a/src/main.js b/src/main.js index ff1a50d..1570587 100644 --- a/src/main.js +++ b/src/main.js @@ -38,7 +38,7 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV app.stage.addChild(container); - const textures = await Assets.load(['/sprites/fire_ball_1.png']); + const textures = await Assets.load(['/sprites/fire_ball_1.png', '/sprites/background_1.png']); const game = new Game(LEVELS); const views = createGameView(game, container, textures); diff --git a/src/view.js b/src/view.js index 5e3c7fb..11d0ebe 100644 --- a/src/view.js +++ b/src/view.js @@ -1,4 +1,5 @@ import { Container, Graphics, Sprite, Text } from 'pixi.js'; +import { CONTAINER_HEIGHT, CONTAINER_WIDTH } from './config'; import { Ball } from './entities/ball/ball'; import { Brick } from './entities/brick/brick'; import { Paddle } from './entities/paddle/paddle'; @@ -74,6 +75,11 @@ function createPerkView(perk) { */ export function createGameView(game, container, textures) { try { + const background = new Sprite(textures['/sprites/background_1.png']); + background.width = CONTAINER_WIDTH; + background.height = CONTAINER_HEIGHT; + container.addChildAt(background, 0); + const header = new Text({ style: { fill: '#ffffff', fontSize: 16 } }); header.x = 8; header.y = 8;