Foros del Web » Programando para Internet » Javascript »

Problema con un juego de puntos

 Estas en el tema de Problema con un juego de puntos en el foro de Javascript en Foros del Web. Hola estoy realizando un juego que se juega en papel pero ahora lo quiero pasar al pc aunque ya existe. Se trata de que los ...
  #1 (permalink)  
Antiguo 03/02/2014, 11:17
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 3 meses
Puntos: 29
Problema con un juego de puntos
Hola estoy realizando un juego que se juega en papel pero ahora lo quiero pasar al pc aunque ya existe. Se trata de que los 2 jugadores unen los puntos y hagan cuadrados el ultimo que termine el cuadrado se lo lleva y este debe de colorearse de otro color.

Tengo el codigo a medias me falta detectar cuando el jugador termine un cuadrado pero no se me ocurre como.

Código Javascript: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Juego de puntos</title>
  6.  
  7. <style type="text/css">
  8. body{
  9.     margin:0;
  10. }
  11. </style>
  12.  
  13. </head>
  14.  
  15. <body>
  16. </body>
  17. <script type="text/javascript">
  18. function game(x,y,player1,player2){
  19.     var points=[];
  20.     points.radius=10;
  21.     points.color="white";
  22.     points.mouseOverColor="green";
  23.     points.activeColor="red";
  24.     points.space=80;
  25.     for(var i=0,k=0;i<y;i++){
  26.         points[i]=[];
  27.         for(var j=0;j<x;j++){
  28.             k++;
  29.             points[i][j]={
  30.                 num:k,
  31.                 mouseover:false,
  32.                 canChange:true,
  33.                 selector:false,
  34.                 x:(points.space+points.radius)*j+points.radius+30,//+30 para padding canvas
  35.                 y:(points.space+points.radius)*i+points.radius+30,
  36.                 i:i,
  37.                 j:j,
  38.                 connected:[]
  39.             };
  40.         }
  41.     }
  42.     this.points=points;
  43.     this.lines=[];
  44.     this.players=[
  45.         {name:player1,points:0,wins:0},
  46.         {name:player2,points:0,wins:0},
  47.     ];
  48.     this.rounds=0;
  49.     self=this;
  50.     
  51.     this.mouse={x:0,y:0};
  52.     this.canvas=document.createElement('canvas');
  53.     this.canvas.width=x*(this.points.radius+this.points.space);
  54.     this.canvas.height=y*(this.points.radius+this.points.space);
  55.     this.c=this.canvas.getContext('2d');
  56.     this.turn=this.players[0];
  57.     
  58.     
  59.     window.addEventListener('mousemove',function(e){
  60.         e=e||window.event;
  61.         self.mouse={x:e.clientX||e.offsetX,y:e.clientY||e.offsetY};
  62.         for(var i=0;i<self.points.length;i++){
  63.             for(var j=0;j<self.points[0].length;j++){
  64.                 var point=self.points[i][j];
  65.                 var radius=self.points.radius;
  66.                 if(self.colision(point.x-radius,point.y-radius,radius*2,radius*2)){
  67.                     self.points[i][j].mouseover=true;
  68.                 }else{
  69.                     self.points[i][j].mouseover=false;
  70.                 }
  71.             }
  72.         }
  73.     },false);
  74.     
  75.     window.addEventListener('click',function(){
  76.         for(var i=0;i<self.points.length;i++){
  77.             for(var j=0;j<self.points[0].length;j++){
  78.                 var point=points[i][j];
  79.                 if(point.mouseover && point.canChange){
  80.                     if(point.selector==false){
  81.                         var active=self.activePoints();
  82.                         if(active.length==1){
  83.                             var near=self.near(active[0]);
  84.                             for(var k=0;k<near.length;k++){
  85.                                 if(near[k].num==point.num){
  86.                                     for(var x=0;x<point.connected.length;x++){
  87.                                         if(point.connected[x]==active[0].num)return false;
  88.                                     }
  89.                                     //Made new line
  90.                                     var line={
  91.                                         x:active[0].x-near[k].x!=0?near[k].x:near[k].x-self.points.radius,
  92.                                         y:active[0].x-near[k].x!=0?near[k].y-self.points.radius:near[k].y,
  93.                                         width:active[0].x-near[k].x||self.points.radius*2,
  94.                                         height:active[0].y-near[k].y||self.points.radius*2,
  95.                                         color:self.turn.name==self.players[0].name?"red":"blue"
  96.                                     };
  97.                                     self.lines.push(line);
  98.                                     point.connected.push(active[0].num);
  99.                                     active[0].connected.push(point.num);
  100.                                     active[0].selector=false;
  101.                                     point.selector=false;
  102.                                     
  103.                                     self.changeTurn();
  104.                                     break;
  105.                                 }
  106.                             }
  107.                         }else if(self.activePoints().length==0){
  108.                             point.selector=self.turn;
  109.                         }
  110.                     }else{
  111.                         point.selector=false;
  112.                     }
  113.                 }
  114.             }
  115.         }
  116.     },false);
  117.     
  118.  
  119. }
  120. game.prototype.activePoints=function(){
  121.     var n=[];
  122.     for(var i=0;i<this.points.length;i++){
  123.         for(var j=0;j<this.points[i].length;j++){
  124.             if(this.points[i][j].selector!=false)n.push(this.points[i][j]);
  125.         }
  126.     }
  127.     return n;
  128. }
  129. game.prototype.near=function(obj){
  130.     var near=[];
  131.     if(typeof this.points[obj.i+1]!='undefined' && this.points[obj.i+1][obj.j]){
  132.         near.push(this.points[obj.i+1][obj.j]);
  133.     }
  134.     if(typeof this.points[obj.i-1]!='undefined' && this.points[obj.i-1][obj.j]){
  135.         near.push(this.points[obj.i-1][obj.j]);
  136.     }
  137.     if(typeof this.points[obj.i][obj.j+1]!='undefined'){
  138.         near.push(this.points[obj.i][obj.j+1]);
  139.     }
  140.     if(typeof this.points[obj.i][obj.j-1]!='undefined'){
  141.         near.push(this.points[obj.i][obj.j-1]);
  142.     }
  143.     return near;
  144. }
  145. game.prototype.colision=function(x,y,width,height,mousex,mousey){
  146.     var mousex=mousex||this.mouse.x;
  147.     var mousey=mousey||this.mouse.y;
  148.     if((mousex>=x && mousex<=x+width) && (mousey>=y && mousey<=y+height))return true;
  149.     return false;
  150. }
  151. game.prototype.changeTurn=function(){
  152.     self.turn=self.turn.name==self.players[0].name?self.players[1]:self.players[0];
  153. }
  154. game.prototype.lineBetween=function(obj,obj2){
  155.     for(var i=0;i<obj.connected.length;i++){
  156.         if(obj.connected[i]==obj2.num)return true;
  157.     }
  158.     return false;
  159. }
  160. game.prototype.draw=function(){
  161.     var c=this.c;
  162.     c.fillStyle="#ccc";
  163.     c.fillRect(0,0,this.canvas.width,this.canvas.height);
  164.     c.fill();
  165.     var mouseHave=false;
  166.     //Lines
  167.     for(x in this.lines){
  168.         var line=this.lines[x];
  169.         c.beginPath();
  170.             c.fillStyle=line.color;
  171.             c.fillRect(line.x,line.y,line.width,line.height);
  172.             c.fill();
  173.         c.closePath();
  174.     }
  175.     //Points
  176.     for(var i=0;i<this.points.length;i++){
  177.         for(var j=0;j<this.points[0].length;j++){
  178.             var point=this.points[i][j];
  179.             c.beginPath();
  180.             if(point.mouseover && !point.selector){                 
  181.                 this.canvas.style.cursor="pointer";
  182.                 mouseHave=true;
  183.             }else if(!mouseHave){
  184.                 this.canvas.style.cursor="default";
  185.             }
  186.             c.fillStyle=point.mouseover?this.points.mouseOverColor:(point.selector?this.points.activeColor:this.points.color);
  187.             c.arc(point.x,point.y,this.points.radius,0,2*Math.PI);
  188.             c.fill();
  189.             c.closePath();
  190.         }
  191.     }
  192. }
  193.  
  194. game.prototype.start=function(){
  195.     this.players[0].points=0;
  196.     this.players[1].points=0;
  197.     this.interval=setInterval(function(){self.draw()},33);
  198.     document.body.appendChild(this.canvas);
  199. }
  200.  
  201. window.onload=function(){
  202.     var juego=new game(10,8,'test','test2');
  203.     juego.start();
  204. }
  205. </script>
  206. </html>

Tenéis algunas ideas de como detectar cuando el jugador termina un cuadrado y colorearlo ?

Saludos

Etiquetas: html, juego, puntos
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 15:17.