Live Speed is an implementation of the card game "Speed". Speed is a fast-paced card game, played with a standard 52-card deck. Its main goal is to play and get rid of all of your cards before your opponent does. It's a game more heavily focused on speed and reflexes, and less on strategy.
Live Speed is meant to be played online with friends or strangers. You can also play against a CPU player. It was developed using the following stack:
- Ruby 2.6
- Rails 6.0 w/ Webpacker
- VueJS 2.5
- A few other JS libraries and their bazillion NPM dependencies
- Websockets w/ ActionCable
- PostgreSQL
- Hosted on Heroku
You can access and PLAY the game now on: http://livespeed.rooood.com
Please note that the gameplay is still buggy and slow, and the game is currently hosted on a free Heroku dyno, so it might take a while to boot.
You can currently play Live Speed matches with 2 players. Future expansion may allow up to 4 players to play at the same time. A match consists of at least one round, and can be extended in increments of 2 rounds (so that the total number of rounds is always an odd number to avoid draws).
Each round is played as follows:
Each player is dealt five cards to form a hand, and additional 15 cards face down to form a draw pile. Two stacks of five cards, placed face down on each side between the players, serve as replacement piles. Finally, two cards are placed face down in the center between the replacement piles. These form the main game piles, in which most of the action occurs.
The game table looks something like this:
Player 2 draw cards Player 2 hand
↓ ↓ ↓ ↓ ↓ ↓
🂠 🂣 🂣 🂣 🂣 🂣
Left replacement pile ↘ ↙ Right center pile
🂠 🂣 🂣 🂠
Left center pile ↗ ↖ Right replacement pile
🂣 🂣 🂣 🂣 🂣 🂠
↑ ↑ ↑ ↑ ↑ ↑
Player 1 hand Player 1 draw cards
The round begins when all players click the 'READY' button. At this point, the face-down cards in the center piles at turned face-up at the same time. Using cards from their hand, the players must simultaneously place cards of a rank that is one above or one below on top of either of the center stacks without hesitating to shuffle cards or otherwise delay the game (however a player may only play one card at a time). For example, a pile with a six on top may have a five or a seven placed on it, but not another six. Ace is both a high and low card, considered one value above a King as well as one below a Two, so that the cards form a looping sequence. Whenever the number of cards in a player's hands drops below five, a card from the player's draw pile is automaticaly drawn to their hand to maintain exactly five cards until that player's draw pile is depleted.
When both players run out of options for play they must click their respective replacement piles, and, when everyone has clicked, one card from each replacement pile is flipped onto the top of the central piles. If these piles become depleted, the central stacks are shuffled individually and are placed face-down as new replacement piles from which cards can be flipped. If a player has a card to place it must be placed, so the replacement piles can only be played when no one has any valid plays left.
A player wins by running out of cards in his hand and draw pile before the other player.
Here's a quick overview of the project's progress:
- Card assets and positioning
- Round loading through ActionCable
- Card dealing animations
- Wait until players ready
- Drag-and-drop system to play cards
- Play card
- Draw card from draw pile
- Wait until players ready for replacement play
- Play replacement cards
- Shuffle center piles back into replacement piles
- End-game feedback
- Redo card positioning to make it work for mobile
- Fix visual bugs
- Fix game ready bug where the cards don't flip when players are ready
- Finish sound effects
- Implement controls for disabling sound effects
- Implement a HUD to show current round, current score, etc
- Implement AI to serve as a tutorial
- Pause game when player disconnects
- Only reveal cards once both players are ready
- Optimize for mobile gameplay
- Replacement cards sometimes are placed behind the top center pile cards after reshuffle
- Persist card being dragged after Vue update
- Add help timer to warn players of possible plays when they stay a long time without any moves
- End abandoned match by W.O. when player does not reconnect after a while
- Implement demo version of game to display on landing page
- Windows Solitaire card dropping animation
- Animate opponent card play
- Cards being pulled from random places instead of the draw pile
- Choose brand colours
- Create basic layout
- Create basic Vue components (buttons, links, form inputs, etc)
- Style player creation page
- Create landing page
- Add Google Analytics or similar user tracking service
- Implement GDPR
- Optimize for mobile
- Basic login and sign up functionality
- Able to play without signing up
- Create new match
- List existing matches
- List matches that are waiting for players
- Allow player to join a match
- Able to start playing a round/new round from a match page
- Define and implement full flow of player/user signup/login
- Add How to Play page with good instructions
- Let players with no account create an account with their existing Player
- Let players check their matches history
- Let players view and manage their accounts
- Show player statistics on profile page
- Setup Heroku deploy
- Use Webpacker version of ActionCable and Turbolinks
- Add JSRoutes with webpacker
- Add i18n to Rails
- Add i18n to JS/webpacker
- Completely remove Sprockets in favour of Webpacker
- Upgrade Webpack
- Add monitoring service
- Generate favicons in webpacker instead of sprockets
- Add some SEO stuff
Author, Design & Implementation: Rodrigo Castro Azevedo
Playing Cards SVGs: Adrian Kennard from www.me.uk/cards
This project is licensed under the MIT License.