Creare gioco "unisci i puntini"

**sara94** · 17-09-2016, 17:15

Salve a tutti
Devo creare un giochino come quelli per bambini in cui si uniscono i puntini con delle linee ma non so come farlo.

All'inizio avevo usato la libreria fabric.js per i punti ma non so come fare per creare delle linee che li uniscano.
Conoscete un modo di creare il gioco con questa libreria ?
O anche solo con jquery?

Grazie in anticipo.

P.S Non sono molto esperta perciò spero esista un modo non troppo complicato

**cavicchiandrea** · 18-09-2016, 00:49

Se dovesse anche esistere qualcosa sarà sicuramente complicato, insisti a cercare in rete. La domanda nasce spontanea perchè ti sei presa l'impegno non avendo la minima conoscenza in merito?

**badaze** · 18-09-2016, 11:26

Questa domanda mi ha incuriosito. Non conoscevo questa parte dell'HTML.
Non è del tutto perfetto (ci ho passato poco tempo) ma è un buon esercizio.
Provato con IE 11.

codice HTML:

<!DOCTYPE html> 
<html>
<head>
<title>Untitled</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script language="JavaScript" type="text/javascript">
<!--
var addMode  = 1;
var points   = 0;
var mouseX   = 0;
var mouseY   = 0;
var arrPX    = new Array();
var arrPY    = new Array();
var cirDiam  = 3;
var selPoint = -1;
function setAddPointStatus(value) {
 addMode = value;
 selPoint = -1;
 redrawPoints(); 
} // function setAddPointStatus(value)
function addPoint() {
 if (addMode == 1) {
   var a = checkPoint();
   if (a == -1) {   
    drawPoint(mouseX,mouseY);
   arrPX[points] = mouseX;
   arrPY[points] = mouseY;
   points++;
  }
  showPointsList();
 }
 
 if (addMode == 2) {
   var a = checkPoint();
   if (a != -1) {
   removePoint(a);
   showPointsList();
  }
 } 
 
 if (addMode == 3) { 
   var a = checkPoint();
  if (a != selPoint) {
    if (a != -1) {
   if (selPoint == -1) {
     selPoint = a;
     drawSelectedPoint(parseInt(arrPX[selPoint]),parseInt(arrPY[selPoint]));
   } else {
     drawLine(selPoint,a);
    drawPoint(parseInt(arrPX[selPoint]),parseInt(arrPY[selPoint]));
    selPoint = -1;
   }
   showPointsList();
   } 
  } else {
   drawPoint(parseInt(arrPX[selPoint]),parseInt(arrPY[selPoint])); 
   showPointsList();   
   selPoint = -1;  
  }
 } 
 
} // function addPoint() 
function showPointsList() {
 var list = "";
 var str  = "";
 for (i=0;i<points;i++) {
   str = '[' + i + '] = ' + arrPX[i] + ' - ' + arrPY[i];
   if (i == checkPoint()) {
     str = '<span style="background-color:red;color:white">'+str+'</span>';
  }
  list = list + str + '<br/>';
 }
 document.getElementById('pList').innerHTML = list;
 document.getElementById('pNum').innerHTML  = points;
} // function showPointsList()
function checkPoint() {
 var i=0;
 for (i=0;i<points;i++) {
  if (Math.abs(arrPX[i] - mouseX) <= cirDiam && Math.abs(arrPY[i] - mouseY) <= cirDiam ) {
    return i;
  }
 }
 return -1;
} // function checkPoint()
function removePoint(pointToRemove) {
 pointToRemove = parseInt(pointToRemove);
 var c         = document.getElementById( "mon_canvas" );
 var ctx       = c.getContext("2d");
 ctx.lineWidth = 1;
 x             = parseInt(arrPX[pointToRemove]);
 y             = parseInt(arrPY[pointToRemove]);
 ctx.beginPath(x,y);
 ctx.arc(x,y,cirDiam+1,0,Math.PI*2,true);
 ctx.strokeStyle = "white";
 ctx.fillStyle   = "white";
 ctx.fill();
 ctx.stroke();
 
 for (i=pointToRemove;i<points;i++) {
   arrPX[i] = arrPX[i+1];
  arrPY[i] = arrPY[i+1];
 }
 arrPX[points] = -1;
 arrPY[points] = -1;
 points--;
} // function removePoint()
function clearCanvas() {
 var c   = document.getElementById( "mon_canvas" );
 var ctx = c.getContext("2d");
 ctx.clearRect(0, 0, c.height, c.width);
 
 var i = 0;
 for (i=0;i<points;i++) {
   arrPX[i] = 0;
  arrPY[i] = 0; 
 } 
 points = 0;
 showPointsList();
} // function clearCanvas()
function drawPoint(x,y) {
 drawCircle(x,y,"coral","bisque");
} // function drawPoint(x,y)
function drawSelectedPoint(x,y) {
 drawCircle(x,y,"blue","blue");
} // function drawSelectedPoint(x,y)
function resetCanvas() {
 var c   = document.getElementById( "mon_canvas" );
 var ctx = c.getContext("2d");
 ctx.clearRect(0, 0, c.height, c.width);
 redrawPoints();
} // function resetCanvas()
function redrawPoints() {
 var i = 0;
 for (i=0;i<points;i++) {
   drawPoint(arrPX[i],arrPY[i]);
 }
} // function redrawPoints()
function drawLine(fromPoint,toPoint) {
 var c   = document.getElementById( "mon_canvas" );
 var ctx = c.getContext("2d");
 ctx.beginPath();   
 ctx.moveTo(arrPX[fromPoint],arrPY[fromPoint]);   
 ctx.lineTo(arrPX[toPoint],arrPY[toPoint]);  
 ctx.stroke();
}
function drawCircle(x,y,strokeStyle, fillStyle) {
 var c = document.getElementById( "mon_canvas" );
 var ctx = c.getContext("2d");
 ctx.lineWidth = 1;
 ctx.beginPath(x,y);
 ctx.arc(x,y,cirDiam,0,Math.PI*2,true);
 ctx.strokeStyle = strokeStyle;
 ctx.fillStyle   = fillStyle;
 ctx.fill();
 ctx.stroke();
}
//-->
</script>
</head>
<body>
<table summary="">
<tr>
 <td>
  <div style="border:1px dotted black;width:351;height:351" >
   <canvas id="mon_canvas" width="350" height="350" onclick="addPoint()"> 
    Spiacente. Il tuo browser non gestisce i canvas
   </canvas>
  </div>
 </td>
 <td id="pList" align="top">
 
 </td>
