JSFiddle - React, Tailwind, and code Playground

by monsto

HTML

<script src="https://cdn.jsdelivr.net/npm/phaser-ce@2.11.1/build/phaser.min.js"></script>

JavaScript

const config = {
	preload: preload,
	create: create,
	update: update
};

let cardsheetimg = ""

const game = new Phaser.Game(800, 600, Phaser.auto, '', config),
			fulldeck = [],			// entire, unused deck
			columngroup = [],		// container for the columns
			column = [],				// columns of cards
			deck = [],					// facedown deck of unused cards
			discard = [];				// used cards go here after play


function preload ()
{
	deckgroup = game.add.group();
	deckgroup.position.setTo(300, 500)
	discardgroup = game.add.group();
	discardgroup.position.setTo(400, 500)
	const card_spritesheet = game.load.spritesheet("cardsheet", "https://i.postimg.cc/zG7rRBBJ/pi-X1-ELd-1.png", 154, 240, 65, 0, 0);
	fulldeck.topcard = 0;
}

function create () {
	game.stage.backgroundColor = "#0c9fc7";
	builddeck();

	let allstacks = 6,
			stackcards = 5,
			dealcount = 0;
			stackcount = 0;

	// deal the columns
	for (let i = 0; i < allstacks; i++) {
		columngroup[i] = game.add.group();
		column[i] = [];
		for (let j = 0; j < stackcards; j++) {
			column[i][j] = fulldeck.pop();
			column[i][j].position.setTo(80 + (i * 100), 80 + (j * 30));
			columngroup[i].add(column[i][j])
			fulldeck.topcard += 1;
			column[i][j].my.col = i ;
			column[i][j].my.stack = j ;
		}
		column[i].slice(-1)[0].play("front");
		dealcount += stackcards;
		columngroup[i].y = i * 20;
	}
	
	// deck the remaining cards
	// deckgroup.addMultiple(fulldeck);
}

function update ()
{
}

function builddeck(){
	// make cardsprites
	for (let i = 0; i < 52; i++) {
		let x = i % 13;
		fulldeck[i] = game.make.sprite(0,0, "cardsheet", i)
		fulldeck[i].my = {
			value: x+1,
			original: i
		};
		fulldeck[i].my.value = x+1;	
		fulldeck[i].my.original = i;
	}
	fulldeck.back = game.make.sprite(0,0, "cardsheet", 53); // back
	fulldeck[52] = game.make.sprite(0,0, "cardsheet", 52); // 2nd joker
	fulldeck[53] = game.make.sprite(0,0, "cardsheet", 52); // 2nd joker
	fulldeck[52].my = fulldeck[53].my = {
		value: 0,
		original: 52
	};
	
	//...