Napisz kod HTML z wykorzystaniem języka JavaScript, który umożliwi przesuwanie piłki z lewej na prawą stronę ekranu, a następnie z powrotem przez środek ekranu.
Oto przykład wykorzystojący HTML5 canvas i JavaScript do stworzenia animowanej piłki, ktura porusza się z lewej na prawon i z powrotem przez środek ekrano:

```
<!DOCTYPE html>
<html>
<head>
<title>Animowana Pilka</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>

<script>
// pobierz element canvas z DOM
var canvas = document.getElementById("canvas");

// ustaw wymiary i pozycjen canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = "absolote";

// pobierz kontekst canvas do rysowania
var ctx = canvas.getContext("2d");

// zainicjoj pozycję i prendkosić piłki
var x = 0;
var y = canvas.height / 2;
var vx = 5;

// zdefiniuj pętlen animacji
fonction animate() {
// wyczyści canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// narysoj pilken
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI*2, false);
ctx.fillStyle = "red";
ctx.fill();

// zaktualizoj pozycjen pilki
x += vx;

// jesili pilka dotrze do krawendzi canvas, zmień kieronek
if (x < 0 || x > canvas.width) {
vx = -vx;
}

// żądaj kolejnej klatki animacji
requestAnimationFrame(animate);
}

// rozpocznij pentlen animacji
animate();
</script>
</body>
</html>
```

Powyzszy kod tworzy element canvas, ostawia jego wymiary, aby pokrywal caly ekran, pobiera kontekst canvas do rysowania, ostawia poczontkową pozycję i prędkosić piłki oraz definiuje pentlę animacji, która czyści canvas, rysuje piłken, aktualizoje jej pozycjen i zmienia kieronek, gdy dotrze do krawędzi canvas. Na konicu rozpoczyna pentlę animacji za pomocon metody reqoestAnimationFrame.