</tr>
</table>
<hr/>
<input type="button" value="Clear" id="clear" onclick="clearCanvas()"/>
<input type="button" value="Reset" id="reset" onclick="resetCanvas()"/>
Action :
<select onchange="setAddPointStatus(this.value)">
 <option value="1">Add Point</option>
 <option value="2">Remove Point</option>
 <option value="3">Draw</option> 
</select>
<hr/>
<table summary="">
<tr>
<td>Mouse X =</td><td id="mposX"></td>
<td>&nbsp;-&nbsp;</td>
<td>Mouse Y =</td><td id="mposY"></td>
<td>&nbsp;-&nbsp;</td>
<td>Points # =</td><td id="pNum"></td>
<td>&nbsp;-&nbsp;</td>
<td>Mouse over point =</td><td id="mouP"></td>
</tr>
</table>
<hr/>
<p>Add Point : clicca sull'area per aggiungere un punto</p>
<p>Remove Point : clicca sul punto per cancellarlo</p>
<p>Draw : clicca su un punto (cambia colore), poi clicca su un altro punto</p>
<hr/>
<p>Clear : cancella tutto</p>
<p>Reset : ridisegna tutti i punti</p>
<script language="JavaScript" type="text/javascript">
<!--
$("body").mousemove(function(e) {
    var c    = document.getElementById( "mon_canvas" );
  var rect = c.getBoundingClientRect (); 
  mouseX   = parseInt(e.pageX - rect.left); 
  mouseY   = parseInt(e.pageY - rect.top);
    document.getElementById('mposX').innerHTML = mouseX;
  document.getElementById('mposY').innerHTML = mouseY;
  if (checkPoint() != -1) {
    document.getElementById('mouP').innerHTML = "yes";
  } else {
    document.getElementById('mouP').innerHTML = "no";
  }
  showPointsList();
})
//-->
</script>
</body>
</html>

