krouzek:balonky

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Titulek</title>
  <style>
#plocha {
background-color: rgb(120, 200, 200);
width: 800px;
height: 600px;
position: relative;
}
 
#sip {
background-color:rgb(100,100,255);
background-image: url('sip.svg');
background-size: 100% auto;
background-position: top left;
width: 80px;
height: 22px;
position: absolute;
top: 400px;
left: 600px;
}
 
 /* trida (class) */
.balonek {
background-color: red;
background-image: url('balonek.svg');
background-size: cover;
width: 100px;
height: 200px;
position: absolute;
}
 
#balonek1 {
top: 30px;
left: 220px;
}
 
#balonek2 {
top: 50px;
left: 150px;
}
 
#balonek1 {
top: 30px;
left: 320px;
}
 
</style>
   <link rel="stylesheet" type="text/css" href="styl.css">
 
    <script>
    /* <![CDATA[ */
    /* Sem prijde javascript kod */
 
	// pole balonku
	const balonky=[
	{
		x: 100,
		y: 300
	},
	{
		x: 50,
		y: 250
	},
	{
		x: 300,
		y: 400
	}
	]
 
	  function vykresli(){
 
	  // Cyklus pres vsechny balonky
	  for(let i=0; i < balonky.length; i++){
	    const balonek = balonky[i]
		balonek.y--
		if(balonek.y < -200){
			balonek.y = 600
		}
		document.getElementById('balonek'+i).style.top = balonek.y+'px'
	  }
 
 
	   // Zavolani nasledujiciho vykresleni
	   requestAnimationFrame(vykresli)
	  }
 
	// prvni zavolani
	requestAnimationFrame(vykresli)
 
 
    /* ]]> */
    </script>
</head>
 
<body>
<div id="plocha">
	<div id="sip"></div>
	<div id="balonek0" class="balonek"></div>
	<div id="balonek1" class="balonek"></div>
	<div id="balonek2" class="balonek"></div>
</div>
 
</body>
</html>