AI game creator

Click here for free DL of the app version that can save data.

No:37177

←

Prev Next

→

Block Breaker
Developer User17015｜Date and time 24/1/20 17:31:29
Build time 16.656 sec｜Game capacity 4.455KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block Breaker</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>

// Определение размеров
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;

// Определение позиции и размеров платформы
    const platformWidth = 75;
    const platformHeight = 10;
    let platformX = (canvasWidth - platformWidth) / 2;

// Определение данных для мяча
    const ballRadius = 10;
    let ballX = canvasWidth / 2;
    let ballY = canvasHeight - 30;
    let ballDX = 2;
    let ballDY = -2;

// Нажата ли кнопка на смартфоне (лево/право)
    let leftButtonPressed = false;
    let rightButtonPressed = false;

// Обработчики для нажатия кнопок на смартфоне
    canvas.addEventListener("touchstart", handleTouchStart, false);
    canvas.addEventListener("touchend", handleTouchEnd, false);

// Обработчик нажатия на смартфоне
    function handleTouchStart(event) {
      event.preventDefault();
      const touch = event.touches[0];
      const touchX = touch.pageX - canvas.offsetLeft;

if (touchX < canvasWidth / 2) {
        leftButtonPressed = true;
      } else {
        rightButtonPressed = true;
      }
    }

// Обработчик отпускания на смартфоне
    function handleTouchEnd(event) {
      event.preventDefault();
      leftButtonPressed = false;
      rightButtonPressed = false;
    }

// Рисование платформы
    function drawPlatform() {
      ctx.beginPath();
      ctx.rect(platformX, canvasHeight - platformHeight, platformWidth, platformHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

// Рисование мяча
    function drawBall() {
      ctx.beginPath();
      ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

// Обработчик нажатия клавиши
    function keyDownHandler(event) {
      if (event.keyCode === 37) {
        leftButtonPressed = true;
      } else if (event.keyCode === 39) {
        rightButtonPressed = true;
      }
    }

// Обработчик отпускания клавиши
    function keyUpHandler(event) {
      if (event.keyCode === 37) {
        leftButtonPressed = false;
      } else if (event.keyCode === 39) {
        rightButtonPressed = false;
      }
    }

// Инициализация обработчиков клавиш
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

// Обработка столкновения мяча с платформой
    function ballPlatformCollisionDetection() {
      if (ballX > platformX && ballX < platformX + platformWidth && ballY + ballDY > canvasHeight - platformHeight) {
        ballDY = -ballDY;
      }
    }

// Рисование игрового поля
    function draw() {
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      drawPlatform();
      drawBall();
      ballPlatformCollisionDetection();

// Обработка столкновения мяча со стенами
      if (ballX + ballDX > canvasWidth - ballRadius || ballX + ballDX < ballRadius) {
        ballDX = -ballDX;
      }
      if (ballY + ballDY < ballRadius) {
        ballDY = -ballDY;
      }

// Обработка движения платформы
      if (leftButtonPressed && platformX > 0) {
        platformX -= 7;
      } else if (rightButtonPressed && platformX < canvasWidth - platformWidth) {
        platformX += 7;
      }

// Обновление координат мяча
      ballX += ballDX;
      ballY += ballDY;

requestAnimationFrame(draw);
    }

draw(); // Запуск игры
  </script>
</body>
</html>