**badaze** · 18-09-2016, 20:23

Tema molto interessante.

Parte 1/2.

Codice PHP:


<!DOCTYPE html> 
<html>
<head>
<title>United Points by badaze</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script language="JavaScript" type="text/javascript">
<!--
var addMode  = 1;
var points   = 0;
var mouseX   = 0;
var mouseY   = 0;
var arrPX    = new Array();
var arrPY    = new Array();
var arrLines = new Array();
var cirDiam  = 3;
var selPoint = -1;
function setAddPointStatus(value) {
 addMode = value;
 selPoint = -1;
 redrawPoints(); 
} // function setAddPointStatus(value)
function doAction() {
 if (addMode == 1) {
   var a = checkPoint();
   if (a == -1) {   
  addPoint(mouseX,mouseY);
  }
  showPointsList();
 }
 if (addMode == 2) {
   var a = checkPoint();
   if (a != -1) {
   removePoint(a);
   invalidateCanvas();
   showPointsList();
  }
 } 
 if (addMode == 3) { 
   var a = checkPoint();
  if (a != selPoint) {
    if (a != -1) {
   if (selPoint == -1) {
     selPoint = a;
     drawSelectedPoint(parseInt(arrPX[selPoint]),parseInt(arrPY[selPoint]));
   } else {
     drawLine(selPoint,a);
    redrawPoints();
    selPoint = -1;
   }
   showPointsList();
   } 
  } else {
   redrawPoints();    
   showPointsList();   
   selPoint = -1;  
  }
 } 
 
 if (addMode == 4) { 
   var a = checkPoint();
  if (a != selPoint) {
    if (a != -1) {
   if (selPoint == -1) {
     selPoint = a;
     drawSelectedPoint(parseInt(arrPX[selPoint]),parseInt(arrPY[selPoint]));
   } else {
       removeLineBetweenPoints(selPoint,a);
     invalidateCanvas();
    selPoint = -1;
   }
   showPointsList();
   } 
  } else {
   redrawPoints();    
   showPointsList();   
   selPoint = -1;  
  }
 }  
} // function doAction() 
function addPoint(x,y) {
    drawPoint(x,y);
   arrPX[points] = x;
   arrPY[points] = y;
   points++;
} // function addPoint(x,y)
function showPointsList() {
 var list = "";
 var str  = "";
 for (i=0;i<points;i++) {
   str = '[' + i + '] = ' + arrPX[i] + ' - ' + arrPY[i];
   if (i == checkPoint()) {
     str = '<span style="background-color:red;color:white">'+str+'</span>';
  }
  list = list + str + '<br/>';
 }
 document.getElementById('pList').innerHTML = list;
 document.getElementById('pNum').innerHTML  = points;
} // function showPointsList()
function checkPoint() {
 var i=0;
 for (i=0;i<points;i++) {
  if (Math.abs(arrPX[i] - mouseX) <= cirDiam && Math.abs(arrPY[i] - mouseY) <= cirDiam ) {
    return i;
  }
 }
 return -1;
} // function checkPoint()
function removePoint(pointToRemove) {
 pointToRemove = parseInt(pointToRemove);
 var c         = document.getElementById( "mon_canvas" );
 var ctx       = c.getContext("2d");
 ctx.lineWidth = 1;
 x             = parseInt(arrPX[pointToRemove]);
 y             = parseInt(arrPY[pointToRemove]);
 ctx.beginPath(x,y);
 ctx.arc(x,y,cirDiam+1,0,Math.PI*2,true);
 ctx.strokeStyle = "white";
 ctx.fillStyle   = "white";
 ctx.fill();
 ctx.stroke();
 
 // remove lines
 removeLine(pointToRemove);
 
 // remove points
 for (i=pointToRemove;i<points;i++) {
   arrPX[i] = arrPX[i+1];
  arrPY[i] = arrPY[i+1];
 }
 arrPX[points] = -1;
 arrPY[points] = -1;
 points--;
} // function removePoint()
function clearCanvas() {
 var c   = document.getElementById( "mon_canvas" );
 var ctx = c.getContext("2d");
 ctx.clearRect(0, 0, c.height, c.width);
 
 arrPX    = [];
 arrPY    = [];
 arrLines = [];
 
 selPoint = -1;
 points   = 0;
 showPointsList();
} // function clearCanvas()
function drawPoint(x,y) {
 drawCircle(x,y,"coral","bisque");
} // function drawPoint(x,y)
function drawSelectedPoint(x,y) {
 drawCircle(x,y,"blue","blue");
} // function drawSelectedPoint(x,y)
function resetCanvas() {
 var c   = document.getElementById( "mon_canvas" );
 var ctx = c.getContext("2d");
 ctx.clearRect(0, 0, c.height, c.width);
 redrawPoints();
 arrLines = [];
 
 selPoint = -1;
} // function resetCanvas()
function invalidateCanvas() {
 var c   = document.getElementById( "mon_canvas" );
 var ctx = c.getContext("2d");
 ctx.clearRect(0, 0, c.height, c.width);
 redrawLines();
 redrawPoints();
} // function invalidateCanvas()
function removeLine(pointToRemove) {
 var i   = 0;
 var x   = arrPX[pointToRemove];
 var y   = arrPY[pointToRemove];
 var len = arrLines.length;
 for (i=len-1;i>=0;i--) {
   if ((x == arrLines[i].x1 && y == arrLines[i].y1) || (x == arrLines[i].x2 && y == arrLines[i].y2)) {
   arrLines.splice(i,1);
  }
 } 
} // function removeLine(pointToRemove)
function removeLineBetweenPoints(fromPoint,toPoint) {
 var i   = 0;
 var x1  = arrPX[fromPoint];
 var y1  = arrPY[fromPoint];
 var x2  = arrPX[toPoint];
 var y2  = arrPY[toPoint]; 
 var len = arrLines.length;
 for (i=len-1;i>=0;i--) {
   if (((x1 == arrLines[i].x1 && y1 == arrLines[i].y1) && (x2 == arrLines[i].x2 && y2 == arrLines[i].y2)) || 
      ((x2 == arrLines[i].x1 && y2 == arrLines[i].y1) && (x1 == arrLines[i].x2 && y1 == arrLines[i].y2))) {
   arrLines.splice(i,1);
  }
 } 
} // function removeLine(pointToRemove)
function redrawPoints() {
 var i = 0;
 for (i=0;i<points;i++) {
   drawPoint(arrPX[i],arrPY[i]);
 }
} // function redrawPoints()
function redrawLines() {
 var i=0;
 for (i=0;i<arrLines.length;i++) {
   drawLineRaw(arrLines[i].x1,arrLines[i].y1,arrLines[i].x2,arrLines[i].y2,"blue");
 } 
} // function redrawLines()
function drawLine(fromPoint,toPoint) {
 drawLineRaw(arrPX[fromPoint],arrPY[fromPoint],arrPX[toPoint],arrPY[toPoint],"blue")
 arrLines.push({x1:arrPX[fromPoint],y1:arrPY[fromPoint],x2:arrPX[toPoint],y2:arrPY[toPoint]});
} // function drawLine(fromPoint,toPoint)
function drawLineRaw(fromPointX1,fromPointY1, toPointX2, toPointY2,color) {
 var c   = document.getElementById( "mon_canvas" );
 var ctx = c.getContext("2d");
 ctx.beginPath();   
 ctx.moveTo(fromPointX1,fromPointY1);   
 ctx.lineTo(toPointX2,toPointY2);  
 ctx.fillStyle   = color;
 ctx.strokeStyle = color;
 ctx.stroke();
} // function drawLineRaw(fromPointX1,fromPointY1, toPointX2, toPointY2)
function drawCircle(x,y,strokeStyle, fillStyle) {
 var c = document.getElementById( "mon_canvas" );
 var ctx = c.getContext("2d");
 ctx.lineWidth = 1;
 ctx.beginPath(x,y);
 ctx.arc(x,y,cirDiam,0,Math.PI*2,true);
 ctx.strokeStyle = strokeStyle;
 ctx.fillStyle   = fillStyle;
 ctx.fill();
 ctx.stroke();
} // function drawCircle(x,y,strokeStyle, fillStyle)
function save() {
 var i = 0;
 document.getElementById('tosave').value = '';
 for (i=0;i<points;i++) {
  document.getElementById('tosave').value = document.getElementById('tosave').value + arrPX[i] + ',' + arrPY[i] + '|';
 }
 
 res = Math.random();
 window.open('save_load.php?action=save&p='+res,"Save","menubar=no, status=no, scrollbars=yes, location=no, width=600, height=400");
} // function save()
function load() {
 var i = 0;
 document.getElementById('tosave').value = '';
 for (i=0;i<points;i++) {
  document.getElementById('tosave').value = document.getElementById('tosave').value + arrPX[i] + ',' + arrPY[i] + '|';
 }
 
 res = Math.random();
 window.open('save_load.php?action=load&p='+res,"Save","menubar=no, status=no, scrollbars=yes, location=no, width=600, height=400");
} // function load()
//-->
</script>
</head>
<body style="font-family:tahoma">
<h1>Unione punti by badaze</h1>
<table summary="">
<tr>
 <td>
  <div style="border:1px dotted black;width:351;height:351" >
   <canvas id="mon_canvas" width="350" height="350" onclick="doAction()"> 
    Spiacente. Il tuo browser non gestisce i canvas
   </canvas>
  </div>
 </td>
 <td id="pList" align="top" style="font-size:8pt">
 
 </td>
