Ping Pong

malekith186 · #1 (**permalink**) 13/04/2008, 15:04

Aqui os dejo el clasico juego del Ping Pong

Cita:

<html>
<head>
<title>Ping Pong</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: 5px 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: 196px;
left: 390px;
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">

/***********************************************
* Ping Pong
***********************************************/

var ballAng;
var speed = 2;
var ping = 3;
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.lef t);
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>Has Ganado!</strong><br /> click to start over";
} else {
document.getElementById("click").innerHTML = "<strong>Has Perdido!</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>

Espero que lo disfruteis :D y que os funcione ^^.

iontxu · #2 (**permalink**) 13/04/2008, 16:32

Gracias por el aporte, pero... a mí no me funciona. Lo abro con Firefox desde Mac, por si eso te sirve de ayuda.
Por cierto, ayudaría que le cambiaras el título al POST y delante de ping pong le pusieras "APORTE:", para que todo el mundo sepa que no es una duda.
Un saludo y gracias de nuevo!

marcopoloaz06 · #3 (**permalink**) 13/04/2008, 16:38

Esta bien cagado
pero chido
gracias
:]

derkenuke · #4 (**permalink**) 13/04/2008, 16:51

Wow malekith186, ¿lo has hecho tú? He estado probándolo un ratillo jeje, está muy bien.

Lo que pasa es que es muy complicado ganarle por defecto. Dentro de moveBall() hay una línea que dice así:
moveAI( ballY );
Si ponemos un
setTimeout("moveAI("+ballY+"), 50);
Retardaremos un poquito el movimiento del oponente, y haremos que sea más fácil ganarle en velocidades altas.

Saludos.