pasapalabra

In this example below you will see how to do a pasapalabra 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
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>pasapalabra</title>
  
  
  
  
  
</head>

<body>

  <html>
<body>

<canvas id="canvas" width="400" height="400"
style="background-color:#333">
</canvas>

<script>

var angulos={};
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();
var letra="e";
a=angulos[letra];
ctx.fillStyle = 'yellow';
ctx.rotate(a);
ctx.translate(0, -radius*0.85);
ctx.rotate(-a);
ctx.fillText(letra, 0, 0);
ctx.rotate(a);
ctx.translate(0, -radius*0.85);
ctx.rotate(-a);
  
ctx.fillText("adios", 0, 0);
  
  
  

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  //drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  var alpha="abcdefghijklmnopqrstuvwxyz";
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
 
  for(num = 0; num < alpha.length; num++){
    ang = num * Math.PI / parseInt((alpha.length)/2);
    angulos[alpha[num]]=ang;
    console.log(ang);
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(alpha[num], 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

</body>
</html>
  
  

</body>

</html>

Comments