Full version: jsB@nk » Game » Skill » DHTML Pong script
URL: https://www.javascriptbank.com/dhtml-pong-script.html
Phong is an incredible ping-pong game with an even more impressive AI (artificial intelligence). Play against the computer, and see if you can win (take it for us, it's possible). We encourage DHTML programmers to check the source to see how Michael managed this impressive DHTML feat...
Full version: jsB@nk » Game » Skill » DHTML Pong script
URL: https://www.javascriptbank.com/dhtml-pong-script.html
<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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">/************************************************ DHTML Phong script- © nathan (http://www.n-son.com/)***********************************************/var ballAng;var speed = 3;var ping = 5;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 = "click to continue";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>you are dah winnah!</strong><br /> click to start over";} else {document.getElementById("click").innerHTML = "<strong>you are dah losah!</strong><br /> click to start over";}}function restartGame() {document.getElementById("oneScore").innerHTML = 0;document.getElementById("twoScore").innerHTML = 0;init();}document.onmouseup = init;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><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">click to continue</div><div id="scores"><span style="float: left;" id="oneScore">0</span><span style="float: right;" id="twoScore">0</span></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->