# Card Game Extension (alpha release)

**URL:** <https://forum.makecode.com/t/card-game-extension-alpha-release/26024>\
**Category:** Arcade\
**Tags:** extension\
**Created:** [January 16, 2024, 10:49pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024 "2024-01-16T22:49:42Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![sylvancircle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sylvancircle/32/15811_2.png) [@sylvancircle](https://forum.makecode.com/u/sylvancircle)\
**Post date:** [September 18, 2024, 2:32am UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/21 "2024-09-18T02:32:24Z")

</div>

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!

> **[Space Realms Card Debugging](https://arcade.makecode.com/S09207-15868-10448-12441)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

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).

---

<div class="post-metadata">

**Author:** ![BlueYoshi507](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blueyoshi507/32/32630_2.png) [@BlueYoshi507](https://forum.makecode.com/u/BlueYoshi507)\
**Post date:** [December 17, 2024, 9:14pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/22 "2024-12-17T21:14:01Z")

</div>

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

> **[Card Games](https://arcade.makecode.com/36418-08064-21763-30507)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![sylvancircle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sylvancircle/32/15811_2.png) [@sylvancircle](https://forum.makecode.com/u/sylvancircle)\
**Post date:** [December 18, 2024, 8:18pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/23 "2024-12-18T20:18:16Z")

</div>

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:

 ![Screenshot 2024-12-18 at 11.33.07 AM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/5/b/5b52c161c4915d33c0b5cf65555a9edba89fb104.png)

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.

---

<div class="post-metadata">

**Author:** ![fishie](https://avatars.discourse-cdn.com/v4/letter/f/7bcc69/32.png) [@fishie](https://forum.makecode.com/u/fishie)\
**Post date:** [April 25, 2025, 4:59am UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/24 "2025-04-25T04:59:53Z")

</div>

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?

> **[balatro demake](https://arcade.makecode.com/S40290-26509-64728-26189)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![sylvancircle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sylvancircle/32/15811_2.png) [@sylvancircle](https://forum.makecode.com/u/sylvancircle)\
**Post date:** [April 28, 2025, 3:19am UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/25 "2025-04-28T03:19:53Z")

</div>

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:

 ![skip-card](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/b/8/b832ff540fd5c8a5b3d93ea8faf1171edfd7e62b.jpeg)

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!

---

<div class="post-metadata">

**Author:** ![odyyseus7](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/odyyseus7/32/21687_2.png) [@odyyseus7](https://forum.makecode.com/u/odyyseus7)\
**Post date:** [May 2, 2025, 2:46am UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/26 "2025-05-02T02:46:34Z")

</div>

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](https://arcade.makecode.com/S14720-63564-45709-01423)

---

<div class="post-metadata">

**Author:** ![sylvancircle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sylvancircle/32/15811_2.png) [@sylvancircle](https://forum.makecode.com/u/sylvancircle)\
**Post date:** [May 2, 2025, 11:54am UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/27 "2025-05-02T11:54:08Z")

</div>

Really cool intro!

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

 ![Screenshot 2025-05-01 200709](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/4/3/4316f9ef902206124108038efb03f6d18655ff54.png)

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.

---

<div class="post-metadata">

**Author:** ![sylvancircle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sylvancircle/32/15811_2.png) [@sylvancircle](https://forum.makecode.com/u/sylvancircle)\
**Post date:** [May 2, 2025, 12:00pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/28 "2025-05-02T12:00:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![gimmoeri](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gimmoeri/32/25503_2.png) [@gimmoeri](https://forum.makecode.com/u/gimmoeri)\
**Post date:** [May 8, 2025, 9:00pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/29 "2025-05-08T21:00:36Z")

</div>

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

> **[high or low](https://arcade.makecode.com/S25977-34885-10870-12866)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![odyyseus7](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/odyyseus7/32/21687_2.png) [@odyyseus7](https://forum.makecode.com/u/odyyseus7)\
**Post date:** [May 9, 2025, 5:40pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/30 "2025-05-09T17:40:39Z")

</div>

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](https://arcade.makecode.com/S99907-85007-85389-04158)

---

<div class="post-metadata">

**Author:** ![sylvancircle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sylvancircle/32/15811_2.png) [@sylvancircle](https://forum.makecode.com/u/sylvancircle)\
**Post date:** [May 10, 2025, 6:07pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/31 "2025-05-10T18:07:30Z")

</div>

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

![Screenshot 2025-05-09 at 11.22.02 AM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/a/4/a45360d61afb152a79bf390d9f59b6bfbcca2a2a.png)

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 `!`):

 ![Screenshot 2025-05-09 at 11.26.14 AM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/5/9/59dba4c0a0f5608870be8ebd4eba183e2d96429c.png)

---

<div class="post-metadata">

**Author:** ![Jedi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jedi/32/14307_2.png) [@Jedi](https://forum.makecode.com/u/Jedi)\
**Post date:** [May 10, 2025, 9:00pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/32 "2025-05-10T21:00:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TheEarth](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/theearth/32/34579_2.png) [@TheEarth](https://forum.makecode.com/u/TheEarth)\
**Post date:** [October 11, 2025, 11:57pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/33 "2025-10-11T23:57:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sylvancircle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sylvancircle/32/15811_2.png) [@sylvancircle](https://forum.makecode.com/u/sylvancircle)\
**Post date:** [October 14, 2025, 2:33am UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/34 "2025-10-14T02:33:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TheEarth](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/theearth/32/34579_2.png) [@TheEarth](https://forum.makecode.com/u/TheEarth)\
**Post date:** [October 14, 2025, 9:39pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/35 "2025-10-14T21:39:28Z")

</div>

thank you so much

---

<div class="post-metadata">

**Author:** ![sylvancircle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sylvancircle/32/15811_2.png) [@sylvancircle](https://forum.makecode.com/u/sylvancircle)\
**Post date:** [October 16, 2025, 4:15am UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/36 "2025-10-16T04:15:39Z")

</div>

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.

> **[Memory - Card Kit Example v2.0](https://arcade.makecode.com/S81550-49675-15994-71486)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

> **[Solitaire - Card Kit Example v2.0](https://arcade.makecode.com/S65810-95790-14658-69571)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![TheEarth](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/theearth/32/34579_2.png) [@TheEarth](https://forum.makecode.com/u/TheEarth)\
**Post date:** [October 16, 2025, 10:39pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/37 "2025-10-16T22:39:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TheEarth](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/theearth/32/34579_2.png) [@TheEarth](https://forum.makecode.com/u/TheEarth)\
**Post date:** [October 28, 2025, 5:45pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/38 "2025-10-28T17:45:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sylvancircle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sylvancircle/32/15811_2.png) [@sylvancircle](https://forum.makecode.com/u/sylvancircle)\
**Post date:** [November 2, 2025, 11:35pm UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/39 "2025-11-02T23:35:19Z")

</div>

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 🚫 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.

---

<div class="post-metadata">

**Author:** ![TheEarth](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/theearth/32/34579_2.png) [@TheEarth](https://forum.makecode.com/u/TheEarth)\
**Post date:** [November 4, 2025, 1:22am UTC](https://forum.makecode.com/t/card-game-extension-alpha-release/26024/40 "2025-11-04T01:22:30Z")

</div>

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

[Previous page](https://forum.makecode.com/t/card-game-extension-alpha-release/26024.md?page=1)

[Next page](https://forum.makecode.com/t/card-game-extension-alpha-release/26024.md?page=3)
