Tema: [Aporte] Juego de ping pong
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/01/2010, 14:24
Avatar de pato12
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