ilia/arkanoid
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature/advanced game mechanics #5

Merged
ilia merged 30 commits from feature/advanced-game-mechanics into main 2026-07-19 15:09:22 +00:00
Conversation 0 Commits 30 Files Changed 28
+94 -100
6 changed files with 94 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b72583290d - Show all commits
src/config.js
+2 -1
View File
@@ -13,6 +13,7 @@ export const BALL_SPEED = 3;
export const BALL_SPEED_LEVEL_STEP = 2;
export const BALL_SPEED_TIME_STEP = 0.002;
export const BALL_INITIAL_ANGLE = 0;
export const BALL_SPLIT_ANGLE = 20;
export const BRICK_WIDTH = 40;
export const BRICK_HEIGHT = 10;
@@ -25,4 +26,4 @@ export const PERK_HEIGHT = 16;
export const PERK_FALL_SPEED = 3;
export const PERK_DROP_CHANCE = 0.3;
export const PERK_BALL_SPEED_DECREASE = 2;
export const PERK_TYPES = ['slow', 'wide', 'life'];
export const PERK_TYPES = ['slow', 'wide', 'life', 'clone'];
src/game.js
+20 -4
View File
@@ -32,13 +32,21 @@ export class Game {
this.maxLevel = levels.length - 1;
this.paddle = new Paddle(0, CONTAINER_HEIGHT - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT);
this.ball = new Ball(0, 0, BALL_RADIUS, BALL_SPEED, BALL_INITIAL_ANGLE);
this.balls = [new Ball(0, 0, BALL_RADIUS, BALL_SPEED, BALL_INITIAL_ANGLE)];
this.bricks = layBricks(this.levels[this.currentLevel], BRICK_WIDTH, BRICK_HEIGHT);
this.perks = [];
this._placeBallOnPaddle();
}
/**
* Основной (первый) мяч. Пока играет один мяч - это он.
* @returns {Ball}
*/
get ball() {
return this.balls[0];
}
/**
* Изменяет значения сущностей в зависимости от времени
* @param {*} deltaTime изменение времени из Ticker
@@ -56,7 +64,10 @@ export class Game {
tick(this, CONTAINER_WIDTH, CONTAINER_HEIGHT, deltaTime);
if (this.ball.status === 'out') {
// Убираем улетевшие мячи. Жизнь теряется только когда не осталось ни одного
const survivingBalls = this.balls.filter((ball) => ball.status !== 'out');
if (survivingBalls.length === 0) {
this.livesAmount -= 1;
if (this.livesAmount === 0) {
@@ -68,7 +79,11 @@ export class Game {
return;
}
this.ball.increaseSpeed(BALL_SPEED_TIME_STEP * deltaTime);
this.balls = survivingBalls;
for (const ball of this.balls) {
ball.increaseSpeed(BALL_SPEED_TIME_STEP * deltaTime);
}
const isLevelComplete = this._checkLevelCompletion();
@@ -101,9 +116,10 @@ export class Game {
}
/**
* Ставит мяч по центру ракетки
* Ставит мяч по центру ракетки, оставляя один мяч в игре
*/
_placeBallOnPaddle() {
this.balls = [this.ball];
this.ball.reset(this.paddle.x + this.paddle.width / 2, this.paddle.y - this.ball.radius);
}
}
src/lib/tick/tick.js
+14 -78
View File
@@ -1,18 +1,8 @@
import {
CONTAINER_HEIGHT,
CONTAINER_WIDTH,
MAX_PADDLE_REFLECTION_ANGLE,
MIN_PADDLE_REFLECTION_ANGLE,
PADDLE_SECTOR_AMOUNT,
PERK_DROP_CHANCE,
PERK_HEIGHT,
PERK_WIDTH,
} from '../../config';
import { MAX_PADDLE_REFLECTION_ANGLE, MIN_PADDLE_REFLECTION_ANGLE, PADDLE_SECTOR_AMOUNT } from '../../config';
import { Game } from '../../game';
import { calculateAABBCollision } from '../calculateAABBCollision/calculateAABBCollision';
import { calculateDirection } from '../calculateDirection/calculateDirection';
import { processBall } from '../processBall/processBall';
import { processBrickCollision } from '../processBrickCollision/processBrickCollision';
import { processReflection } from '../processReflection/processReflection';
import { spawnRandomPerk } from '../spawnRandomPerk/spawnRandomPerk';
import { updatePerks } from '../updatePerks/updatePerks';
/**
@@ -40,80 +30,25 @@ export function tick(game, containerWidth, containerHeight, deltaTime) {
throw new Error('Значение изменения времени должно быть положительным числом');
}
const { ball, paddle, bricks } = game;
ball.moveForward(deltaTime);
const { paddle } = game;
// Бонусы падают и ловятся ракеткой каждый кадр
updatePerks(game, containerHeight, deltaTime);
const leftBoundary = ball.radius;
const rightBoundary = containerWidth - ball.radius;
const topBoundary = ball.radius;
const bottomBoundary = containerHeight - ball.radius;
for (const ball of game.balls) {
ball.moveForward(deltaTime);
// Проверка столкновения со стенами и вылета за границу поля снизу
const hitWallOrWentOut = processBall(ball, containerWidth, containerHeight);
// Не даем мячу выйти за границы стен слева / справав и меняем направление
if (ball.x <= leftBoundary || ball.x >= rightBoundary) {
ball.x = ball.x <= leftBoundary ? leftBoundary : rightBoundary;
ball.horizontalSpeed *= -1;
return;
}
// Не даем мячу выйти за границу стены сверху и меняем направление
if (ball.y <= topBoundary) {
ball.y = topBoundary;
ball.verticalSpeed *= -1;
return;
}
// Проверяем выход за границу стены снизу
if (ball.y >= bottomBoundary) {
game.ball.status = 'out';
return;
}
// Базоввое взаимодействие мяча и кирпича
for (const brick of bricks) {
if (!brick.alive) {
if (hitWallOrWentOut) {
continue;
}
const ballLeft = ball.x - ball.radius;
const ballRight = ball.x + ball.radius;
const ballTop = ball.y - ball.radius;
const ballBottom = ball.y + ball.radius;
// Проверка столкновения с кирпичами
const hitBrick = processBrickCollision(game, ball);
const brickLeft = brick.x;
const brickRight = brick.x + brick.width;
const brickTop = brick.y;
const brickBottom = brick.y + brick.height;
const ballObject = { left: ballLeft, right: ballRight, top: ballTop, bottom: ballBottom };
const brickObject = { left: brickLeft, right: brickRight, top: brickTop, bottom: brickBottom };
const isCollided = calculateAABBCollision(ballObject, brickObject);
if (isCollided) {
const directions = calculateDirection(ballObject, brickObject);
if (directions !== null) {
ball.horizontalSpeed *= directions[0];
ball.verticalSpeed *= directions[1];
brick.kill();
if (!brick.alive) {
if (Math.random() < PERK_DROP_CHANCE) {
const perk = spawnRandomPerk(
brick.x + brick.width / 2 - PERK_WIDTH / 2,
brick.y + brick.height / 2 - PERK_HEIGHT / 2,
);
game.perks.push(perk);
}
}
return;
}
}
if (hitBrick) {
continue;
}
// Взаимодействие мяча и ракетки - обновление горизонтальной и вертикальной скорости в зависимости от сектора попадания
@@ -125,6 +60,7 @@ export function tick(game, containerWidth, containerHeight, deltaTime) {
MAX_PADDLE_REFLECTION_ANGLE,
ball.speed,
);
}
} catch (err) {
console.error(err);
return null;
src/lib/updatePerks/updatePerks.js
+10 -3
View File
@@ -1,4 +1,5 @@
import { CONTAINER_WIDTH, PADDLE_WIDE_WIDTH, PERK_BALL_SPEED_DECREASE } from '../../config';
import { BALL_SPLIT_ANGLE, CONTAINER_WIDTH, PADDLE_WIDE_WIDTH, PERK_BALL_SPEED_DECREASE } from '../../config';
import { clone } from '../../entities/ball/clone/clone';
import { Game } from '../../game';
import { calculateAABBCollision } from '../calculateAABBCollision/calculateAABBCollision';
@@ -45,8 +46,10 @@ export function updatePerks(game, containerHeight, deltaTime) {
if (isCollided) {
switch (perk.type) {
case 'slow':
if (game.ball.speed - PERK_BALL_SPEED_DECREASE > 0) {
game.ball.increaseSpeed(-1 * PERK_BALL_SPEED_DECREASE);
for (const ball of game.balls) {
if (ball.speed - PERK_BALL_SPEED_DECREASE > 0) {
ball.increaseSpeed(-1 * PERK_BALL_SPEED_DECREASE);
}
}
break;
case 'wide':
@@ -56,6 +59,10 @@ export function updatePerks(game, containerHeight, deltaTime) {
case 'life':
game.livesAmount += 1;
break;
case 'clone':
// Основной мяч делится на два клона, разлетающихся под углом
game.balls.push(clone(game.ball, BALL_SPLIT_ANGLE), clone(game.ball, -BALL_SPLIT_ANGLE));
break;
default:
break;
}
src/lib/updatePerks/updatePerks.test.js
+11
View File
@@ -48,6 +48,17 @@ describe('updatePerks', () => {
expect(paddle.width).toBe(PADDLE_WIDE_WIDTH);
});
it('Ловит бонус clone, разделяет мяч на три', () => {
const game = new Game([[[1]]]);
const { paddle } = game;
game.perks.push(new Perk(paddle.x, paddle.y - 1, 10, 10, 'clone', 0));
updatePerks(game, 600, 1);
expect(game.perks).toHaveLength(0);
expect(game.balls).toHaveLength(3);
});
it('Убирает бонус, улетевший за нижнюю границу', () => {
const game = new Game([[[1]]]);
game.perks.push(new Perk(0, 601, 10, 10, 'slow', 0));
src/view.js
+28 -5
View File
@@ -67,8 +67,12 @@ function createPerkView(perk) {
*/
export function createGameView(game, container) {
try {
const ball = createBallView(game.ball);
container.addChild(ball);
const balls = new Map();
for (const ball of game.balls) {
const ballView = createBallView(ball);
container.addChild(ballView);
balls.set(ball, ballView);
}
const paddle = createPaddleView(game.paddle);
container.addChild(paddle);
@@ -82,7 +86,7 @@ export function createGameView(game, container) {
const perks = new Map();
return {
ball,
balls,
paddle,
bricks,
perks,
@@ -107,6 +111,22 @@ export function managePerkViewsLifetime(views, game, container) {
container.addChild(views.paddle);
}
for (const [ball, ballView] of views.balls) {
if (!game.balls.includes(ball)) {
container.removeChild(ballView);
ballView.destroy();
views.balls.delete(ball);
}
}
for (const ball of game.balls) {
if (!views.balls.has(ball)) {
const ballView = createBallView(ball);
container.addChild(ballView);
views.balls.set(ball, ballView);
}
}
for (const [perk, perkView] of views.perks) {
if (!game.perks.includes(perk)) {
container.removeChild(perkView);
@@ -135,8 +155,11 @@ export function syncronizeViewsWithGame(views, game) {
throw new Error('Аргумент game должен быть экземпляром класса Game');
}
views.ball.x = game.ball.x;
views.ball.y = game.ball.y;
for (const ball of game.balls) {
const ballView = views.balls.get(ball);
ballView.x = ball.x;
ballView.y = ball.y;
}
views.paddle.x = game.paddle.x;
views.paddle.y = game.paddle.y;