Ilia Mashkov
a11ab8cd5d
Build and push / build (push) Skipped
Build and push / build (pull_request) Successful in 41s
88 lines
2.6 KiB
JavaScript
88 lines
2.6 KiB
JavaScript
import './style.css';
|
|
import { Application, Assets, Container, Graphics, Sprite } from 'pixi.js';
|
|
import {
|
|
BALL_INITIAL_ANGLE,
|
|
BALL_RADIUS,
|
|
BALL_SPEED,
|
|
BRICK_COLUMN_AMOUNT,
|
|
BRICK_HEIGHT,
|
|
BRICK_ROW_AMOUNT,
|
|
BRICK_WIDTH,
|
|
CONTAINER_HEIGHT,
|
|
CONTAINER_WIDTH,
|
|
PADDLE_HEIGHT,
|
|
PADDLE_WIDTH,
|
|
} from './config';
|
|
import { LEVELS } from './const/levels';
|
|
import { Game } from './game';
|
|
import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeViewsWithGame } from './view';
|
|
|
|
(async () => {
|
|
const app = new Application();
|
|
await app.init({ background: '#1099bb', width: CONTAINER_WIDTH, height: CONTAINER_HEIGHT });
|
|
document.body.appendChild(app.canvas);
|
|
|
|
const container = new Container({
|
|
eventMode: 'static',
|
|
hitArea: app.screen,
|
|
});
|
|
container.x = 0;
|
|
container.y = 0;
|
|
|
|
app.stage.addChild(container);
|
|
|
|
const textures = await Assets.load([
|
|
'/sprites/fire_ball_1.png',
|
|
'/sprites/background_1.png',
|
|
'/sprites/paddle.png',
|
|
'/sprites/block_1.png',
|
|
'/sprites/block_2.png',
|
|
'/sprites/block_3.png',
|
|
'/sprites/perk_1.png',
|
|
'/sprites/perk_2.png',
|
|
'/sprites/perk_3.png',
|
|
'/sprites/perk_4.png',
|
|
]);
|
|
|
|
const game = new Game(LEVELS);
|
|
const views = createGameView(game, container, textures);
|
|
let currentLevel = game.currentLevel;
|
|
|
|
container.on('pointermove', (event) => {
|
|
const localPosition = container.toLocal(event.global);
|
|
game.paddle.moveTo(localPosition.x, 0, CONTAINER_WIDTH);
|
|
});
|
|
|
|
container.on('pointerdown', () => {
|
|
game.ball.launch();
|
|
});
|
|
|
|
app.ticker.add((time) => {
|
|
game.update(time.deltaTime);
|
|
|
|
if (game.currentLevel !== currentLevel) {
|
|
rebuildBrickViews(views, game, container, textures);
|
|
currentLevel = game.currentLevel;
|
|
}
|
|
managePerkViewsLifetime(views, game, container, textures);
|
|
syncronizeViewsWithGame(views, game);
|
|
|
|
if (game.status === 'over' || game.status === 'completed') {
|
|
showEndScreen(game.status === 'completed' ? 'Победа!' : 'Игра окончена!');
|
|
app.ticker.stop();
|
|
}
|
|
});
|
|
})();
|
|
|
|
/**
|
|
* Показывает финальный экран с сообщением и кнопкой рестарта (перезагрузка страницы).
|
|
* @param {string} message текст результата игры
|
|
*/
|
|
function showEndScreen(message) {
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'end-screen';
|
|
overlay.innerHTML = `<p>${message}</p><button class="button" type="button">Начать заново</button>`;
|
|
overlay.querySelector('button').addEventListener('click', () => location.reload());
|
|
document.body.appendChild(overlay);
|
|
}
|