</tr>
</table>
<hr/>
<input type="button" value="Clear" id="clear" onclick="clearCanvas()"/>
<input type="button" value="Reset" id="reset" onclick="resetCanvas()"/>
Action :
<select onchange="setAddPointStatus(this.value)">
 <option value="1">Aggiungere un punto</option>
 <option value="2">Rimuovere un punto</option>
 <option value="3">Unire due punti</option> 
 <option value="4">Disunire due punti</option>  
</select>
<input type="button" value="Salva" id="save" onclick="save()"/>
<input type="button" value="Carica" id="load" onclick="load()"/>
<hr/>
<table summary="">
<tr>
<td>Mouse X =</td><td id="mposX"></td>
<td>&nbsp;-&nbsp;</td>
<td>Mouse Y =</td><td id="mposY"></td>
<td>&nbsp;-&nbsp;</td>
<td>Points # =</td><td id="pNum"></td>
<td>&nbsp;-&nbsp;</td>
<td>Mouse over point =</td><td id="mouP"></td>
</tr>
</table>
<hr/>
<ul>
<li>Aggiungere un punto : clicca sull'area per aggiungere un punto</li>
<li>Rimuovere un punto : clicca sul punto per cancellarlo</li>
<li>Unire due punti : clicca su un punto (cambia colore), poi clicca su un altro punto</li>
<li>Disunire due punti : clicca su un punto (cambia colore), poi clicca su un altro punto collegato</li>
</ul>
<hr/>
<p>Clear : cancella tutto</p>
<p>Reset : ridisegna tutti i punti</p>
<form method="post" name="form1"/>
 <input type="hidden" name="tosave" id="tosave"/>
