главная/Бесконечно прыгающий мяч на Javascript и HTML. С анимацией
прыгающий мяч на js

Бесконечно прыгающий мяч на Javascript и HTML. С анимацией

Идея такая, отрисовать на экране красный шар, он же мяч, используя javascript и запустить его в движение в случайном порядке. При этом, что-бы он отскакивал от краев как настоящий мяч. По сути это заготовка для простой HTML игры
В начале, создадим canvas тэг, с которым будем работать в скрипте.

<!DOCTYPE html>
<html>
  <head>
    <title>Прыгающий шар</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>

Далее находим наш canvas элемент по id, устанавливаем ему свойства и пишем несколько функций.

  1. drawBall — функция для отрисовки шара
  2. updateBallPosition — эта функция обновляет положение мяча, добавляя скорость мяча к его координатам. Она также проверяет, достиг ли мяч края окна, и, если это так, изменяет скорость мяча в соответствующем направлении.
  3. animate — функция вызывает предыдущую функцию updateBallPosition, а затем использует setTimeout для повторного вызова самой себя после небольшой задержки, создавая цикл анимации.
var canvas = document.getElementById("canvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var ctx = canvas.getContext("2d");

var ballRadius = 20;
var ballX = canvas.width / 2;
var ballY = canvas.height / 2;
var ballSpeedX = 5;
var ballSpeedY = 5;

function drawBall() {
  // Очищаем canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Рисуем шар
  ctx.beginPath();
  ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
  ctx.fillStyle = "red";
  ctx.fill();
}

function updateBallPosition() {
  // Обновляем позицию шара
  ballX += ballSpeedX;
  ballY += ballSpeedY;

  // Проверить, достиг ли шар края окна
  if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
    ballSpeedX = -ballSpeedX;
  }
  if (ballY + ballRadius > canvas.height || ballY - ballRadius < 0) {
    ballSpeedY = -ballSpeedY;
  }
}

function animate() {
  updateBallPosition();

  drawBall();

  setTimeout(animate, 10);
}

animate();