This is a complete JavaScript and HTML5 implementation of Tom Francis' solitare card game Grid Cannon. This project intentionaly has minimial frills in its overall asthetic and animations. The goal was to create a game that you can quickly start playing in a browser on any device - similar to wordle and other HTML5 games.
Works on all devices (mobile, tablet, and desktop) in all aspect ratios. The site is also designed to work as a PWA
- Setup
- Objective
- How to place cards
- Aces and Jokers
- How to attack royal cards
- Win Condition
- Lose Condition
- Start with a shuffeled deck that includes jokers
- With the deck face-down, draw cards from the top of the deck into a 3x3 grid while making sure the skip over the middle grid position.
- If you draw any royal cards, Jokers, or Aces while dealing, place them off to the side in their own piles
- Take any left onver royal cards and place them next to the most similar card on the outside of the grid. "Most similar card" in this context means:
- Highest value card with the same suit
- If there is no card with the same suit, then the next most similar card is the highest value card with the same color.
- If there is no a card with the same color, then the next most similar card is just the highest value card.
To find and destroy all royals in the deck before running out of cards.
- Draw the top card from the deck
- Place card in grid
- If the drawn card is a royal, place the card on the outside of the grid near its most similar card. You are not allowde to place royal cards on-top of dead royals.
- If the drawn card is a Joker or Ace, place the card in its own respective Ace or Joker pile.
- If the drawn card is a
2 - 10, deal on-top of any card in the 3x3 grid with a value less-than or equal to the card you're placing. You may also place cards into any empty grid position
- Your hand is a stack of up to 3 cards and you must always play the top card on your hand.
- If you have no more royals to attack on the board, deal out cards until you find a royal. Place the royal next to its most similar card on the perimeter of the grid, and place the cards you dealt out on the bottom of the deck.
Aces and Jokers are special cards that you can use at any point throughout the game
- An Ace is allowed to be placed on any card. Aces have a rank of 1 and help you when you're strugglig to play nunberd cards
- A Joker allows you to pick up an entire stack of cards and place them at them at the bottom of the deck. The joker and any aces in the picked-up stack go to the discard pile.
Attacking a royal requires placing a 2 - 10 card in a grid-position that is opposite of a royal - such that there are 2 cards between the card you're playing and the royal you're attacking.
Each royal has different kill conditions:
- If you're attacking a Jack, the 2 cards between yours and the Jack must be add up to 11+.
- If you're attacking a Queen, the 2 cards between yours and the Queen must be the same color and add up to 12+.
- If you're attacking a King, the 2 cards between yours and the King must be the same suit and add up to 13+.
After attacking and killing a royal, the royal is set face-down.
- Dead Jacks are 1 point
- Dead Queens are 2 points
- Dead Kings are 3 points
- If you kill two cards on the same turn, you get 2x points. For example: If I killed a King & Queen on the same turn, that's 3 points for the King, 2 points for the Queen, mutlipled by 2 would be 10 points.
(3 + 2) x 2 = 10 points
- All royals are dead
- There are Royals still alive
- You have no more Aces
- You have no more Jokers
- You can't play the top card in your hand
I am open to anyone helping contribute to this project. If you'd like to help update the design, improve code quality, add a game mode, or just generally help improve the project, you're welcome to submit a PR.
If you want to fork and create a new project off of this, all I ask is you give some kind of credit to me, as well as the original creator Tom Francis