Ping Pong

HTML-Einbindung
<!-- Script-Anfang --> <!-- www-java24.net - DIE Javascript - Ressource --> <!-- Diesen Code musst Du in den -head- einbauen --> <style type="text/css"> #pongTable { position: absolute; top: 20px; left: 20px; width: 400px; height: 300px; border: 4px solid #CCC; background-color: #F3F3F3; z-index: 1; } #playerOne { position: absolute; top: 196px; left: 45px; width: 10px; height: 35px; background-color: #777; z-index: 2; } #playerTwo { position: absolute; top: 196px; left: 390px; width: 10px; height: 35px; background-color: #777; z-index: 2; } #ball { position: absolute; top: 160px; left: 210px; width: 7px; height: 7px; clip: rect(0px 7px 7px 0px); background-color: #555; z-index: 2; display: none; } #click { position: absolute; top: 160px; left: 27px; width: 400px; text-align: center; font-family: Tahoma; font-size: 10px; z-index: 3; } #scores { position: absolute; top: 330px; left: 24px; width: 400px; font-family: Tahoma; font-size: 11px; z-index: 3; } </style> <script type="text/javascript"> /*********************************************** * DHTML Phong script- © nathan (http://www.n-son.com/) * Permission granted to DynamicDrive.com to feature script * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var ballAng; var speed = 25; var ping = 2; var pong = 0; var mouseSpeed; var tempY; function init() { document.getElementById("click").style.display = "none"; document.getElementById("ball").style.display = "inline"; with( document.getElementById("ball").style ) { top = "160px"; left = "210px"; } document.onmouseup = null; document.onmousemove = movePaddle; ballAng = Math.round( Math.random() * 100 ) + 130; moveDaBall = setInterval("moveBall()", 10); } function movePaddle(e) { e = (e)?e:event; if( tempY ) { mouseSpeed = Math.round((e.clientY - tempY) * 1.5); if( mouseSpeed == 0 ) mouseSpeed = 1; } with( document.getElementById("playerOne").style ) { top = e.clientY - 18 + "px"; if( parseInt(top) < 24 || parseInt(top) > 289 ) { if( parseInt(top) < 24 ) { top = "24px"; } else { top = "289px"; } } } tempY = e.clientY; } function moveBall() { var ballX = parseInt(document.getElementById("ball").style.left); var ballY = parseInt(document.getElementById("ball").style.top); var playOneX = parseInt( document.getElementById("playerOne").style.left ); var playOneY = parseInt( document.getElementById("playerOne").style.top ); var playTwoX = parseInt( document.getElementById("playerTwo").style.left ); var playTwoY = parseInt( document.getElementById("playerTwo").style.top ); if( ballY >= (playOneY - 5) && ballY <= (playOneY + 35 + 5) && ballX >= playOneX && ballX <= (playOneX + 10) ) { if( pong == 3 ) { ping++; pong = 0; } else { pong++; } document.getElementById("ball").style.left = playOneX + 10 + "px"; ballAng = 180 - ballAng - mouseSpeed; } if( ballY >= (playTwoY - 5) && ballY <= (playTwoY + 35 + 5) && ballX >= playTwoX && ballX <= (playTwoX + 10) ) { if( pong == 3 ) { ping++; pong = 0; } else { pong++; } document.getElementById("ball").style.left = playTwoX + "px"; ballAng = 180 - ballAng; } if( ballY < 25 || ballY > 316 ) { document.getElementById("ball").style.top = (ballY < 25)?25+"px":316+"px"; ballAng = 360 - ballAng; } if( ballX <= 24 || ballX >= 417 ) { document.getElementById("ball").style.left = (ballX <=24)?24+"px":417+"px"; if( ballX<= 24 ) { endPoint(document.getElementById("twoScore")); } else { endPoint(document.getElementById("oneScore")); } } moveAI( ballY ); moveObjAtAngle( document.getElementById("ball"), ballAng, ping); } function moveObjAtAngle( obj, ang, dist ) { with( obj.style ) { left = parseInt(left) + ( dist * Math.cos( ang * (Math.PI/180) ) ) + "px"; top = parseInt(top) - ( dist * Math.sin( ang * (Math.PI/180) ) ) + "px"; } } function moveAI( y ) { var AI = document.getElementById("playerTwo"); y = y - 10; y = parseInt(AI.style.top) + ((y - parseInt(AI.style.top)) / speed); if( y < 24 || y > 289 ) { if( y < 24 ) { y = 24; } else { y = 289; } } AI.style.top = y +"px"; } function endPoint(place) { clearInterval(moveDaBall); ping = 7; pong = 0; document.onmouseup = init; document.getElementById("click").innerHTML = "Klicke um weiterzuspielen"; place.innerHTML = parseInt(place.innerHTML) + 1; if( parseInt(place.innerHTML) == 10 ) { if( place.id == "oneScore" ) { endGame(1); } else { endGame(0); } } document.getElementById("click").style.display = "inline"; } function endGame(win) { document.onmouseup = restartGame; if( win ) { document.getElementById("click").innerHTML = "<strong>Du bist der GEWINNER!</strong><br /> NEUES Spiel"; } else { document.getElementById("click").innerHTML = "<strong>Du hast VERLOREN!</strong><br /> NEUES Spiel"; } } function restartGame() { document.getElementById("oneScore").innerHTML = 0; document.getElementById("twoScore").innerHTML = 0; init(); } document.onmouseup = init; </script> <!-- Diesen Code musst Du in den -body- einbauen --> <div id="pongTable"> <div style="float: right; width: 50%; height: 100%; border-left: 2px dashed #DDD;"> </div> </div> <div id="playerOne" style="left: 45px; top: 146px"> </div> <div id="playerTwo" style="left: 390px; top: 146px"> </div> <div id="ball" style="left: 210px; top: 160px"> </div> <div id="click">Klicke hier um weiterzuspielen</div> <div id="scores"> <span style="float: left;" id="oneScore">0</span> <span style="float: right;" id="twoScore">0</span> </div> <!-- Script-Ende --> <!-- www-java24.net - DIE Javascript - Ressource -->