Foros del Web » Programando para Internet » Javascript »

[Aporte] Juego de ping pong

 Estas en el tema de [Aporte] Juego de ping pong en el foro de Javascript en Foros del Web. Hola, Este es un juego de ping pong que hice hace mucho xD.. es 100% javascript + css + html :p... el juego es programado ...
  #1 (permalink)  
Antiguo 18/01/2010, 14:24
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 16 años, 7 meses
Puntos: 101
[Aporte] Juego de ping pong
Hola,
Este es un juego de ping pong que hice hace mucho xD.. es 100% javascript + css + html :p... el juego es programado por mi, y anda perfecto en firefox, google chrome e internet explorer.

DEMO: http://www.halfmusic.com/pingpong.html

Codigo:
Código Javascript: 
Ver original
  1. var HalfJueguego={
  2.     pinpong:function(){
  3.             this.config={
  4.                 gameCampo:{alto:300,ancho:400},
  5.                 ids_game:{barra_player:'player',enemigo:'enemigo',bola:'bola',campo:'game'},
  6.                 events:{onPoint:function(){},onMoveBola:function(){},onChocaBola:function(){}},
  7.                 dificultad:'invencible'
  8.             };
  9.             this.dificultades={facil:[1,.7],normal:[1,.9],dificil:[1.5,1.2],muydificil:[1.5,2],invencible:[3,3]};
  10.             this.runGame=true;
  11.             this.gameInterval=false;
  12.             this.angulo=1;
  13.             this.subir=false;
  14.             this.bajar=false;
  15.             this.aplayer=true;
  16.             this.keykdown={kup:false,kdown:false};
  17.             this.addEvent=function(type,fn) {
  18.                 if (this.addEventListener){
  19.                     this.addEventListener( type, fn, false );
  20.                 }else if(this.attachEvent){
  21.                     var elwin=this;
  22.                     var f=function(){fn.call(elwin,window.event);};
  23.                     this.attachEvent('on'+type,f);
  24.                     this[fn.toString()+type]=f;
  25.                 }else{
  26.                     this['on'+type]=fn;
  27.                 }
  28.                 return this;
  29.             };
  30.             this.set={
  31.                 elwin:this,
  32.                 dificultad:function(dif){
  33.                     var d=this.elwin.dificultades[dif];
  34.                     this.elwin.config.dificultad=!d?'facil':dif;
  35.                 },
  36.                 pause:function(p){
  37.                     this.elwin.runGame=p;
  38.                 }
  39.             };
  40.             
  41.             this.getPosision=function(el){
  42.                 var valueT=0,valueL=0,elm=el;
  43.                 do{
  44.                     valueL+=parseInt(elm.offsetLeft);
  45.                     valueT+=parseInt(elm.offsetTop);
  46.                     elm=elm.offsetParent;
  47.                 }while(elm);
  48.                 return [valueL,valueT];
  49.             };
  50.             this.chocaCon=function(elemento,achocar){
  51.                 var pos_el=this.getPosision(elemento),pos_ac=this.getPosision(achocar);
  52.                 for(var i=pos_ac[1],total_i=pos_ac[1]+achocar.offsetHeight;i<total_i;i++){
  53.                     if(i==pos_el[1]){
  54.                         for(var j=pos_ac[0],total_j=parseInt(pos_ac[0])+parseInt(achocar.offsetWidth);j<total_j;j++){
  55.                             if(j==pos_el[0])
  56.                                 return [i,j,pos_ac];
  57.                         }
  58.                     }
  59.                 }
  60.                 return false;
  61.             };
  62.             this.mover_bola=function(lado,pos){
  63.                 var bola_dom=document.getElementById(this.config.ids_game.bola),enemigo=document.getElementById(this.config.ids_game.enemigo),barra_player=document.getElementById(this.config.ids_game.barra_player);
  64.                 if(!lado){
  65.                     bola_dom.style.top=this.sube?(parseInt(bola_dom.style.top)-1)+"px":(this.bajar?parseInt(bola_dom.style.top)+1+"px":bola_dom.style.top);
  66.                     bola_dom.style.left=this.aplayer?parseInt(bola_dom.style.left)+this.angulo+"px":parseInt(bola_dom.style.left)-this.angulo+"px";
  67.                     this.config.events.onMoveBola([this.sube,this.bajar,this.angulo]);
  68.                     return;
  69.                 }else if(lado=='pared-top'){
  70.                     this.sube=false;
  71.                     this.bajar=true;
  72.                 }else if(lado=='pared-bottom'){
  73.                     this.sube=true;
  74.                     this.bajar=false;
  75.                  }else if(lado=='enemigo'){
  76.                     this.aplayer=true;
  77.                     if(this.angulo!=1){
  78.                         if(pos[0]-pos[2][1]>barra_player.offsetHeight/2){
  79.                             this.sube=false;
  80.                             this.bajar=true;
  81.                         }else{
  82.                             this.sube=true;
  83.                             this.bajar=false;
  84.                         }
  85.                     }
  86.                  }else if(lado=='player'){
  87.                     this.aplayer=false;
  88.                     if(this.keykdown.kup||this.keykdown.kdown){
  89.                         this.angulo=this.rand(2,7);
  90.                         this[this.keykdown.kup?'sube':'bajar']=false;
  91.                         this[this.keykdown.kup?'bajar':'sube']=true;
  92.                         return;
  93.                     }
  94.                     if(this.angulo!=1){
  95.                         if(pos[0]-pos[2][1]>barra_player.offsetHeight/2){
  96.                             this.sube=false;
  97.                             this.bajar=true;
  98.                         }else{
  99.                             this.sube=true;
  100.                             this.bajar=false;
  101.                         }
  102.                     }
  103.                  }
  104.                  this.config.events.onChocaBola(lado);
  105.             };
  106.             this.rand=function(lo,hi){
  107.                 return Math.floor((Math.random()*(hi-lo))+lo);
  108.             };
  109.             this.newGame=function(){
  110.                 var bola_dom=document.getElementById(this.config.ids_game.bola),barra_player=document.getElementById(this.config.ids_game.barra_player),enemigo=document.getElementById(this.config.ids_game.enemigo);
  111.                 
  112.                 bola_dom.style.top=(this.config.gameCampo.alto/2)+"px";
  113.                 bola_dom.style.left=(this.config.gameCampo.ancho/2)+"px";
  114.                 
  115.                 barra_player.style.top=(this.config.gameCampo.alto/2-barra_player.offsetHeight/2)+"px";
  116.                 barra_player.style.left=(this.config.gameCampo.ancho-barra_player.offsetWidth*2)+"px";
  117.                 
  118.                 enemigo.style.top=(this.config.gameCampo.alto/2-enemigo.offsetHeight/2)+"px";
  119.                 enemigo.style.left=enemigo.offsetWidth*2+"px";
  120.                 
  121.                 this.angulo=1;
  122.                 this.sube=false;
  123.                 this.bajar=false;
  124.                 this.aplayer=true;
  125.             };
  126.             this.retry=function(){
  127.                 this.newGame();
  128.             };
  129.             this.enemigo_mover=function(){
  130.                 if(this.aplayer)
  131.                     return;
  132.                 var bola_dom=document.getElementById(this.config.ids_game.bola),bola_pos=this.getPosision(bola_dom),enemigo=document.getElementById(this.config.ids_game.enemigo),enemigo_pos=this.getPosision(enemigo),d=this.dificultades[this.config.dificultad];
  133.                 if(bola_pos[1]>(enemigo_pos[1]+enemigo.offsetHeight/2)){
  134.                     if(parseInt(enemigo.style.top)<this.config.gameCampo.alto-enemigo.offsetHeight)
  135.                         enemigo.style.top=parseInt(enemigo.style.top)+d[0]+"px";
  136.                 }else{
  137.                     if(parseInt(enemigo.style.top)>0)
  138.                         enemigo.style.top=parseInt(enemigo.style.top)-d[1]+"px";
  139.                 }
  140.             };
  141.             this.init=function(){
  142.                 var elwin=this;
  143.                 if(this.gameInterval)
  144.                     clearInterval(this.gameInterval);
  145.                 this.newGame();
  146.                 this.addEvent.call(document,'keyup',function(){
  147.                     elwin.keykdown={kkup:false,kkdown:false};
  148.                 });
  149.                 this.addEvent.call(document,'keydown',function(e){
  150.                     var e=!e?event:e,keyCode=e.keyCode||e.which,barra_player=document.getElementById(elwin.config.ids_game.barra_player);
  151.                     if(keyCode==40){
  152.                         elwin.keykdown={kup:true,kdown:false};
  153.                     }else if(keyCode==38){
  154.                         elwin.keykdown={kup:false,kdown:true};
  155.                     }
  156.                 });
  157.                 this.gameInterval=setInterval(function(){
  158.                     if(!elwin.runGame)
  159.                         return;
  160.                     var bola_dom=document.getElementById(elwin.config.ids_game.bola),bola_pos=elwin.getPosision(bola_dom),game_dom=document.getElementById(elwin.config.ids_game.campo),game_pos=elwin.getPosision(game_dom),barra_player=document.getElementById(elwin.config.ids_game.barra_player),enemigo=document.getElementById(elwin.config.ids_game.enemigo);
  161.                     
  162.                     elwin.mover_bola();
  163.                     elwin.enemigo_mover();
  164.                     
  165.                     if(elwin.keykdown.kup || elwin.keykdown.kdown){
  166.                         if(elwin.keykdown.kup){
  167.                             if(parseInt(barra_player.style.top)<elwin.config.gameCampo.alto-barra_player.offsetHeight)
  168.                                 barra_player.style.top=parseInt(barra_player.style.top)+1+"px";
  169.                         }else if(elwin.keykdown.kdown){
  170.                             if(parseInt(barra_player.style.top)>0)
  171.                                 barra_player.style.top=parseInt(barra_player.style.top)-1+"px";
  172.                         }
  173.                     }
  174.                     
  175.                     
  176.                     if(elwin.config.gameCampo.ancho-barra_player.offsetWidth*6+game_pos[0]<bola_pos[0]){
  177.                         var choca_barra_player=elwin.chocaCon(bola_dom,barra_player);
  178.                         if(choca_barra_player[0])
  179.                             return elwin.mover_bola('player',choca_barra_player);
  180.                     }else if(enemigo.offsetWidth*6+game_pos[0]>bola_pos[0]){
  181.                         var choca_barra_enemigo=elwin.chocaCon(bola_dom,enemigo);
  182.                         if(choca_barra_enemigo[0])
  183.                             return elwin.mover_bola('enemigo',choca_barra_enemigo);
  184.                     }
  185.  
  186.             
  187.                     
  188.                     if(bola_pos[1]<=game_pos[1])
  189.                         elwin.mover_bola('pared-top',bola_pos,0);
  190.                     else if(bola_pos[1]>=elwin.config.gameCampo.alto+game_pos[1])
  191.                         elwin.mover_bola('pared-bottom',bola_pos,0);
  192.                     else if(bola_pos[0]-game_pos[0]<=0){
  193.                         elwin.config.events.onPoint('humano');
  194.                         return elwin.retry();
  195.                     }else if(bola_pos[0]>=elwin.config.gameCampo.ancho+game_pos[0]){
  196.                         elwin.config.events.onPoint('computadora');
  197.                         return elwin.retry();
  198.                     }
  199.                 },10);
  200.             };
  201.     }
  202. };