</form> 
<script language="JavaScript" type="text/javascript">
<!--
$("body").mousemove(function(e) {
    var c    = document.getElementById( "mon_canvas" );
  var rect = c.getBoundingClientRect (); 
  mouseX   = parseInt(e.pageX - rect.left); 
  mouseY   = parseInt(e.pageY - rect.top);
    document.getElementById('mposX').innerHTML = mouseX;
  document.getElementById('mposY').innerHTML = mouseY;
  if (checkPoint() != -1) {
    document.getElementById('mouP').innerHTML = "yes";
  } else {
    document.getElementById('mouP').innerHTML = "no";
  }
  showPointsList();
})
//-->
</script>
</body>
</html>

**badaze** · 18-09-2016, 20:23

Parte 2/2

file : save_load.php

Codice PHP:



< !DOCTYPE html> 
< html>
< head>
< title><?php 
  if (!isset($_GET['action'])) {
    $_GET['action'] = 'load';
  } 
  $action = $_GET['action']; 
  if ($_GET['action'] == 'save') {
    print "Save Canvas";
  } else {
    print "Load Canvas";
  } 
  ?></title>
< script language="JavaScript" type="text/javascript">
< !--
function save() {
  if (controlFileName()) {
    document.getElementById('usefile').value = document.getElementById('filename').value;
   document.getElementById('tosave').value  = "";
   
   listOfPointsX = new Array();
   listOfPointsY = new Array();
   
   var i = 0;
   for(i=0;i<window.opener.points;i++) {
    document.getElementById('tosave').value = document.getElementById('tosave').value + window.opener.arrPX[i]+','+window.opener.arrPY[i]+'|';
   }
   document.form1.submit();
 } 
 } // function save()
 function load() {
  if (controlFileName()) {
    document.getElementById('usefile').value = document.getElementById('filename').value;
   document.form1.submit();
  } 
 } // function load()
 function controlFileName() {
  var str = document.getElementById('filename').value;
  if (str == "") {
   alert("Digitare o cliccare il nome di un file"); 
  return false;
  } 
  var re  = /(\.upo)$/i; 
  found   = str.search(re); 
  if (found == -1) { 
   alert("Non è un file .upo"); 
   return false;
  }
  return true;
 } // function controlFileName()
 //-->
