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 winMessage = 0;
let stage = 1;
let gameGoing = 0;
let over = 0;
let ask = 0;
let ask2 = 0;
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() {
cardX = [];
cardY = [];
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() * 4) + 0;
  //t1 = 9;
  //t2 = 1;
  cards.push(cardNum[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 * cardNum.indexOf(cards[i].charAt(0)), 94 * (cards[i].charAt(1)), 69, 94, cardX[i], cardY[i], 69, 94);
       
	}
  text(cardNum.indexOf(cards[10].charAt(0)) + "" + (cards[10].charAt(1)), 20, 20, 20, "white")
}
setInterval(render, 10);
</script>
</body>
</head>
</html>