Jump to content

PONG EN TU PAG WEB

alvaroxz
 Share

Recommended Posts

alvaroxz Newbie

alvaroxz

Posted
Posted (edited)

haga inicio ejecutar---> y escriba en la barrita de texto "notepad"

 

se abrira un block de notas

 

en el block de notas coloque este script:

 

<!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>

 

guarde y cierre con el nombre de pong.htm

 

y listo tiene su propio pong :banana:

Edited by alvaroxz
Link to comment
Share on other sites
  • Replies 30
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

  • 3 weeks later...
alvaroxz Newbie

alvaroxz

Posted
  • Author
Posted

pero esta wea no es script php?

 

no, no es php, pero es un script hecho y al 100% funcionante asique lo coloque aqui me parecio correcto, si esta mal muevanlo :( no me fue mi intencion colocarlo en un mal lugar

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...