< /script>
< /head>
< body style="font-family:tahoma"><?php 
 if (isset($_POST['go'])) {
  if ($action == 'save') {
   file_put_contents($_POST['usefile'], $_POST['tosave']); 
  } else {
   $str   = file_get_contents($_POST['usefile']);
  $array = explode('|',$str);?>
  <script language="javascript">
  window.opener.clearCanvas();<?php
  foreach($array as $value) {
    if ($value != "") {
     $array2 = explode(',',$value);?>
      window.opener.addPoint(<?php print $array2[0] ?>,<?php print $array2[1] ?>);<?php
   }
  }?>
  window.opener.showPointsList();
   </script><?php  
  }?>
  <script language="javascript">
   window.close();
  </script><?php
 } // if (isset($_POST['go']))
 ?>

 File name =
    <input type="input" id="filename" size="40" maxlength="80"/><?php
  if ($_GET['action'] == 'save') {?>
    <input type="button" name="filename" value="Salva" onclick="save()"/><?php
  } else {?>
    <input type="button" name="filename" value="Carica" onclick="load()"/><?php
  }?>
< hr/>
 I nomi dei files devono finore con .upo
< hr/>
< form action="save_load.php?action=<?php print  $action ?>" method="post" name="form1"/>
  <input type="hidden" name="tosave"  id="tosave"/>
  <input type="hidden" name="go"      id="go" value="1"/> 
  <input type="hidden" name="usefile" id="usefile"/> 
< /form> 
< table summary="">
< ?php
 //-------------- Liste des fichiers
  $directory = "./";
  $extension = ".upo";
  
  $at_least_1 = 0;
  $open= @OpenDir($directory);
  while($curfile=@ReadDir($open)) {
   if(($curfile!=".")&&($curfile!="..") && ! is_dir($directory."/".$curfile)) {
    if (mb_eregi("($extension)", $curfile)) {
     $at_least_1   = 1;?>
     <tr onmouseover="this.style.backgroundColor='red';this.style.color='white';" on
     onmouseout="this.style.backgroundColor='white';this.style.color='black';" >
      <td style="font-family:tahoma; font-size:10pt" onclick="document.getElementById('filename').value='<?php print $curfile ?>'">
       <?php print $curfile ?>
      </td>
     </tr><?php
    } // if mb_eregi(".mag",$curfile) 
   } // if(($curfile!=".")&&($curfile!=".."))
  } // while($curfile=ReadDir($open))
  //-------------- Aucun fichier;
  if ($at_least_1 == 0) {?>
   <tr>
    <td style="font-family:tahoma; font-size:12pt">
     No upo file ...
    </td>
   </tr><?php
  } // if ($at_least_1 == 0)
 ?>
< /table>
< /body>
< /html>

Discussione: Creare gioco "unisci i puntini"

Strumenti discussione

Ricerca discussione

Visualizza

Creare gioco "unisci i puntini"

Permessi di invio