Phiên bản đầy đủ: jsB@nk » Trò chơi » Kĩ năng » Trò chơi ping pong
URL: https://www.javascriptbank.com/dhtml-pong-script.html
Trò chơi ping pong đơn giản không cần dùng hình ảnh. Trong script này, trò chơi phân định thắng thua trong 10 hiệp. AI khá thông minh.
Phiên bản đầy đủ: jsB@nk » Trò chơi » Kĩ năng » Trò chơi ping pong
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-->