Juego PONG
Hola:
Tengo un problema con programación de un juego tipo PONG, ya sabéis, el viejo PING PONG de las palas y la pelotita.
Lo que me pasa es que no consigo hacer con que la pelota colisione con la pala, envio el código para ver si alguién me puede hechar una mano.
Gracias
Pernilongo
código:
<HTML>
<HEAD>
<TITLE>Posicionamiento</TITLE>
<SCRIPT>
<!--
var posicionx=20
var posiciony=50
function movePala(){
var xpos = window.event.x;
file://if ((ypos >= 50) && (ypos <= 230))
pala.style.posLeft = xpos;
}
function MoverBola() {
var xp = bola.style.posLeft;
var yp = bola.style.posTop;
var colision = document.elementFromPoint(xp,yp);
bola.style.pixelLeft = parseInt(bola.style.pixelLeft) + posicionx;
bola.style.pixelTop = parseInt(bola.style.pixelTop) - posiciony;
if (bola.style.pixelTop>640){
bola.style.pixelTop =640
bola.style.pixelLeft=1000
location.reload(true);
}
if(bola.style.pixelTop<15){
posiciony=posiciony*-1
}
if(bola.style.pixelLeft>1080){
posicionx=posicionx*-1
}
if(bola.style.pixelLeft<5){
posicionx=posicionx*-1
}
setTimeout('MoverBola()',100);
}
file://-->
</SCRIPT>
<script language="JavaScript">
<!--
function MM_reloadPage(init) { file://reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</HEAD>
<BODY onmousemove="movePala()">
<img id="pala" src="pala.jpg" style="position: absolute; Top:640; Left:445; Width:229px; Height:23px;z-index:2; visibility: visible" width="139" height="12">
<img id="bola" scr="bola.jpg" style="position: absolute; Top:604px; Left:1013px; Width:30; Height:30; z-index:3;" width="199" height="8" src="bola.jpg">
<div id="escena" style="position:absolute; left:7; top:6px; width:1024; height:768; z-index:1; background-image: url(fondo.jpg); layer-background-image: url(fondo.jpg); border: 1px none #000000; visibility: hidden">
</div>
<div id="boton" style="position:absolute; left:965px; top:19px; width:146px; height:81px; z-index:2; visibility: visible">
<input type="submit" name="Submit" value="empezar" onclick="MoverBola()">
</div>
</BODY>
</HTML>
Tengo un problema con programación de un juego tipo PONG, ya sabéis, el viejo PING PONG de las palas y la pelotita.
Lo que me pasa es que no consigo hacer con que la pelota colisione con la pala, envio el código para ver si alguién me puede hechar una mano.
Gracias
Pernilongo
código:
<HTML>
<HEAD>
<TITLE>Posicionamiento</TITLE>
<SCRIPT>
<!--
var posicionx=20
var posiciony=50
function movePala(){
var xpos = window.event.x;
file://if ((ypos >= 50) && (ypos <= 230))
pala.style.posLeft = xpos;
}
function MoverBola() {
var xp = bola.style.posLeft;
var yp = bola.style.posTop;
var colision = document.elementFromPoint(xp,yp);
bola.style.pixelLeft = parseInt(bola.style.pixelLeft) + posicionx;
bola.style.pixelTop = parseInt(bola.style.pixelTop) - posiciony;
if (bola.style.pixelTop>640){
bola.style.pixelTop =640
bola.style.pixelLeft=1000
location.reload(true);
}
if(bola.style.pixelTop<15){
posiciony=posiciony*-1
}
if(bola.style.pixelLeft>1080){
posicionx=posicionx*-1
}
if(bola.style.pixelLeft<5){
posicionx=posicionx*-1
}
setTimeout('MoverBola()',100);
}
file://-->
</SCRIPT>
<script language="JavaScript">
<!--
function MM_reloadPage(init) { file://reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</HEAD>
<BODY onmousemove="movePala()">
<img id="pala" src="pala.jpg" style="position: absolute; Top:640; Left:445; Width:229px; Height:23px;z-index:2; visibility: visible" width="139" height="12">
<img id="bola" scr="bola.jpg" style="position: absolute; Top:604px; Left:1013px; Width:30; Height:30; z-index:3;" width="199" height="8" src="bola.jpg">
<div id="escena" style="position:absolute; left:7; top:6px; width:1024; height:768; z-index:1; background-image: url(fondo.jpg); layer-background-image: url(fondo.jpg); border: 1px none #000000; visibility: hidden">
</div>
<div id="boton" style="position:absolute; left:965px; top:19px; width:146px; height:81px; z-index:2; visibility: visible">
<input type="submit" name="Submit" value="empezar" onclick="MoverBola()">
</div>
</BODY>
</HTML>