JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<h1>Poker</h1>
<p>by frogggeee</p>
<button type = "button" style="font: bold 40px Arial;"  onclick = "shuffleDeck()">play</button>
<p></p>
<canvas id = "canvas" width = "480" height = "380" ></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let cardSpriteSheet = new Image();
let cardNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, "t", "j", "q", "k"];
let cardLogo = [0, 1, 2, 3];
let usedCards = [];
let cardT1 = [];
let cardT2 = [];
let cards = [];
let cardX = [];
let cardY = [];
let playerCards = [];
let player2Cards = []; /* sprite sheet is 14x4; x can go from 0 - 13 and y can go from 0 - 3*/
cardSpriteSheet.src = "http://einaregilsson.github.io/cards.js/img/cards.png";
function shuffleDeck() {
cards = [];
let x1 = 0;
let y1 = 0;
let t1 = 0;
let t2 = 0;
 for (let i = 0; i < 52; i++) {
  t1 = Math.floor(Math.random() * 13);
  t2 = Math.floor(Math.random() * 3);
 	while (cards.indexOf(t1 + "" + t2) != 0) {
   t1 = Math.floor(Math.random() * 13);
   t2 = Math.floor(Math.random() * 3);
  }
//  usedCards.push(t1 + "" + t2);
//  cardT1.push(t1);
//  cardT2.push(t2);
  cards.push(t1 + "" + t2);
  cardX.push(x1);
  cardY.push(y1);
  x1 += 30;
 }//*/
}
function block(x, y, w, h, c, z) {
  ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.fillStyle = c;
  ctx.fill();
  ctx.closePath();
}
function text(text, x, y, px, color) {
    ctx.beginPath();
    ctx.font= px + "px Roboto Mono";
    ctx.fillStyle = color;
    ctx.fillText(text, x, y);
    ctx.closePath();
}
shuffleDeck();
function render() { 
	ctx.clearRect(0, 0, 1000, 1000);
	block(0, 0, 500, 500, "black");
	for (let i = 0; i < cards.length; i++) {
    	 ctx.drawImage(cardSpriteSheet, 69 * cards[i].charAt(0), 94 * cards[i].charAt(1) + "" + cards[i].charAt(2), 69, 94, cardX[i], cardY[i], 69, 94);
    	 ctx.drawImage(cardSpriteSheet, 69, 94, 69, 94, 0, 0, 69, 94);
	}
}
setInterval(render, 10);
</script>
</body>
</head>
</html>