Creating "Card Decks" in Construct

10

Index

Attached Files

The following files have been attached to this tutorial:

.c3p

buildingacarddeckprototype.c3p

Download now 404.17 KB
.capx

buildingacarddeckprototype.capx

Download now 283 KB

Stats

992 visits, 2,114 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 31 Aug, 2024. Last updated 2 Sep, 2024

To create the cards in our deck, we must pair up each suit (from the array above), with each possible card value (also from the array declared above). We create a new card "Sprite Object" with its "index", "face value", and "suit" instance variables. Then we insert it into the deck array.

The "getDeck()" function returns our brand-new deck to its caller.

function getDeck()
{
	let deck = new Array();
	for(let s = 0; s < suits.length; s++)
	{
		for(let v = 0; v < values.length; v++)
		{
			let card = {Value: values[v], Suit: suits[s]};
			deck.push(card);
		}
	}
	return deck;
}

This function populates our "deck array" with 52 total card objects; it should resemble the following when finished.

var deck = [{Value: 'A', Suit: 'Spades'}, {Value: 'A', Suit: 'Diamonds'}, {Value: 'A', Suit: 'Clubs'}...]

Construct makes creating a card deck extremely easy! This is a trick I learned while developing games in Macromedia Flash. I create a single "card deck" sprite with 4 different animations. Each animation represents a single suit. The frames inside each suit animation represent a single card face. Remember, arrays are "zero-based"! So, the first frame in any suit animation is a "card's back". Creating a card deck this way replaces the JavaScript "getDeck()" function with the Construct function illustrated below.

  • 0 Comments

Want to leave a comment? Login or Register an account!