Full version: jsB@nk » Image » Crazy Jumping Wall-Ball
URL: https://www.javascriptbank.com/crazy-jumping-wall-ball.html
Nobody wants to play pong with our poor little ball. So the ball plays pong with the borders of your page. Eyecatching demonstration how to unleash the power of DHTML-animations without wasting loading time and bandwidth
Full version: jsB@nk » Image » Crazy Jumping Wall-Ball
URL: https://www.javascriptbank.com/crazy-jumping-wall-ball.html
<SCRIPT><!-- Beginning of JavaScript -var x,yvar marginbottomvar marginleft=0var margintop=0var marginright// less is fastervar tempo=10// horizontal move (pixels) within time unitvar stepx=20// vertical move (pixels) within time unitvar stepy=20var timer// preloading of the four ballsimg0 = new Image();img0.src = "ld.gif";img1 = new Image();img1.src = "lu.gif";img2 = new Image();img2.src = "rd.gif";img3 = new Image();img3.src = "ru.gif";// wait 2 seconds after loading (to ensure that images are really loadedfunction setValues() { var firsttimer= setTimeout("setValues2()",2000)}// check the width and the height of the document// gets the starting position of the ball by randomfunction setValues2() {if (document.all) { marginbottom = document.body.clientHeight-50 marginright = document.body.clientWidth-50document.all.ball.style.posLeft=randommaker(marginright-30)+30 document.all.ball.style.posTop=10 moveball()}if (document.layers) { marginbottom = window.innerHeight-10 marginright = window.innerWidth-10document.ball.left=randommaker(marginright-30)+30 document.ball.top=10 moveball()}}// randomfunctionfunction randommaker(range) {rand=Math.floor(range*Math.random()) return rand}function moveball() {checkposition()chooseimage()if (document.all) { document.all.ball.style.posLeft+=stepx document.all.ball.style.posTop+=stepy timer=setTimeout("moveball()",tempo)}if (document.layers) { document.ball.left+=stepx document.ball.top+=stepy timer=setTimeout("moveball()",tempo)}}function checkposition() {if (document.all) {if (document.all.ball.style.posLeft>=marginright) {stepx=stepx*-1document.all.ball.style.posLeft-=10}if (document.all.ball.style.posLeft<=marginleft) {stepx=stepx*-1document.all.ball.style.posLeft+=10}if (document.all.ball.style.posTop>=marginbottom) {stepy=stepy*-1document.all.ball.style.posTop-=10}if (document.all.ball.style.posTop<=margintop) {stepy=stepy*-1document.all.ball.style.posTop+=10}}if (document.layers) {if (document.ball.left>=marginright) {stepx=stepx*-1document.ball.left-=10}if (document.ball.left<=marginleft) {stepx=stepx*-1document.ball.left+=10}if (document.ball.top>=marginbottom) {stepy=stepy*-1document.ball.top-=10}if (document.ball.top<=margintop) {stepy=stepy*-1document.ball.top+=10}}}function chooseimage() {if (document.all) {if (stepx <= 0 && stepy <=0) {ballimage.src="rd.gif"}if (stepx >= 0 && stepy <=0) {ballimage.src="rd.gif"}if (stepx <= 0 && stepy >=0) {ballimage.src="rd.gif"}if (stepx >= 0 && stepy >=0) {ballimage.src="rd.gif"}}if (document.layers) {if (stepx <= 0 && stepy <=0) {document.ball.document.ballimage.src="rd.gif"}if (stepx >= 0 && stepy <=0) {document.ball.document.ballimage.src="rd.gif"}if (stepx <= 0 && stepy >=0) {document.ball.document.ballimage.src="rd.gif"}if (stepx >= 0 && stepy >=0) {document.ball.document.ballimage.src="rd.gif"}}}// - End of JavaScript - --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY id=thisbody onload=setValues()><DIV id=ball style="POSITION: absolute; TOP: -50px"><IMG border=0 name=ballimage src="rd.gif" width="45" height="45"></DIV></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/image/rd.gif