<!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>
<title>DHTMLPong</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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 = 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>
</head>
<body>
<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>
</body>
</html>
