Арканоид

Играй в Арканоид прямо сейчас!

Описание игры

Арканоид – классическая аркадная игра, завоевавшая сердца миллионов геймеров в 80-х годах. В этой игре вы управляете платформой, отбивая мячик, чтобы разрушить стену из кирпичей. Она сочетает простоту и увлекательный игровой процесс, даря ностальгические эмоции.

Уникальные особенности

• Ретро-графика в стиле пиксель-арт.
• Специальные уровни с бонусами и усилениями.
• Дополнительные возможности и бонусы, делающие игру захватывающей.
• Динамичные звуковые эффекты с использованием Tone.js.

Код игры с комментариями

// Arkanoid Game Code
// ------------------

// Получаем холст и его контекст для рисования
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Задаем начальные параметры игры
let ballX = canvas.width / 2;
let ballY = canvas.height - 30;
let ballDx = 2;
let ballDy = -2;
let ballRadius = 10;

let paddleHeight = 10;
let paddleWidth = 75;
let paddleX = (canvas.width - paddleWidth) / 2;

// Задаем параметры блоков
const blockRowCount = 5;
const blockColumnCount = 8;
const blockWidth = 50;
const blockHeight = 20;
const blockPadding = 10;
const blockOffsetTop = 30;
const blockOffsetLeft = (canvas.width - (blockColumnCount * blockWidth + (blockColumnCount - 1) * blockPadding)) / 2;
const blockColors = ["#e74c3c", "#f1c40f", "#2ecc71", "#3498db", "#9b59b6"];
let blocks = [];
for(let c = 0; c < blockColumnCount; c++) {
  blocks[c] = [];
  for(let r = 0; r < blockRowCount; r++) {
    blocks[c][r] = { x: 0, y: 0, status: 1, color: blockColors[r % blockColors.length] };
  }
}

// Рисуем блоки
function drawBlocks() {
  for(let c = 0; c < blockColumnCount; c++) {
    for(let r = 0; r < blockRowCount; r++) {
      if(blocks[c][r].status === 1) {
        let blockX = (c * (blockWidth + blockPadding)) + blockOffsetLeft;
        let blockY = (r * (blockHeight + blockPadding)) + blockOffsetTop;
        blocks[c][r].x = blockX;
        blocks[c][r].y = blockY;
        ctx.beginPath();
        ctx.rect(blockX, blockY, blockWidth, blockHeight);
        ctx.fillStyle = blocks[c][r].color;
        ctx.fill();
        ctx.closePath();
      }
    }
  }
}

// Рисуем мячик
function drawBall() {
  ctx.beginPath();
  ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "#f39c12";
  ctx.fill();
  ctx.closePath();
}

// Рисуем платформу
function drawPaddle() {
  ctx.beginPath();
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillStyle = "#f39c12";
  ctx.fill();
  ctx.closePath();
}

// Основной цикл игры
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBlocks();
  
  // Проверка столкновения с блоками
  for(let c = 0; c < blockColumnCount; c++) {
    for(let r = 0; r < blockRowCount; r++) {
      let b = blocks[c][r];
      if(b.status === 1) {
        if(ballX > b.x && ballX < b.x + blockWidth && ballY > b.y && ballY < b.y + blockHeight) {
          ballDy = -ballDy;
          b.status = 0;
        }
      }
    }
  }
  
  drawBall();
  drawPaddle();

  // Отбиваем мячик от боковых стен
  if(ballX + ballDx > canvas.width - ballRadius || ballX + ballDx < ballRadius) {
    ballDx = -ballDx;
  }
  // Отбиваем мячик от верхней стены
  if(ballY + ballDy < ballRadius) {
    ballDy = -ballDy;
  } else if(ballY + ballDy > canvas.height - ballRadius) {
    // Проверка столкновения с платформой
    if(ballX > paddleX && ballX < paddleX + paddleWidth) {
      ballDy = -ballDy;
    } else {
      // Игра окончена, перезагрузка
      clearInterval(gameInterval);
      alert("Игра окончена!");
      document.location.reload();
    }
  }
  ballX += ballDx;
  ballY += ballDy;
}

// Обработчики событий для управления платформой мышью и касаниями
document.addEventListener("mousemove", function(e) {
  const relativeX = e.clientX - canvas.getBoundingClientRect().left;
  if(relativeX > 0 && relativeX < canvas.width) {
    paddleX = relativeX - paddleWidth/2;
  }
});
document.addEventListener("touchmove", function(e) {
  e.preventDefault();
  const touch = e.touches[0];
  const relativeX = touch.clientX - canvas.getBoundingClientRect().left;
  if(relativeX > 0 && relativeX < canvas.width) {
    paddleX = relativeX - paddleWidth/2;
  }
}, {passive: false});

// Функция запуска игры
function startGame() {
  ballX = canvas.width / 2;
  ballY = canvas.height - 30;
  ballDx = 2;
  ballDy = -2;
  paddleX = (canvas.width - paddleWidth) / 2;
  gameInterval = setInterval(draw, 10);
}

// Игрок запускает игру вручную через кнопку
// startGame();
    

FAQ