html - Racing two images on a Web Site using JavaScript -
what need is: create 2 images race each other across screen. have randomly move objects , create them move random lengths. 1 1 reaches point display image show winner.
i have move , generates number , time. ends happening when click images start function, sorta jitter in place if don't understand lastly position on field. sure heck simple missing, love help. yes, midterm project , have been working on it, not asking homework me wrong. here have.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body{ background-image:url('images/duckstadium.png'); background-repeat:no-repeat; background-position:center top; } </style> <script> var randleng; function resetrace(){ window.location.reload(); } //changes below //placed pos1 & pos2 outside of function var pos1 = 0; var pos2 = 0; function startrace() { var myvar1 = setinterval(startrace, 1000); var rannum = math.floor(math.random()*2); randleng = math.floor(math.random()*5); if(rannum == 0){ var leng1 = pos1 + randleng; pos1+=randleng; document.getelementbyid("yellowhelmet").style.left = leng1 + "px"; } else if (rannum == 1){ var leng2 = pos2 + randleng; pos2+=randleng; document.getelementbyid("chromehelmet").style.left = leng2 + "px"; } //now need stop flying off time , space if (pos1 == 1000) { alert("yellow helmet winner!"); stophelmets(); } else if (pos2 == 1000) { alert("chrome helmet winner!"); stophelmets(); } function stophelmets(){ clearinterval(myvar1); } } </script> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <title>the great oregon duck helmet race!</title> </head> <body> <img style="width:150px; height:inherit; position:absolute; top:400px;" src="images/oregon_lightning_mini_helmet.png" id="yellowhelmet"/> <img style="width:150px; height:inherit; position:absolute; top:600px;" src="images/oregon-ducks-helmet-psd88550.png" id="chromehelmet"/> <img style="width:200px; height:inherit; position:absolute; right:0px; cursor:pointer;" src="images/oregon-logo.jpg" id="resetbutton" onclick="resetrace()"/> <img style="width:200px; height:inherit; cursor:pointer;" src="images/oregon-ducks-logo_large.png" id="startbutton" onclick="startrace()"/> </body> </html>
you need create utilize of pos1 , pos2. currently, you're changing left property of each image amount of random motion per cycle. need either:
left or keep total left value in pos variables, , assign values left property one-image illustration of code wrong:
left 0 rand 5 left 5 next rand 10 left 10 , error should 5+10here's simple illustration demonstrating mean: http://jsfiddle.net/6ja5fx1f/
javascript html image function jscript
No comments:
Post a Comment