Javascript játék animáció segítség :)

Javascript játék animáció segítség :)
2018-05-26T23:22:40+02:00
2018-05-31T18:46:27+02:00
2022-12-05T09:15:36+01:00
Ben800
Sziasztok !

Nemrég kezdtem el érdeklődni a javascript iránt hobbi szinten, és szeretnék egy apróbb egyszerű játékot létrehozni, ahol ki vannak kötözve a léggömbök, mozognak egy picit jobbra balra, mintha a szél fújná őket, majd ha lelövünk egyet akkor X százalékos eredményt ad véletlenszerűen. Találtam is magamnak egy kisebb sablont githubon.

Viszont az animáció részében picit elakadtam, próbáltam az elemeket mozgatni, így mindig csak az egyik elem mozgot, ezt ki is kommenteltem a kódban, majd második nekifutásra megpróbáltam .animate-el, de ilyenkor meg elszállnak a lufik és nem maradnak meg egy helyben . Konkrétan már csak az hiányzik hogy úgymond egy helyben mozogjon a 4 darab lufi, és úgy mintha a szél fújná őket picit ide-oda.
A filet feltöltöttem , ha valaki tudna egy picit segíteni ebben akkor nagyon hálás lennék  :)

var balloon = $(".balloon"); var counter = 0; //számláló var percentage = 0; // százalék if (percentage == 0){ percentage = Math.floor(Math.random() *100); } function start () { var direction = 'B'; var right = 0; var left = 0; var timer = 0; for(var i=0; i<4; i++){ var balloonCopy = balloon.clone(); balloonCopy.css({left:370 + i*100}); balloonCopy.css({top:400}); balloonCopy.appendTo("body"); if(direction == "B") { var top = balloonCopy.animate({top: "100%", top: Math.random() * 100 + "px" }, 16000 - Math.random() * 4); } balloonCopy.click(function() { pop_sound.play(); $(this).remove(); counter = counter + 1; $(".counter").html(counter); if(counter > 0) { $(".percentage").html(percentage + "%"); $('.score-box').addClass('ready');}; }); }; balloon.remove(); } /* function doMoveTop() { if( direction == "B" && parseInt(foo.style.top) < 80) { foo.style.top = parseInt(foo.style.top)+1+'px'; } else if(direction == "B" && parseInt(foo.style.top) >= 60){ foo.style.top = parseInt(foo.style.top)+1+'px'; direction = "T"; } else if(direction == "T" && parseInt(foo.style.top) > 60){ foo.style.top = parseInt(foo.style.top)-1+'px'; } else { foo.style.top = parseInt(foo.style.top)-1+'px'; direction = "B"; } setTimeout(doMoveTop,40); } function init() { direction = "B"; foo = document.getElementById('balloon1'); foo.style.top = '18px'; doMoveTop(); } window.onload = init; */
Mutasd a teljes hozzászólást!
Csatolt állomány
Mivel nem volt "időm" az általad elképzelt megoldás megvalósítására, ezért gyorsan készítettem egy egyszerű játék-tesztet...
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd