JSFiddle - React, Tailwind, and code Playground

by Eshy Lavi

HTML

<body>
<canvas id="c" width="661" height="429" style="border:4px solid white;"></canvas>
<button style="position:fixed;right:100px;bottom:30px;width:30px;background-color:green;height:30px;" id='b'>
Roll
</button>
</body>

CSS

body{background-color:black;}
.ps{margin:0;padding:0;}

JavaScript

var c   = document.getElementById('c');  
var ctx = c.getContext('2d');
var author = "Eshy Lavi try emailing me at the g."
var c_w=document.getElementById('c').width;
var c_h=document.getElementById('c').height;
var xzero=Math.floor(c_w/2);
var yzero=Math.floor(c_h/2);
var N=9;
var dievals=[];var oldvals=[];
var xs=[];
var ys=[];

function init(){

 for (var i=0;i<N;i++){
  dievals.push(Math.floor(Math.random()*6));
 }

 var cr=0;
 var flrsqrtN=Math.floor(Math.pow(N,0.5));
  
 for (var row=0;row<flrsqrtN;row++){
  for (var col=0;col<flrsqrtN;col++){
   xs[cr]=(1+col)*c_w/(2+flrsqrtN);
   ys[cr]=(1+row)*c_h/(2+flrsqrtN);
   cr++;
  } 
 }
 
 document.getElementById('b').onclick=function(){
  for (var i=0;i<N;i++){
   oldvals[i]=dievals[i];
   dievals[i]=Math.floor(Math.random()*6);
  }
  window.requestAnimationFrame(draw);
 }
 
}

function draw(){
 
 ctx.strokeStyle='black'; 
 

  for(var vv=0;vv<N;vv++){
   if (dievals[vv]==0){
    ctx.moveTo(xs[vv],ys[vv]); 
    ctx.lineTo(xs[vv],ys[vv]-1);
   } else if (dievals[vv]==1){
    ctx.moveTo(xs[vv]-2,ys[vv]-3);
    ctx.lineTo(xs[vv]-2,ys[vv]-4);  
    ctx.moveTo(xs[vv]+2,ys[vv]+3);
    ctx.lineTo(xs[vv]+2,ys[vv]+2);  
   } else if (dievals[vv]==2){
    ctx.moveTo(xs[vv]-2,ys[vv]-3);
    ctx.lineTo(xs[vv]-2,ys[vv]-4);  
    ctx.moveTo(xs[vv]+2,ys[vv]+3);
    ctx.lineTo(xs[vv]+2,ys[vv]+2);    
    ctx.moveTo(xs[vv],ys[vv]); 
    ctx.lineTo(xs[vv],ys[vv]-1);
   } else if (dievals[vv]==3){
    ctx.moveTo(xs[vv]-2,ys[vv]-3);
    ctx.lineTo(xs[vv]-2,ys[vv]-4);  
    ctx.moveTo(xs[vv]+2,ys[vv]+3);
    ctx.lineTo(xs[vv]+2,ys[vv]+2);  
    ctx.moveTo(xs[vv]+2,ys[vv]-3);
    ctx.lineTo(xs[vv]+2,ys[vv]-4);  
    ctx.moveTo(xs[vv]-2,ys[vv]+3);
    ctx.lineTo(xs[vv]-2,ys[vv]+2);   
   } else if (dievals[vv]==4){
    ctx.moveTo(xs[vv]-2,ys[vv]-3);
    ctx.lineTo(xs[vv]-2,ys[vv]-4);  
    ctx.moveTo(xs[vv]+2,ys[vv]+3);
    ctx.lineTo(xs[vv]+2,ys[vv]+2);  
    ctx.moveTo(xs[vv]+2,ys[vv]-3);
    ctx.lineTo(xs[vv]+2,ys[vv]-4);  
   ...