PONG EN TU PAG WEB

RockaMania · April 16, 2007

javascript, css, pulento aporte, :bravo: aunque me sacó la chucha el pc, ta bakn pa meterle mano

Aero · May 29, 2007

Buena socio

disisweis · January 31, 2009

ta bueno pero es imposible ganarle

logre hacer 3 puntos pfff demaciado difici

<!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" />
<BR><BR>
<BR><BR>
<style type="text/css">
#pongTable {
position: absolute;
top: 20px;
left: 20px;
width: 400px;
height: 300px;
border: 4px solid #CCC;
background-color: #FF0000;
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">

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 Para Continuar";
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>Ganaste!</strong><br /> click para reiniciar";
} else {
document.getElementById("click").innerHTML = "<strong>Te Bañastes</strong><br /> click para reiniciar";
}
}
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 Para Continuar</div>
<div id="scores">
<span style="float: left;" id="oneScore">0</span>
<span style="float: right;" id="twoScore">0</span>
</div>

</body>
</html>

BULLAN9EBRIO · February 5, 2009

xDDDD

ju9ue 4 y las perdi toas :banana:

eata bueno eso si, vale

skyrblue · March 15, 2009

yo gane una pura vez de la 20 que jugue xD

wateperro · April 30, 2009

la kago wena compadre aportazo

Templa · June 8, 2009

Muy WEno 1 ! !

panxonuker · June 16, 2009

wena

gracias

overcast__x · June 24, 2009

wena wena

mas dificil k la xuxa si xD

le ice un punto noma con cuea

ThE_VeNeNo · June 25, 2009

jojojojo ta demasiado rapido... pero ta filete

4 puntos maximo raaaaaapida la wa...

ta weno vale.

Sign In

PONG EN TU PAG WEB

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Announcements