y es adaptable :p
Un ejemplo de uso:
Código HTML: 
Ver original
  1. <style type="text/css">
  2. <!--
  3. #game {
  4.     background-color: #000;
  5.     height: 300px;
  6.     width: 400px;
  7.     position: relative;
  8.     overflow: hidden;
  9. }
  10. #game #player {
  11.     background-color: #CCC;
  12.     position: absolute;
  13.     height: 100px;
  14.     width: 10px;
  15.     left: -17px;
  16.     top: -57px;
  17. }
  18. #game #enemigo {
  19.     background-color: #CCC;
  20.     position: absolute;
  21.     height: 100px;
  22.     width: 10px;
  23.     left: -11px;
  24.     top: -36px;
  25. }
  26. #game #bola {
  27.     background-color: #FFF;
  28.     height: 5px;
  29.     width: 5px;
  30.     position: absolute;
  31.     line-height: 1px;
  32.     font-size: 1px;
  33.     left: -9px;
  34.     top: -26px;
  35. }
  36. -->
  37. </style>
  38. <div id="game">
  39.     <div id="player"></div>
  40.   <div id="enemigo"></div>
  41.     <div id="bola"></div>
  42. </div>
  43. <script>
  44. // CODIGO DEL JUEGO.....
  45. // ...
  46. var demo=new HalfJueguego.pinpong()
  47. window.onload=function(){demo.init();};
  48. </script>
Esta bajo licencia GNU General Public License
Tengo varios juegos mas, que ya voy a ir publicando xD..
Gracias
Salu2
__________________
Half Music - www.halfmusic.com
  #2 (permalink)  
Antiguo 18/01/2010, 19:28
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 14 años, 4 meses
Puntos: 16
Respuesta: [Aporte] Juego de ping pong
Gracias por compartir tus conocimientos! Me fascina ver juegos creados con JavaScript. Hace un tiempo vi que crearon Super Mario Bros. Simplemente impresionante. Lo que se puede llegar a hacer con un poco de imaginación y mucho talento.
  #3 (permalink)  
Antiguo 19/01/2010, 01:34
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 550
Antigüedad: 15 años, 7 meses
Puntos: 9
Respuesta: [Aporte] Juego de ping pong
que bueno que esta , buen aporte pato =)
__________________
Appones.net - www.appones.net

Etiquetas: ping, aportes, juegos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:34.