JavaScriptTutorial:bouncingballOverviewThistutorialexplainsaHTML/JavaScriptapplicationsimulatingabouncingball,specifically,movementin2Dofanobjectcollidingandbouncingoffofwalls.Thepagewilldisplaytwolinks:onetostarttheballmovingandtheothertostopit.Theballwillstartoffmovingatanangledownandtotheleft.Whenit'hits'oneof4walls,itreversesdirectionandkeepsmoving.ItisimportanttoappreciatewhyIput'hits'inquotationmarks.Nothinghitsanything!Thepositionoftheballischangedincrementallyinboththehorizontalandverticaldimensions.Thecodedoesacalculationtodetermineifthevirtualpositionoftheballisatorpastoneofthewalls.Ifthisistrue,thevalueofeitherthehorizontalincrementalamountortheverticalincrementalamountischangedinsign.Thatis,iftheamountis50,itbecomes-50.Thissimulatesthebouncing.ClickingonthestoplinkcausesmotiontostopANDbothincrementalamountstochangeinsign.ThisapplicationwillmakeuseofthefollowingJavaScriptandHTMLfeatures:scripttagfunctionvardiv,afeatureofcascadingstylesheets(CSS)codingtoworkfordifferentbrowsersifstatementKeyDesignIssuesTask:ProduceanimatedmotionLogic:Wewantanimagetochangepositiononthedisplayscreentosimulatemovement.Thiswillbedonebymovingtheobjectincrementallywhenatimingeventoccurs.Solution:Timingeventswereusedfortheslideshow.ThecodewillusethesetIntervalfunctiontocallafunctionthatre-positionsanimage.Task:Produceincrementalmotion:makeanimagemoveacertainamounthorizontallyandacertainamountvertically.Logic:Wecankeeptrackofthehorizontalandverticalpositionsofanobject.Movingitinvolvesre-positioninganimagehorizontallyandvertically.Solution:Thedivelementincascadingstylesheetscanbeusedtopositionobjectsonthescreen.OnechallengeisthatthereisbrowserdependentcoderequiredtoidentifyspecificelementsintheHTMLdocument.Task:MaketheballbounceLogic:Wecankeeptrackofthehorizontalandverticalpositionofanobject.Tomaketheobjectbounce,weproducecodethatcomparesthehorizontalpositiontonumbersrepresentingthepositionsoftheleftwallandrightwallandtheverticalpositiontonumbersrepresenting