pasapalabra2

In this example below you will see how to do a pasapalabra2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nuwanda555, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nuwanda555 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>pasapalabra2</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas id="canvas" 
			width=500 height=500 class="clock">
</canvas>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/nuwanda555/pasapalabra2-PEjyQR */
#canvas {
  background: lightblue;
}

/*Downloaded from https://www.codeseek.co/nuwanda555/pasapalabra2-PEjyQR */
//Parametric Equation of a Circl
//https://www.mathopenref.com/coordparamcircle.html

function ponerLetra(letra,color,fondo){
         var x=pos[letra].x;
         var y=pos[letra].y;
  			 ctx.beginPath();
         ctx.strokeStyle = '#FFFFFF';
				 ctx.arc(x,y,radioBola, 0, 2 * Math.PI, false);
         ctx.fillStyle = fondo;
         ctx.fill();
         ctx.fillStyle = '#FFFFFF';

				 ctx.fillText(letra,x,y); 
				 ctx.stroke();
         ctx.fillStyle = color;

			   ctx.fillText(letra,x,y); 
				 ctx.stroke();  
}






var lienzo = document.getElementById('canvas');

var ctx =lienzo.getContext("2d");

    var centroX = lienzo.width/2; 
    var centroY = lienzo.height/2;
    var radioRosco = 200;
    var radioBola = 18;
    var letras="abcdefghijklmnñopqrstuvwxyz";
    var salto = 2*Math.PI/letras.length;  
    var pos={};

    var angulo=90-salto;
    ctx.textAlign="center"; 
    ctx.textBaseline="middle"; 
    ctx.font="bold 25px Arial";
    ctx.lineWidth = 3;
    for(var i=0;  i< letras.length; i++)
    { 
				 angulo-=salto;
			   var x = centroX + radioRosco*Math.cos(angulo);
 			   var y = centroY - radioRosco*Math.sin(angulo);    //note 2.
         pos[letras[i]]={x:x, y:y}
				 ctx.beginPath();
         ctx.strokeStyle = '#FFFFFF';
				 ctx.arc(x,y,radioBola, 0, 2 * Math.PI, false);
         ctx.fillStyle = '#009900';
         ctx.fill();
         ctx.fillStyle = '#FFFFFF';

				 ctx.fillText(letras[i],x,y); 
				 ctx.stroke();        //actually draw the accumulated lines
    }

ponerLetra("a","whirte","blue");
ponerLetra("f","white","orange")
ponerLetra("k","white","red")

Comments