Game PunkPong : Game : Page Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Page Components » Game »

 

Game PunkPong



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>PunkPong &copy; (by Joan Alba Maldonado)</title>
        <!-- (cPunkPong - Programa realizado por Joan Alba Maldonado (granvino@granvino.com). Prohibido publicar, reproducir o modificar sin citar expresamente al autor original. -->
        <script language="JavaScript1.2" type="text/javascript">
            <!--

            //(c) PunkPong - Programa realizado por Joan Alba Maldonado (granvino@granvino.com). Prohibido publicar, reproducir o modificar sin citar expresamente al autor original.

            //Variable que guardara el primer evento de teclado en ejecutarse por primera vez (pude ser onkeydown u onkeypress):
            var primer_evento;

            //Variable que guarda la dimension del area de juego:
            var area_juego_x = 700//Pixels de la horizontal.
            var area_juego_y = 400//Pixels de la vertical.
            
            //Variable que guarda el alto de las paletas:
            var paletas_height = 80;
            //Variable que guarda el ancho de las paletas:
            var paletas_width = 20;

            //Variable que guarda el alto de la pelota:
            var pelota_height = 10;
            //Variable que guarda el ancho de la pelota:
            var pelota_width = 10;

            //Variable para saber si se ha de sacar la pelota:
            var se_ha_de_sacar = true;

            //Variable que guarda el ultimo ganador (para saber quien saca):
            var ultimo_ganador = "usuario";

            //Varialbe que define si la pelota esta en movimiento o quita:
            var pelota_moviendose = false;

            //Variable que guardara el setInterval que llamara a la funcion de mover_pelota:
            var pelota_movimiento = setInterval(""10000);
            
            //Variable que guardara el setInterval que hara moverse al ordenador:
            var ordenador_movimiento = setInterval(""10000);

            //Variable que contiene el numero de pixels que la pelota se desplaza:
            var desplazamiento_x = 4//Desplazamiento horizontal.
            var desplazamiento_y = 1//Desplazamiento vertical.
            
            //Variable que contiene los milisegundos entre movimiento y movimiento, para la pelota:
            var velocidad_pelota_inicial = 25//La velocidad al empezar.
            var velocidad_pelota = velocidad_pelota_inicial; //Aqui se ira decrementando (mas rapido) cuando se requiera.

            //Variable que contendra un numero aleatorio para saber sobre que extremo de la paleta ha de rematar el ordenador:
            var vertical_aleatorio = 0;

            //Variable que guarda la puntuacion del usuario:
            var puntuacion = 0;
            
            //Variables que guardan el numero de goles de cada jugador:
            var goles_ordenador = 0//Goles del ordenador.
            var goles_usuario = 0//Goles del usuario.

            //Variable que define los reflejos del ordenador (se incrementa segun nivel):
            var reflejos_iniciales = 0//Reflejos iniciales.
            var reflejos_ordenador = reflejos_iniciales; //Reflejos que iran aumentando conforme el nivel.

            //Variable que guarda el numero de nivel:
            var nivel = 1//Nivel inicial.
            
            //Numero de vidas inicial:
            var vidas_inicial = 5;
            var vidas = vidas_inicial;
            
            //Varialbe que impide el movimiento de la paleta del usuario (para cuando se inicia el juego):
            var impedir_movimiento = true;

            //Variable para saber con que se controlara el juego:
            var tipo_control = "teclado";


            //Funcion que inicia el juego:
            function iniciar_juego()
             {
                
                //Se borran los intervalos:
                clearInterval(pelota_movimiento)//Se para la pelota.
                clearInterval(ordenador_movimiento)//Se para la paleta del ordenador.
                
                //La pelota ya no se mueve:
                pelota_moviendose = false;
                
                //Se debe sacar:
                se_ha_de_sacar = true;
                
                //El ultimo ganador (el primero en tirar) es el usuario:
                ultimo_ganador = "usuario";
                
                //Setear velocidad a inicial, desplazamientos a inicial, vidas a tope, puntuacion a cero, etc...
                vidas = vidas_inicial;
                
                //Se setea la puntuacion a cero:
                puntuacion = 0;
                
                //Se setean los goles de ambos a cero:
                goles_ordenador = 0;
                goles_usuario = 0;
                
                //Se setea el nivel al primero (inicial):
                nivel = 1;
                
                //Se setea la velocidad de la pelota a la inicial:
                velocidad_pelota = velocidad_pelota_inicial;
                
                //Se setean los reflejos del ordenador a los iniciales:
                reflejos_ordenador = reflejos_iniciales;
                
                //La variable para saber sobre que lado golpear la paleta del ordenador a la pelota se setea a cero:
                vertical_aleatorio = 0;
                
                //Se setea el desplazamiento inicial de la pelota:
                desplazamiento_x = 2;
                
                desplazamiento_y = 1;
                
                //Se actualizan los marcadores:
                actualizar_marcadores();

                //Se posiciona la pelota en la paleta:
                posicionar_pelota(0);
                
                //Se hace visisble el cartel de anuncios e inicia la cuentra atras:
                setTimeout("document.getElementById('cartel_anuncios').style.visibility = 'visible'; document.getElementById('cartel_anuncios').innerHTML = 'Countdown<br>Wait...<br>3';"1000);
                setTimeout("document.getElementById('cartel_anuncios').innerHTML = 'Countdown<br>Wait...<br>2';"2000);
                setTimeout("document.getElementById('cartel_anuncios').innerHTML = 'Countdown<br>Wait...<br>1';"3000);
                
                //Despues de la cuenta atras, se anuncia que comienza el juego y se desbloquea la paleta del usuario para que se pueda mover:
                setTimeout("document.getElementById('cartel_anuncios').innerHTML = 'The<br>game<br>begins'; impedir_movimiento = false;"4000);
                setTimeout("document.getElementById('cartel_anuncios').style.visibility = 'hidden';"7000)//Se quita el cartel a los 3 segundos del "Comienza el juego".
                
             }

            //Funcion que comienza el movimiento de la pelota:
            function sacar_pelota()
             {
                //Calcular si se ha de sacar:
                //if (se_ha_de_sacar) { sadfsd }
                if (!pelota_moviendose && se_ha_de_sacar)
                 {
                    //Se setea la variable para saber que ya se ha sacado:
                    se_ha_de_sacar = false;
                        
                    //Se setea la variable para saber que la pelota ha comenzado a moverse:
                    pelota_moviendose = true;

                    //Se destruye el movimiento anterior, si aun existiera:
                    clearInterval(pelota_movimiento);

                    //Si al que le toca sacar es el usuario:
                    if (ultimo_ganador == "usuario")
                     {
                       //Se define el desplazamiento (positivo):
                       desplazamiento_x = 4;
                       desplazamiento_y = 1;

                       //Numero aleatorio para calcular en un lado de la paleta o en otro:
                       vertical_aleatorio = parseInt(Math.random() 40);
                     }
                    else if (ultimo_ganador == "ordenador")
                     {
                       //Se define el desplazamiento (positivo):
                       desplazamiento_x = -4;
                       desplazamiento_y = -1;
                     }

                   //Se comienza a mover la pelota 2x2 pixels, cada X (velocidad_pelota) milisegundos:
                   pelota_movimiento = setInterval("mover_pelota();", velocidad_pelota);

                 }
             }

            //Funcion que posiciona la pelota en la paleta de quien corresponde:
            function posicionar_pelota(posicion_y)
             {
                 //Si la pelota no esta moviendose y se debe sacar:
                 if (!pelota_moviendose && se_ha_de_sacar)
                  {

                    //Se posiciona la pelota verticalmente, segun el parametro enviado:
                    document.getElementById("pelota").style.top = posicion_y + 36 "px";
                   
                    //Si el ultimo ganador es el usuario (el que saca), posicionamos la pelota en su paleta:
                    if (ultimo_ganador == "usuario") { document.getElementById("pelota").style.left = 30 + paletas_width + "px"}
                    //...y si el ganador es el ordenador, se pone la pelota en su paleta para que saque el:
                    else if (ultimo_ganador == "ordenador") { document.getElementById("pelota").style.left = area_juego_x - 30 - pelota_height - paletas_width + "px"}
                  }

                //Se actualizan los marcadores:
                actualizar_marcadores();

                //Si se marcan 3 goles (o mas, por si acaso), se pasa de nivel:
                if (goles_usuario >= 3) { pasar_nivel()}
                
                //Si se pierden todas las vidas, se alerta del GameOver y se reinicia el juego:
                if (vidas < 0)
                 {
                    //Se setea conforme la pelota ya no se mueve:
                    pelota_moviendose = false;
                    //Se setea conforme ya no se ha de sacar:
                    se_ha_de_sacar = false;
                    //Se para la pelota:
                    clearInterval(pelota_movimiento);
                    //Se detiene la paleta del ordenador:
                    clearInterval(ordenador_movimiento);

                    //Se posiciona la paleta del usuario arriba del todo:
                    document.getElementById("paleta_usuario").style.top = "0px";

                    //Se anuncia que se ha acabado el juego:
                    document.getElementById("cartel_anuncios").innerHTML = "End<br>of<br>game";
                    document.getElementById("cartel_anuncios").style.visibility = "visible";
                    setTimeout("document.getElementById('cartel_anuncios').style.visibility = 'hidden';"3000);

                    //Se alerta del fin de juego:
                    alert("Game Over");

                    impedir_movimiento = true;
                 
                    //En 3 segundos (3000 milisegundos) comienza el nuevo juego:
                    setTimeout("iniciar_juego();"3000);
                 }
             }

            //Funcion que captura las teclas pulsadas y realiza la accion correspondiente (llama a mover_paleta):
            function tecla_pulsada(e, evento_actual)
             {
                //Si el primer evento esta vacio, se le introduce como valor el evento actual (el que ha llamado a esta funcion):
                if (primer_evento == "") { primer_evento = evento_actual; }
                //Si el primer evento no es igual al evento actual (el que ha llamado a esta funcion), se vacia el primer evento (para que a la proxima llamada entre en la funcion) y se sale de la funcion:
                if (primer_evento != evento_actual) { primer_evento = ""return}

                //Si el control seleccionado no es el teclado, sale de la funcion:
                if (tipo_control != "teclado") { return}

                //Capturamos la tacla pulsada, segun navegador:
                if (e.keyCode) { var unicode = e.keyCode; }
                //else if (event.keyCode) { var unicode = event.keyCode; }
                else if (window.Event && e.which) { var unicode = e.which; }
                else var unicode = 40//Si no existe, por defecto se utiliza la flecha hacia abajo.

                //Si el movimiento de la paleta del usuario esta impedido, se sale de la funcion:
                if (impedir_movimiento) { return false}

                //Definimos las variables de posicion (Y) del personaje:
                var posicion_y = parseInt(document.getElementById("paleta_usuario").style.top);

                //Si se pulsa la flecha hacia arriba, se restan 40 pixels verticales:
                if (unicode == 38) { posicion_y -= 40}
                //Si se pulsa la flecha hacia abajo, se suman 40 pixels verticales:
                else if (unicode == 40) { posicion_y += 40}

                //Codigos de teclas de disparo: 17 (ctrl), 16 (shift), 32 (space), 13 (return), 45 (insert), 96 (0), 190 (.).
                //Si el codigo es una de las teclas de disparo:
                else if (unicode == 39 || unicode == 17 || unicode == 16 || unicode == 32 || unicode == 13 || unicode == 45 || unicode == 96 || unicode == 190)
                 {
                    //Si la pelota no esta moviendose, se ha de sacar y el que ha de sacar es el usuario:
                    if (!pelota_moviendose && se_ha_de_sacar && ultimo_ganador == "usuario")
                     {
                        //Se saca la pelota:
                        sacar_pelota();
                     }
                 }

                //Se mueve la paleta, a las nuevas coordenadas (si existen):
                mover_paleta(posicion_y, "usuario");
  
                //Sale de la funcion, retornando true:
                return true;
             }
             
            
            //Funcion que mueve la paleta con el raton:
            function mover_raton(e)
             {
                //Si el control seleccionado no es el raton, sale de la funcion:
                if (tipo_control != "raton") { return}
                
                //Si el movimiento de la paleta del usuario esta impedido, se sale de la funcion:
                if (impedir_movimiento) { return false}
                
                //Variable para saber si estamos en Internet Explorer o no:
                var ie = document.all ? true false;
                //Si estamos en internet explorer, se recogen las coordenadas del raton de una forma:
                if (ie)
                 {
                   posicion_y_raton = event.clientY + document.body.scrollTop;
                 }
                //...pero en otro navegador, se recogen de otra forma:
                else
                 {
                    document.captureEvents(Event.MOUSEMOVE);
                    posicion_y_raton = e.pageY;
                 
                //Si las coordenadas X o Y del raton son menores que cero, se ponen a cero:
                if (posicion_y_raton < 0) { posicion_y_raton = 0}
                if (posicion_y_raton >= area_juego_y) { posicion_y_raton = area_juego_y - parseInt(paletas_height/2+ parseInt(pelota_height*2)}

                //Definimos las variables de posicion (Y) del personaje:
                var posicion_y = parseInt(document.getElementById("paleta_usuario").style.top);

                //Se setea la variable de la posicion (Y) de la paleta igual que la del raton:
                posicion_y = posicion_y_raton - parseInt(paletas_height/2(pelota_height*2);

                //Se mueve la paleta, a las nuevas coordenadas (si existen):
                mover_paleta(posicion_y, "usuario");
             }
                          
             
            //Funcion que saca la pelota al hacer click con el raton:
            function hacer_click()
             {
                //Si el control seleccionado no es el raton, sale de la funcion:
                if (tipo_control != "raton") { return}
                
                //Si el movimiento de la paleta del usuario esta impedido, se sale de la funcion:
                if (impedir_movimiento) { return false}
                
                //Si la pelota no esta moviendose, se ha de sacar y el que ha de sacar es el usuario:
                if (!pelota_moviendose && se_ha_de_sacar && ultimo_ganador == "usuario")
                 {
                     //Se saca la pelota:
                     sacar_pelota();
                 }
             }
            
             
             
            //Funcion que mueve al enemigo:
            function mover_enemigo(pelota_y)
             {
                //Si pelota_moviendose = false, salir de la funcion:
                if (!pelota_moviendose) { return false}
                
                //Variable que guarda la nueva posicion vertical del enemigo:
                var enemigo_y = parseInt(document.getElementById("paleta_ordenador").style.top);

                //Variable aleatoria para definir si el enemigo va a moverse o no:
                var moverse_enemigo = parseInt(Math.random() 10)//Va del 0 al 9, y si es mayor que 8 entonces no se mueve.
                if (moverse_enemigo > reflejos_ordenador) { return false//Si es mayor a 8, sale de la funcion (el enemigo no se mueve).
                
                //Si la pelota esta mas arriba que la paleta del enemigo, el enemigo sube:
                if (pelota_y < enemigo_y)
                 {
                    if (enemigo_y - 10 >= && enemigo_y - 10 <= pelota_y)
                     {
                        enemigo_y -= 10;
                     }
                    else if (enemigo_y - >= && enemigo_y - <= pelota_y)
                     {
                        enemigo_y -= 4;
                     }
                    else if (enemigo_y - >= && enemigo_y - <= pelota_y)
                     {
                        enemigo_y -= 2;
                     }
                    else if (enemigo_y - >= && enemigo_y - <= pelota_y)
                     {
                        enemigo_y -= 1;
                     }
                    else if (enemigo_y - 10 >= 0)
                     {
                        enemigo_y -= 10;
                     }
                    else if (enemigo_y - >= 0)
                     {
                        enemigo_y -= 4;
                     }
                    else if (enemigo_y - >= 0)
                     {
                        enemigo_y -= 2;
                     }
                    else if (enemigo_y - >= 0)
                     {
                        enemigo_y -= 1;
                     }

                    if (enemigo_y - vertical_aleatorio >= && enemigo_y - vertical_aleatorio <= pelota_y)
                     {
                        enemigo_y -= vertical_aleatorio;
                     }

                 }
                //...pero si la pelota esta mas abajo que la paleta del enemigo, el enemigo baja:
                else if (pelota_y > enemigo_y + paletas_height)
                 {
                    if (enemigo_y + 10 <= area_juego_y && enemigo_y + 10 <= pelota_y)
                     {
                        enemigo_y += 10;
                     }
                    if (enemigo_y + <= area_juego_y && enemigo_y + <= pelota_y)
                     {
                        enemigo_y += 4;
                     }
                    else if (enemigo_y + <= area_juego_y && enemigo_y + <= pelota_y)
                     {
                        enemigo_y += 2;
                     }
                    else if (enemigo_y + <= area_juego_y && enemigo_y + <= pelota_y)
                     {
                        enemigo_y += 1;
                     }
                    else if (enemigo_y + 10 <= area_juego_y)
                     {
                        enemigo_y += 10;
                     }
                    else if (enemigo_y + <= area_juego_y)
                     {
                        enemigo_y += 4;
                     }
                    else if (enemigo_y + <= area_juego_y)
                     {
                        enemigo_y += 2;
                     }
                    else if (enemigo_y + <= area_juego_y)
                     {
                        enemigo_y += 1;
                     }


                    if (enemigo_y + vertical_aleatorio <= area_juego_y && enemigo_y + vertical_aleatorio <= pelota_y)
                     {
                        enemigo_y += vertical_aleatorio;
                     }
                 }
                
                //Mueve al enemigo con la nueva configuracion:
                mover_paleta(enemigo_y, "ordenador");
             }
            
            //Funcion que mueve la paleta segun las ordenadas (vertical) enviadas por tecla_pulsada:
            function mover_paleta(posicion_y, quien_mueve)
             {
                //Se define la variable para saber si se ha movido la paleta o no:
                var se_ha_movido_paleta = false;
                
                //Si la posicion enviada esta fuera de la zona de juego, sale de la funcion sin mover la paleta y retornando false:
                if (posicion_y < || posicion_y > area_juego_y - paletas_height) { return false}
                //Si el que mueve es el usuario, mueve su paleta a la nueva posicion:
                else if (quien_mueve == "usuario") { document.getElementById("paleta_usuario").style.top = posicion_y + "px"; se_ha_movido_paleta = true}
                //...y si el que mueve es el ordenador, mueve su paleta a la nueva posicion:
                else if (quien_mueve == "ordenador") { document.getElementById("paleta_ordenador").style.top = posicion_y + "px"; se_ha_movido_paleta = true}

                //Si la pelota no se esta moviendo, y se ha de sacar y se ha movido la paleta, mover tambien la pelota:
                if (!pelota_moviendose && se_ha_de_sacar && se_ha_movido_paleta && quien_mueve == ultimo_ganador) { posicionar_pelota(posicion_y)}
              
                //Sale de la funcion, retornando true:
                return true;
             }

            //Funcion que mueve la pelota:
            function mover_pelota ()
             {
                //Si la pelota esta parada, salir de la funcion:
                if (!pelota_moviendose) { return}
                
                //if (document.getElementById("pelota").style.top < 0 || document.getElementById("pelota").style.left > area_juego_y) { return; }
                
                //Mueve la pelota:
                document.getElementById("pelota").style.left = parseInt(document.getElementById("pelota").style.left+ desplazamiento_x + "px"//Horizontalmente.
                //Si la nueva posicion vertical va a ser menor que cero, dejarla arriba del todo (sin pasar el borde):
                if (parseInt(document.getElementById("pelota").style.top+ desplazamiento_y < 0)
                 {
                    document.getElementById("pelota").style.top = "0px"//Se pone arriba del todo, sin pasar el borde.
                 }
                //...y si la nueva posicion vertical va a ser mayor que el alto del area de juego, dejarla abajo del todo (sin pasar el borde):
                else if (parseInt(document.getElementById("pelota").style.top+ desplazamiento_y + pelota_width > area_juego_y)
                 {
                    document.getElementById("pelota").style.top = area_juego_y - pelota_width + "px"//Se pone abajo del todo, sin pasar el borde.
                 }
                //...y si no, la nueva posicion vertical es correcta y se aplica tal cual:
                else document.getElementById("pelota").style.top = parseInt(document.getElementById("pelota").style.top+ desplazamiento_y + "px"//Verticalmente. 
                
                //Calcular colision:
                calcular_colision(parseInt(document.getElementById("pelota").style.left), parseInt(document.getElementById("pelota").style.top));
                
                //Mover al enemigo:
                mover_enemigo(parseInt(document.getElementById("pelota").style.top));
                
             }
            
            //Funcion que calcula la colision entre paleta y pelota, y entre pelota y pared:
            function calcular_colision (pelota_x, pelota_y)
             {
                //Calcular si ha colisionado con alguna pared (de arriba o abajo):
                if (pelota_y <= || pelota_y >= 400 - pelota_height)
                 {
                    //Cancela el movimiento de la pelota:
                    clearInterval(pelota_movimiento);
                    //Setear los nuevos valores de desplazamiento de la pelota:
                    desplazamiento_y *= -1//Se invierte el movimiento vertical.
                    //Mueve la pelota con los nuevos valores:
                    pelota_movimiento = setInterval("mover_pelota();", velocidad_pelota);
                    //Sale de la funcion:
                    return;
                 }

                //Variables que recogen las coordenadas de las paletas:
                var paleta_usuario_top = parseInt(document.getElementById("paleta_usuario").style.top);
                var paleta_usuario_left = parseInt(document.getElementById("paleta_usuario").style.left);
                var paleta_ordenador_top = parseInt(document.getElementById("paleta_ordenador").style.top);
                var paleta_ordenador_left = parseInt(document.getElementById("paleta_ordenador").style.left);
                
                //Variable para calcular la colision con el lateral de la paleta con la pelota:
                var pelota_contra_lateral = false;
                
                //Variable para saber si invertir o no el movimiento de y:
                var invertir_y = false;
                
                //Calcular si la pelota ha colisionado con el lateral superior de la paleta del usuario:
                if (pelota_x >= paleta_usuario_left && pelota_x + pelota_width <= paleta_usuario_left + paletas_width && pelota_y + pelota_height >= paleta_usuario_top && pelota_y <= paleta_usuario_top)
                 {
                    pelota_contra_lateral = true//Ha colisionado la pelota contra el lateral superior de la paleta del usuario.
                    //Si la pelota iba hacia abajo, invertir movimiento:
                    if (desplazamiento_y > 0) { invertir_y = true}
                 }
                //Calcular si la pelota ha colisionado con el lateral inferior de la paleta del usuario:
                else if (pelota_x >= paleta_usuario_left && pelota_x + pelota_width <= paleta_usuario_left + paletas_width && pelota_y <= paleta_usuario_top + paletas_height && pelota_y + pelota_height >= paleta_usuario_top + paletas_height)
                 {
                    pelota_contra_lateral = true//Ha colisionado la pelota contra el lateral inferior de la paleta del usuario.
                    //Si la pelota iba hacia arriba, invertir movimiento:
                    if (desplazamiento_y < 0) { invertir_y = true}
                 }
                //Calcular si la pelota ha colisionado con el lateral superior de la paleta del ordenador:
                else if (pelota_x >= paleta_ordenador_left && pelota_x + pelota_width <= paleta_ordenador_left + paletas_width && pelota_y + pelota_height >= paleta_ordenador_top && pelota_y <= paleta_ordenador_top)
                 {
                    pelota_contra_lateral = true//Ha colisionado la pelota contra el lateral superior de la paleta del ordenador.
                    //Si la pelota iba hacia abajo, invertir movimiento:
                    if (desplazamiento_y > 0) { invertir_y = true}
                 }
                //Calcular si la pelota ha colisionado con el lateral inferior de la paleta del ordenador:
                else if (pelota_x >= paleta_ordenador_left && pelota_x + pelota_width <= paleta_ordenador_left + paletas_width && pelota_y <= paleta_ordenador_top + paletas_height && pelota_y + pelota_height >= paleta_ordenador_top + paletas_height)
                 {
                    pelota_contra_lateral = true//Ha colisionado la pelota contra el lateral inferior de la paleta del ordenador.
                    //Si la pelota iba hacia arriba, invertir movimiento:
                    if (desplazamiento_y < 0) { invertir_y = true}
                 }

                //Si la pelota ha colisionado con el lateral de alguna paleta:
                if (pelota_contra_lateral)
                 {
                    //Se vuelve a setear la variable como estaba, por si acaso:
                    pelota_contra_lateral = false;
                    //Cancela el movimiento de la pelota:
                    clearInterval(pelota_movimiento);

                    //Setear los nuevos valores de desplazamiento de la pelota:
                    if (desplazamiento_x > 0) { desplazamiento_x = 8}
                    else desplazamiento_x = -8}
                    if (desplazamiento_y > 0) { desplazamiento_y = 8
                    else desplazamiento_y = -8}

                    //Si esta seteada a true la variable de invertir las y, se aplica:
                    if (invertir_y) { desplazamiento_y *= -1}

                    //Mueve la pelota con los nuevos valores:
                    pelota_movimiento = setInterval("mover_pelota();", velocidad_pelota);
                    //Sale de la funcion:
                    return;
                 }

                //Variable para calcular la colision frontal o con la esquina de alguna de las paletas con la pelota:
                var pelota_contra_frontal = false;

                //Variable para saber de quien es la paleta con la que la pelota ha colisionado:
                var jugador_rematador = "";

                //Calcular si la pelota ha colisionado con el frontal de la paleta del usuario:
                if (pelota_y + pelota_height >= paleta_usuario_top && pelota_y <= paleta_usuario_top + paletas_height && pelota_x <= paleta_usuario_left + paletas_width && pelota_x + pelota_width >= paleta_usuario_left)
                 {
                    pelota_contra_frontal = true//Ha colisionado la pelota contra el frontal de la paleta del usuario.
                    jugador_rematador = "usuario";
                 }
                //Calcular si la pelota ha colisionado con el frontal de la paleta del ordenador:
                else if (pelota_y + pelota_height >= paleta_ordenador_top && pelota_y <= paleta_ordenador_top + paletas_height && pelota_x + pelota_width >= paleta_ordenador_left && pelota_x <= paleta_ordenador_left)
                 {
                    pelota_contra_frontal = true//Ha colisionado la pelota contra el frontal de la paleta del ordenador.
                    jugador_rematador = "ordenador";
                 }
                
                //Si la pelota ha colisionado con el frontal de alguna paleta:
                if (pelota_contra_frontal)
                 {
                    //Se vuelve a setear la variable como estaba, por si acaso:
                    pelota_contra_frontal = false;
                    //Cancela el movimiento de la pelota:
                    clearInterval(pelota_movimiento);
                    
                    //Setear los nuevos valores de desplazamiento vertical de la pelota, segun en que extremo haya colisionado:
                    if (jugador_rematador == "usuario")
                     {
                         //Se dan 10 puntos al usuario:
                         puntuacion += 10;
                         
                         //Se actualizan los marcadores:
                         actualizar_marcadores();
                         
                         if (pelota_y >= paleta_usuario_top && pelota_y <= paleta_usuario_top + 20)
                          {
                              if (desplazamiento_y > 0) { desplazamiento_y = 6}
                              else desplazamiento_y = -6}
                          }
                         else if (pelota_y > paleta_usuario_top + 20 && pelota_y <= paleta_usuario_top + 30)
                          {
                              if (desplazamiento_y > 0) { desplazamiento_y = 4}
                              else desplazamiento_y = -4}
                          }
                         else if (pelota_y > paleta_usuario_top + 30 && pelota_y <= paleta_usuario_top + 50)
                          {
                              if (desplazamiento_y > 0) { desplazamiento_y = 2}
                              else desplazamiento_y = -2}
                          }
                         else if (pelota_y > paleta_usuario_top + 50 && pelota_y <= paleta_usuario_top + 60)
                          {
                              if (desplazamiento_y > 0) { desplazamiento_y = 4}
                              else desplazamiento_y = -4}
                          }
                         else if (pelota_y > paleta_usuario_top + 60 && pelota_y <= paleta_usuario_top + 80)
                          {
                              if (desplazamiento_y > 0) { desplazamiento_y = 4}
                              else desplazamiento_y = -4}
                          }
                        else
                         {
                              if (desplazamiento_y > 0) { desplazamiento_y = 10}
                              else desplazamiento_y = -10}
                         }
                        
                        //Numero aleatorio para calcular en un lado de la paleta o en otro:
                        vertical_aleatorio = parseInt(Math.random() 40);

                     }
                    else if (jugador_rematador == "ordenador")
                     {
                         if (pelota_y >= paleta_ordenador_top && pelota_y <= paleta_ordenador_top + 20)
                          {
                              if (desplazamiento_y > 0) { desplazamiento_y = 6}
                              else desplazamiento_y = -6}
                          }
                         else if (pelota_y > paleta_ordenador_top + 20 && pelota_y <= paleta_ordenador_top + 30)
                          {
                              if (desplazamiento_y > 0) { desplazamiento_y = 4}
                              else desplazamiento_y = -4}
                          }
                         else if (pelota_y > paleta_ordenador_top + 30 && pelota_y <= paleta_ordenador_top + 50)
                          {
                              if (desplazamiento_y > 0) { desplazamiento_y = 2}
                              else desplazamiento_y = -2}
                          }
                         else if (pelota_y > paleta_ordenador_top + 50 && pelota_y <= paleta_ordenador_top + 60)
                          {
                              if (desplazamiento_y > 0) { desplazamiento_y = 4}
                              else desplazamiento_y = -4}
                          }
                         else if (pelota_y > paleta_ordenador_top + 60 && pelota_y <= paleta_ordenador_top + 80)
                          {
                              if (desplazamiento_y > 0) { desplazamiento_y = 6}
                              else desplazamiento_y = -6}
                          }
                        else
                         {
                              if (desplazamiento_y > 0) { desplazamiento_y = 10}
                              else desplazamiento_y = -10}
                         }
                     }

                    //Se incrementan dos pixels el movimiento horizontal de la pelota:
                    if (desplazamiento_x > && desplazamiento_x < 12) { desplazamiento_x += 2}
                    else if (desplazamiento_y < && desplazamiento_x > -12) { desplazamiento_x -= 2}
                    
                    //Se invierte el movimiento de la pelota:
                    desplazamiento_x *= -1//Se invierte el movimiento horizontal.
                    //desplazamiento_y *= -1; //Se invierte el movimiento vertical.
                    
                    //Mueve la pelota con los nuevos valores:
                    pelota_movimiento = setInterval("mover_pelota();", velocidad_pelota);
                    //Sale de la funcion:
                    return;
                 }
                
                //Variable para saber si se ha marcado algun gol:
                var se_ha_marcado = false;
                
                //Si ha marcado un gol el ordenador al usuario:
                if (pelota_x < 30 - pelota_width)
                 {
                    ultimo_ganador = "ordenador"//Se setea como ultimo ganador al ordenador.
                    clearInterval(pelota_movimiento)//Se detiene la pelota.
                    goles_ordenador++; //Se incrementan los goles marcados por el ordenador.
                    se_ha_de_sacar = true//Se setea la variable para saber que se ha de sacar de nuevo.
                    vidas--; //El usuario pierde una vida.

                    //Se anuncia que el ordenador ha marcado un gol:
                    if (vidas >= && pelota_moviendose)
                     {
                        document.getElementById("cartel_anuncios").innerHTML = "Computer<br>has<br>marked";
                        document.getElementById("cartel_anuncios").style.visibility = "visible";

                        //Se setea para saber que se ha marcado un gol:
                        se_ha_marcado = true;
                     }

                    pelota_moviendose = false//Se indica que la pelota ya no se esta moviendo.
                    posicionar_pelota(paleta_ordenador_top)//Se posiciona la pelota en la paleta del ordenador.
                    setTimeout("sacar_pelota();"2000)//El ordenador saca la pelota despues de 2 segundos (2000 milisegundos).
                 }
                //..y si ha marcado un gol el usuario al ordenador:
                else if (pelota_x > area_juego_x - 30)
                 {
                    ultimo_ganador = "usuario"//Se setea como ultimo ganador al usuario.
                    clearInterval(pelota_movimiento)//Se detiene la pelota.
                    goles_usuario++; //Se incrementan los goles marcados por el usuario.
                    puntuacion += 100//Se dan 100 puntos.
                    se_ha_de_sacar = true//Se setea la variable para saber que se ha de sacar de nuevo.

                    //Se anuncia que el usuario ha marcado un gol, siempre que no se haya de pasar nivel:
                    if (goles_usuario < && pelota_moviendose)
                     {
                        document.getElementById("cartel_anuncios").innerHTML = "You<br>has<br>marked";
                        document.getElementById("cartel_anuncios").style.visibility = "visible";

                        //Se setea para saber que se ha marcado un gol:
                        se_ha_marcado = true;
                     }

                    pelota_moviendose = false//Se indica que la pelota ya no se esta moviendo.
                    posicionar_pelota(paleta_usuario_top)//Se posiciona la pelota en la paleta del usuario.
                 }

                if (se_ha_marcado && vidas >= 0)
                 {
                    //Se muestra el marcador:
                    if (goles_usuario > goles_ordenador) { setTimeout("document.getElementById('cartel_anuncios').innerHTML = goles_usuario + ' - ' + goles_ordenador + '<br>You<br>win';"3000)}
                    else if (goles_usuario < goles_ordenador) { setTimeout("document.getElementById('cartel_anuncios').innerHTML = goles_usuario + ' - ' + goles_ordenador + '<br>Computer<br>wins';"3000)}
                    else if (goles_usuario == goles_ordenador) { setTimeout("document.getElementById('cartel_anuncios').innerHTML = goles_usuario + ' - ' + goles_ordenador + '<br>There is<br>tie';"3000)}
                    setTimeout("document.getElementById('cartel_anuncios').style.visibility = 'hidden';"6000);
                 }

                return true;

             }

            
            //Funcion que actualiza los marcadores:
            function actualizar_marcadores()
             {
                //Actualiza la barra de estado:
                if (vidas >= 0) { document.getElementById("estado").innerHTML = "&nbsp; Lives: "+vidas+" | Level: "+nivel+" | Score: "+puntuacion; }
                else document.getElementById("estado").innerHTML = "&nbsp; Game Over | Level: "+nivel+" | Score: "+puntuacion; }
                
                //Actualizar marcadores:
                document.getElementById("marcador_usuario").innerHTML = goles_usuario;
                document.getElementById("marcador_ordenador").innerHTML = goles_ordenador;
             }


            //Funcion que pasa de nivel:
            function pasar_nivel()
             {
               
                //Se setea el marcador de goles a cero en ambos equipos:
                goles_usuario = 0;
                goles_ordenador = 0;

                //Se incrementa un nivel:
                nivel++;
                
                //Se incrementan los reflejos del ordenador, siempre que no haya llegado a su tope (9):
                if (reflejos_ordenador < 9) { reflejos_ordenador++; }
                
                //Se dan 500 puntos al usuario:
                puntuacion += 500;
                
                //Se incrementa la velocidad, siempre que esta sea mayor a 10:
                if (velocidad_pelota > 1) { velocidad_pelota -= 1//Decrementamos para aumentar velocidad.
                 
                //Se actualizan los marcadores:
                actualizar_marcadores();

                //Se anuncia que se ha pasado de nivel:
                document.getElementById("cartel_anuncios").innerHTML = "Welcome<br>to<br>level "+nivel;
                document.getElementById("cartel_anuncios").style.visibility = "visible";
                setTimeout("document.getElementById('cartel_anuncios').style.visibility = 'hidden';"3000);
             }

            //-->
        </script>
    </head>
    <body onLoad="javascript:document.getElementById('div_control').style.visibility='visible'; document.getElementById('control_teclado').checked = true; iniciar_juego();" onKeyDown="javascript:tecla_pulsada(event, 'onkeypress');" onKeyPress="javascript:tecla_pulsada(event, 'onkeydown');" onMouseMove="javascript:mover_raton(event);" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#aaaadd">
        <!-- Recuadro (borde blanco): -->
        <div style="background:#ffffff; color:#ffffff; border:0px; padding:0px; width:708px; height:408px; left:16px; top:16px; position:absolute; font-size:1px; z-index:1;" id="recuadro_juego">
        </div>
        <!-- Fin de Recuadro (borde blanco). -->
        <!-- Area del juego: -->
        <div style="background:#000000; color:#000000; border:0px; padding:0px; width:700px; height:400px; left:20px; top:20px; position:absolute; font-size:1px; cursor:crosshair; z-index:2;" id="area_juego" onClick="javascript:hacer_click();">
            <!-- Paleta del usuario: -->
            <div style="background:#ff0000; color:#ff0000; border:0px; padding:0px; width:20px; height:80px; left:30px; top:0px; position:absolute; font-size:1px; z-index:7;" id="paleta_usuario">
            </div>
            <!-- Fin de Paleta del usuario. -->
            <!-- Porteria del usuario: -->
            <div style="background:#ffffff; color:#ffffff; border:0px; padding:0px; width:2px; height:400px; left:25px; top:0px; position:absolute; font-size:1px; z-index:5;" id="porteria_usuario">
            </div>
            <!-- Fin de Porteria del usuario. -->
            <!-- Medio campo: -->
            <div style="background:#ffffff; color:#ffffff; border:0px; padding:0px; width:2px; height:390px; left:349px; top:5px; position:absolute; font-size:1px; z-index:3;" id="medio_campo_linea">
            </div>
            <div style="background:#ffffff; color:#ffffff; border:0px; padding:0px; width:4px; height:4px; left:348px; top:198px; position:absolute; font-size:1px; z-index:4;" id="medio_campo_centro">
            </div>
            <!-- Fin de Medio campo. -->
            <!-- Cartel de anuncio: -->
            <div style="visibility:hidden; background:#aabb00; color:#111111; border:0px; padding:0px; width:100px; height:60px; left:300px; top:170px; position:absolute; font-size:14px; font-family:verdana; font-weight:bold; text-align:center; line-height:19px; filter:alpha(opacity=80); opacity:0.8; -moz-opacity:0.8; z-index:15;" id="cartel_anuncios">
            </div>
            <!-- Fin de Cartel de anuncio. -->
            <!-- Pelota: -->
            <div style="background:#ffff00; color:#ff0000; border:0px; padding:0px; width:10px; height:10px; left:50px; top:36px; position:absolute; font-size:1px; z-index:9;" id="pelota">
            </div>
            <!-- Fin de Pelota. -->
            <!-- Paleta del ordenador: -->
            <div style="background:#ff0000; color:#ff0000; border:0px; padding:0px; width:20px; height:80px; left:650px; top:0px; position:absolute; font-size:1px; z-index:8;" id="paleta_ordenador">
            </div>
            <!-- Fin de Paleta del ordenador. -->
            <!-- Porteria del ordenador: -->
            <div style="background:#ffffff; color:#ff0000; border:0px; padding:0px; width:2px; height:400px; left:673px; top:0px; position:absolute; font-size:1px; z-index:6;" id="porteria_ordenador">
            </div>
            <!-- Fin de Porteria del ordenador. -->
            <!-- Marcadores: -->
            <div style="background:transparent; color:#00ff00; border:0px; padding:0px; width:24px; height:20px; left:0px; top:2px; position:absolute; font-size:11px; font-family:verdana; font-weight:bold; text-align:center; z-index:10;" id="marcador_usuario">
                0
            </div>
            <div style="background:transparent; color:#00ff00; border:0px; padding:0px; width:24px; height:20px; left:676px; top:2px; position:absolute; font-size:11px; font-family:verdana; font-weight:bold; text-align:center; z-index:11;" id="marcador_ordenador">
                0
            </div>
            <!-- Fin de Marcadores. -->
        </div>
        <!-- Fin de Area del juego. -->
        <!-- Barra de estado: -->
        <div style="background:#000033; color:#ffff00; border:0px; padding:0px; width:708px; height:20px; left:16px; top:426px; position:absolute; font-size:14px; font-family:verdana; font-weight:bold; line-height:19px; z-index:12;" id="estado">
            &nbsp; Loading...
        </div>
        <!-- Fin de Barra de estado. -->
        <!-- Informacion del autor: -->
        <div style="visibility:visible; left:300px; top:428px; width:400px; height:15px; position:absolute; border:0px; padding:0px; background:transparent; color:#ffffff; text-align:right; line-height:15px; text-decoration:none; font-weight:bold; font-family:verdana; font-size:9px; z-index:13;" id="autor">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PunkPong&copy; by Joan Alba Maldonado
        </div>
        <!-- Fin de Informacion del autor. -->
        <div id="div_control" style="left:20px; top:450px; height:0px; position:absolute; visibility:hidden; border:0px; padding:0px; background:transparent; color:#222222; text-align:left; line-height:20px; text-decoration:none; font-family:verdana; font-size:14px; z-index:14;">
            Control:
            <form style="display:inline;" name="formulario_control">
                <label for="control_teclado" onClick="javascript:tipo_control='teclado'; document.getElementById('div_desenfocar').style.visibility='visible'; formulario_control.desenfocar.focus(); document.getElementById('div_desenfocar').style.visibility='hidden';"><input type="radio" id="control_teclado" name="control" value="teclado" onClick="javascript:t?_control='teclado'; document.getElementById('div_desenfocar').style.visibility='visible'; formulario_control.desenfocar.focus(); document.getElementById('div_desenfocar').style.visibility='hidden';" checked>Keyboard</label> <label for="control_raton" onClick="javascript:tipo_control='raton'; document.getElementById('div_desenfocar').style.visibility='visible'; formulario_control.desenfocar.focus(); document.getElementById('div_desenfocar').style.visibility='hidden';"><input type="radio" id="control_raton" name="control" value="raton" onClick="javascript:tipo_control='raton'; document.getElementById('div_desenfocar').style.visibility='visible'; formulario_control.desenfocar.focus(); document.getElementById('div_desenfocar').style.visibility='hidden';">Mouse</label>
                <div style="visibility:hidden; position:absolute;" id="div_desenfocar"><input type="text" name="desenfocar"></div>
            </form>
        </div>
        <!-- Informacion: -->
        <div style="left:20px; top:480px; height:0px; position:absolute; border:0px; padding:0px; background:transparent; color:#222222; text-align:left; line-height:20px; text-decoration:none; font-family:verdana; font-size:14px; z-index:14;">
            &copy; <b>PunkPong</b> 0.26a
            <br>
            &nbsp;&nbsp;by <i>Joan Alba Maldonado</i> (<a href="mailto:granvino@granvino.com;">granvino@granvino.com</a>&nbsp;<sup>(DHTML 100%)</sup>
            <br>&nbsp;&nbsp;- Prohibited to publish, reproduce or modify without maintain author's name.
            <br>
            &nbsp;&nbsp;<tt>* Use the keyboard arrows to move, and right arrow (also spacebar, control, shift or return)
            <br>
            &nbsp;&nbsp;  to fire (when is your turn).
            <br>
            &nbsp;&nbsp; Under Opera, leave the mouse cursor over game zone.
            <br>
            &nbsp;&nbsp; <b>Each goals you up a level and enemy are hardest.</b></tt>
            <br>
            &nbsp;&nbsp;<i>Dedicated to Yasmina Llaveria del Castillo</i>
        <!-- Fin de Informacion. -->
    </body>
</html>


           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Page Components
» Game