Card Game Extension (alpha release)

Here is the fix. I’m not sure what happened to the block comments, but once you untangle them hopefully they’ll help you understand the blocks better. If you got more questions, feel free to ask!

I will probably make some changes to make card attributes easier to understand, and create additional blocks that make card attributes feel more like sprite variables (which they absolutely are).

4 Likes

Hello @sylvancircle! I need help with something. I am creating an UNO game, and I wonder, how do I make the game detect when the symbol in one card matches with the card in the pile?
Press B to flip the cards

1 Like

The Solitaire example has a check like this for stacking cards (where the number must be incremental and opposite color to stack). You can see it here, in the check for allowing a picked up card stack to add to a tableau:

The playing cards that comes with card kit has preset Rank (number 1-13), Suit (string “clubs” “diamonds” “hearts” “spades”), and SuitColor (number 15 for black and 2 for red) attributes. You can compare either Suit or SuitColor depending on your needs.

2 Likes

hii, i absolutely love this extension! super well made. i’m using it to make a demake of Balatro!
i know i’m late to the forum, but i was wondering if there was a way to move the cursor to a neighboring card without input from a player. i can’t seem to work this out, but it seems very simple in concept. is there any way to do this?

2 Likes

Sorry for the late reply - it’s been a busy week.

Yes, you can move the cursor with code (it can point to any Sprite, not just cards), but skipping a card isn’t trivial. The trick is to get the cards array from the current card container, figuring out the index of the cursor card, then setting the cursor to point to a different card by calculating the index of the new card to point to:

This code skips the cursor away from any even cards in your hand. It is not foul-proof because it doesn’t account for running past the first/last card, and if your entire hand is even the cursor would be stuck infinitely skipping.

It’ll be a lot of work, but a Balatro demake to some degree can definitely be done off the Card Kit extension. Feel free to ask if you have any other questions, or run into any other trouble!

3 Likes

i was wondering why the cards wont draw correctly
i was talking to a friend and thought it would be neat and a challenge to make https://arcade.makecode.com/S14720-63564-45709-01423

Really cool intro!

You probably want to use a “card spread” container for your hand:

A brief explanation of the various types of card containers:

  • A spread is a single line of cards. You usually want to use this for player hands, or the battlefield in Magic, or the individual stacks in solitare (as you can see from the example).
  • A deck is a single stack of cards where only the top card is shown and the rest of the cards are always shown face down. When you use the default create deck of playing cards, it is actually putting 52 standard playing cards into a deck container.
  • A pile is like a deck, except every card below the first is treated as face up. This matters because when the cards stack, you’d see the edge of face up cards in the stack instead of the back like you’d see in a deck.
  • A grid can act like a spread except it is more rigid - you must give it a fixed row/column size, and cards beyond the grid size are hidden behind scroll bars. You can see an example grid in the memory game.

Fair warning for hard times ahead: the extension was not designed with mouse controls in mind. While individual cards are sprites, I couldn’t get the Card sprite kind added properly to the sprite kind list so there’s no way to properly detect when you’ve clicked on a card. You will need to rely on the built in D-pad based controls to select and use cards, since I don’t have any plans to update the extension in the near future.

3 Likes

On second thought, I was overly pessimistic about not being able to manipulate the cards with the mouse cursor. You can use the array of container cards block to pull up all the cards in a container and then check each card individually to see if the cursor is touching them.

1 Like

This was fun to play around with. I made a higher or lower game with it in an hour with no problems

3 Likes

I’m wondering if there is a way to get all data from cards in a container without having to move the cursor if possible https://arcade.makecode.com/S99907-85007-85389-04158

To look through the cards in a container, use the array of container cards block:

Screenshot 2025-05-09 at 11.22.02 AM

My previous example that checks for even cards actually used this block (it’s that rather long line of orange blocks), but here is a cleaner example (pressing B will make all the even cards in myHand say !):

3 Likes

nice to see that someone used the wavy effect code from chatting area!

1 Like

sorry to revive this but the latest examples are broken if I update so how do I use it

Hey there, sorry for the slow reply since I’m only checking in on my weekly newsletter for forum updates. I’ll take a look at the extension and see what happened - something had probably changed or are no longer supported in the new MakeCode version. Hopefully it’s not too complicated to fix.

7 Likes

thank you so much

2 Likes

Okay, I have fixed versions of both examples that are using the latest version of MakeCode Arcade as well as the extensions:

If anyone else had run into similar issue during a MakeCode Arcade version or extension version update, it looks like all create container blocks (set X to empty Y design Z deck) had their container type (the Z part of the block) completely reset - same goes for some of the card attribute settings (myCard Card X text/number) blocks - some of the selections in the X part got reset as well.

6 Likes

thanks so much now time to use the one braincell that’s been working free labor

Uh sorry to bug you but how do you add a new card I don’t really understand the custom design toolkit

You can find the Tarot example from an earlier post that shows you the basics for designing your own cards.

As a preface, this card extension is not a good fit for TCGs like Magic or Yu-Gi-Oh where each card requires code that breaks the “normal” rules of the game in some way. Depending on how you want to approach that design problem, the extension is going to do very little to actually help other than solving some very basic card layout problems.

There are two parts to designing cards: deciding the information each card should contain (those are called attributes), and then deciding where to show that information on the cards (you put those together through layout blocks). All card design related blocks are in the advanced section.

For example, if you want to design an uno deck, you’ll probably want the following attributes:

  • Number (for regular numbered cards)
  • Color (again, for regular cards)
  • Draw (number of cards to draw. Technically, you can just code this for each special card but maybe having this would make the code easier to write)
  • Wild (a boolean to decide whether the card has a color change effect. Again, not strictly needed but might help with logic code later)
  • Skip (also a boolean)
  • Reverse (also a boolean)

Some example uno cards attribute settings:

  • A green 6 would have Number 6, Color “green”
  • A yellow skip would have Skip set to true, Color “yellow”
  • A blue draw 2 would have Draw set to 2, and Color “blue”
  • A draw 4 wild would have Wild set to true and Draw set to 4

Then in the layout, you can start placing text or image in the card based on the card attributes. You pick a corner (or center) and instructions on what to show. For uno cards this is pretty simple:

  • Draw the special wild image if the card is wild
  • Draw the number in the center of the card, if the card has a number
  • Draw :prohibited: in the center if skip is true (repeat for reverse
  • etc.

Once your cards have a design, you can now add cards to a deck based on attributes, and your layout would make sure the cards look correct on screen. You would, for example, add the following:

  • 0-9 of colors red, blue, green, yellow
  • Skip as true in red blue green yellow
  • etc.

I hope that helps you understand the concept behind designing cards. Feel free to ask questions if you have them.

3 Likes

one last question the face up true or false isn’t doing anything is it a bug or does it set the drawing to the back side