Бесконечно прыгающий мяч на Javascript и HTML. С анимацией
Идея такая, отрисовать на экране красный шар, он же мяч, используя javascript и запустить его в движение в случайном порядке. При этом, что-бы он отскакивал от краев как настоящий мяч. По сути это заготовка для простой HTML игры
В начале, создадим canvas тэг, с которым будем работать в скрипте.
<!DOCTYPE html>
<html>
<head>
<title>Прыгающий шар</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>Далее находим наш canvas элемент по id, устанавливаем ему свойства и пишем несколько функций.
- drawBall — функция для отрисовки шара
- updateBallPosition — эта функция обновляет положение мяча, добавляя скорость мяча к его координатам. Она также проверяет, достиг ли мяч края окна, и, если это так, изменяет скорость мяча в соответствующем направлении.
- 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();