Making a Game Board

Anvil Q&A
1

I’m interested in making a two player version of the board game [Sequence] (Sequence (game) - Wikipedia)

I’m looking for help making the game board. It has 100 images of playing cards in a 10x10 grid, and players place colored checkers on individual cards until they have five in a row.

How would you arrange the images? A grid component of some sort? It has to be done in a way that’s possible to recognize cards marked horizontally, vertically, or diagonally.

The other thing I’m unsure about is how to overlay a checker image (or simple colored circle) on top of a playing card image. I’ve started to learn about manipulating CSS, but is there a simpler way?

Beneath the UI, do you think the program should have a class representing a card on the board, and then some sort of 2D array of card objects, with all the data manipulation involving this array?

I am a newbie and this all sounds challenging enough that I’d love to have a little guidance from more experienced developers as I get started. … Thank you!

2 Likes
2

Overlays are perhaps easiest when you use a Canvas.

2 Likes
3

For mimicing the players hand and card animations, I think swiper would be really good.

1 Like
4

If you end up using the canvas (which is how I’d approach it), the tutorial might be helpful: Anvil | The Canvas Component

3 Likes
5

Quick message to thank you all for responding. Canvas looks like a good call, and the tutorial is helpful!