🦁 🃏 📱 An animal matching puzzle card game– built with turn-based game engine boardgame.io and React-Native + React-Native-Web

Related tags

Games react javascript android game ios board-game react-native puzzle reactjs card-games puzzle-game ios-app boardgame card-game turn-based android-app javascript-game hacktoberfest react-native-web boardgame-io
Overview

Matchimals logo

Matchimals.fun

an animal matching puzzle card game 🦁 🃏

🍎 Download for iOS from the App Store

🤖 Download for Android from the Google Play Store

🖥 Play on desktop on the web

screenshot of matchimals.fun game

How to play

  1. 1-4 players take turns connecting the top card from the deck to the existing cards on the table.
  2. If there isn't a valid connection to be made, then the player must pass.
  3. The game ends when all the cards from the deck have been connected on the board.

About

Matchimals.fun was built as a proof-of-concept by Chris Heninger (@chrisheninger) and Hannah Heninger (@mshannahnv). The gameplay is inspired by a 1959 card game called Busy Bee. 🐝 🃏

Matchimals.fun is made for kids of all ages. It aims to provide entertainment and improve pattern recognition skills through fun visuals of animals, colors, and numbers.

This project is sponsored by iGravity Studios– a custom software shop with an emphasis on UI/UX development– based in Phoenix, Arizona. 🏜 ❤️

Want to contribute?

This game has been made open source to help others looking to learn more about JavaScript, BoardGame.io, and React-Native applications.

Find a bug or have a question? Feel free to open an issue or submit a pull request!

Development

React-Native development requires a number of tools to be installed and configured on your machine for the bundler and simulators to run properly.

If you have never worked on a native app before- you'll need to follow the directions for setting up a project using the React-Native CLI Quickstart.

Once you've configured your machine for React-Native development- getting the Matchimals.fun app to build should only require a few steps:

  1. Fork the repo
  2. Install dependencies (yarn or npm i)
  3. Run the metro bundler: yarn start
  4. In a separate terminal- run the emulator: yarn run ios

Special thanks

Nicolo Davis and collaborators for the turn-based game engine boardgame.io.

Facebook and collaborators for the wonderful libraries React and React-Native.

iGravity Studios for publishing the game to the Apple App Store and Google Play Store.

Comments
  • Native App – iOS, Android, and Web

    Native App – iOS, Android, and Web

    I've spent the past couple of months rebuilding the app using React Native... this issue will serve as a placeholder for merging the two codebases together (the native code is currently private).

    matchimals-app

    opened by chrisheninger 7
  • The application crashes when I try to open the application

    The application crashes when I try to open the application

    Project Information

    • Repository: https://github.com/igravitystudios/matchimals.fun
    • Project Name: matchimals.fun
    • My Github Account: https://github.com/friendsmobile

    Expected behavior

    When I try to open the application, then the application should be opened. So that the user can easily play the game

    Actual behavior

    The application crashes when I try to open the application

    How to reproduce

    • Downloadthe application

    • After installing the application, try opening it

    • Note the BUG

    • Browser/App version: Current Version 0.1.0

    • Operating system: 6.0

    Recording Of The Bug

    20190529_032408

    Logcat

    E/AndroidRuntime( 7954): FATAL EXCEPTION: create_react_context

E/AndroidRuntime( 7954): Process: com.matchimals, PID: 7954

E/AndroidRuntime( 7954): java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libreactnativejni.so

E/AndroidRuntime( 7954): 	at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:738)

E/AndroidRuntime( 7954): 	at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:591)

E/AndroidRuntime( 7954): 	at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:529)

E/AndroidRuntime( 7954): 	at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:484)

E/AndroidRuntime( 7954): 	at com.facebook.react.bridge.ReactBridge.staticInit(ReactBridge.java:31)

E/AndroidRuntime( 7954): 	at com.facebook.react.bridge.NativeMap.(NativeMap.java:19)

E/AndroidRuntime( 7954): 	at com.facebook.react.jscexecutor.JSCExecutorFactory.create(JSCExecutorFactory.java:25)

E/AndroidRuntime( 7954): 	at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:944)

E/AndroidRuntime( 7954): 	at java.lang.Thread.run(Thread.java:818)
    opened by friendsmobile 6
  • Cards can be stacked 🐛

    Cards can be stacked 🐛

    Logic is allowing cards to be stacked if valid. 🙈

    Update: While it doesn't appear to be adding points– it is leading to the turn being ended. Whether or not the card is removed from the player's deck or if the turn just ends will need to be debugged.

    bug help wanted good first issue 
    opened by chrisheninger 5
  • WIP: Multiplayer support 🚧 🏗

    WIP: Multiplayer support 🚧 🏗

    Currently running into an issue, socket debug looks like it may be this?

    socket.io-parser decoded 4/matchimals,"Invalid namespace" as {"type":4,"nsp":"/matchimals","data":"Invalid namespace"} +2ms

    TODO:

    • [ ] Connect to server, make sure it syncs state between multiple browser windows
    • [ ] Add UI/logic/routes to join a room
    • [ ] Add logic that automatically puts player in a seat when they connect to a room– add UI to indicate "waiting on players" as well as spectator mode if room is full on players
    • [ ] Add UI/logic for when a player disconnects from the room– "wait for another player" or "leave game"
    opened by chrisheninger 4
  • Drag and Drop! 🏗

    Drag and Drop! 🏗

    App Preview: https://5a77db7892226a591b2c509c--matchimals.netlify.com/

    Files Changed: https://github.com/chrisheninger/matchimals.fun/pull/22/files

    https://react-dnd.github.io/react-dnd/docs-tutorial.html

    My preview seems to have additional renders compared to the chess tutorial– not sure if I wired something up or what. Performance might be an issue– would love someone who knows more about all this to take a look.

    help wanted 
    opened by chrisheninger 2
  • Bump elliptic from 6.5.2 to 6.5.3

    Bump elliptic from 6.5.2 to 6.5.3

    Bumps elliptic from 6.5.2 to 6.5.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump lodash from 4.17.15 to 4.17.19

    Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump websocket-extensions from 0.1.3 to 0.1.4

    Bump websocket-extensions from 0.1.3 to 0.1.4

    Bumps websocket-extensions from 0.1.3 to 0.1.4.

    Changelog

    Sourced from websocket-extensions's changelog.

    0.1.4 / 2020-06-02

    • Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by Robert McLaughlin)
    • Change license from MIT to Apache 2.0
    Commits
    • 8efd0cd Bump version to 0.1.4
    • 3dad4ad Remove ReDoS vulnerability in the Sec-WebSocket-Extensions header parser
    • 4a76c75 Add Node versions 13 and 14 on Travis
    • 44a677a Formatting change: {...} should have spaces inside the braces
    • f6c50ab Let npm reformat package.json
    • 2d211f3 Change markdown formatting of docs.
    • 0b62083 Update Travis target versions.
    • 729a465 Switch license to Apache 2.0.
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump acorn from 5.7.3 to 5.7.4

    Bump acorn from 5.7.3 to 5.7.4

    Bumps acorn from 5.7.3 to 5.7.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Web version

    Web version

    Want to replace the legacy https://www.matchimals.fun/ with a react-native-web version of the app itself.

    I had this working but I think it broke when I included react-native-animatable– might need to do some babel magic to get it to properly import and use react-native-web.

    opened by chrisheninger 1
  • use es6 module syntax

    use es6 module syntax

    While poking around I noticed that the game instance passed to the Server was not defined.

    This is somehow a JS module problem. server/index.js used node module syntax, but the modules are written in ES6 module style. Serious warning: JS modules are a book with seven seals to me.

    With this change, the clients seem to connect OK, however this does not fix multiplayer.

    I don't know whether the rename Matchimals => Game was really necessary, since now using ES6, this should use the default export.

    opened by Stefan-Hanke 1
  • Pinch-zoom / UI scaling 🔍

    Pinch-zoom / UI scaling 🔍

    Game is hard to play on a phone– could benefit from some UI scaling– along with pinch-zoom to adjust the scale.

    Started some work here: https://github.com/igravitystudios/matchimals.fun/blob/72781260f81e306f0a7a732df2bf5fd0706035f2/src/Table/index.js#L108-L125

    I think I want to rewrite it using translate instead of top/left for positioning the viewport– this will require changing a bit of the card drop logic.

    opened by chrisheninger 0
Owner
iGravity Studios
Building custom software with an emphasis on front-end UI/UX development. Established in 2010. 📱 💻 Want to work with us? Send an email! 📩
iGravity Studios
GitHub https://www.matchimals.com
iPhone and iPod Touch version of Skeleton Key: is an addictive and unique puzzle game in which you shift keys around the board unlocking treasure chests. Made with cocos2d-iphone.

Skeleton Key (iOS) Skeleton Key is an addictive and unique puzzle game in which you shift keys around the board unlocking treasure chests. It's availa

null 117 Jun 6, 2022
CardGameEngine - Prototyping a game engine for the Bang card game

CardGameEngine Prototyping a game engine for the Bang card game. Features Engine is open source Powerful scripting language using JSON Card design is

stephtelolahy 5 Nov 22, 2022
Imagine Engine - a fast, high performance Swift 2D game engine for Apple's platforms

Welcome to Imagine Engine, an ongoing project that aims to create a fast, high performance Swift 2D game engine for Apple's platforms that is also a j

John Sundell 1.8k Jan 3, 2023
Simon Tatham's Portable Puzzle Collection

This is the README accompanying the source code to Simon Tatham's puzzle collection. The collection's web site is at <http://www.chiark.greenend.org.u

Greg Hewgill 104 Dec 25, 2022
A game engine built with SDL and Swift.

Lark A game engine made with Swift and SDL. This is a pre-alpha work-in-progress. Don't try to use this unless you really know what you're doing. I ba

June Bash 41 Mar 11, 2022
War card game built with swift

Overview Do you love card games? Well here goes a very old, fun card game you can play! This is based off of luck and requires no skill. You deal card

Sam Rodriguez 0 Nov 12, 2021
A little arcade game that uses SwiftUI as a game engine.

SwiftUI Game A little arcade game that uses SwiftUI as a game engine :) Just copy the code into the Blank playgroundbook in Swift Playgrounds app on i

Roman Gaditskiy 10 Sep 30, 2022
Glide is a SpriteKit and GameplayKit based engine for building 2d games easily

Glide is a SpriteKit and GameplayKit based engine for building 2d games easily, with a focus on side scrollers. Glide is developed with Swift and works on iOS, macOS and tvOS.

null 433 Jan 6, 2023
2D ECS game engine in 100% Swift + SwiftUI for iOS, macOS, tvOS

OctopusKit A 2D game engine based on ECS and written in 100% Swift for iOS, macOS and tvOS. If you've tried making a game in Swift while sticking to t

null 335 Dec 12, 2022
A Star Wars themed card game designed to see if you know your sith vs jedi

StarWarsCardGame A Star Wars themed card game designed to see if you know your sith vs jedi. Learning Objectives: Alert Controllers, Protocol/Delegate

Jonathan Llewellyn 0 Nov 29, 2021
Cards - A SharePlay enabled card game for iOS & macOS

Deal ♣️ Overview A simple demo app showing the implementation of a card game acr

Oliver Binns 5 Jul 3, 2022
A snake engine written in SpriteKit for all Apple devices.

A snake engine written in SpriteKit for all Apple devices. ⭐ Features Fully tested engine functionality. Framework based, super easy to integrate in d

Chris Jimenez 59 Dec 13, 2022
This project is a 2D game for iOS users built with Swift and SpriteKit.

PANDA CLICKER Description Panda Clicker is a 2D game and the aim is to touch the Panda image on the center of the screen. In each touch of the panda i

iremkaraoglu 6 Dec 21, 2022
A basic Connect Four game built with SwiftUI

ConnectFour About A simple Connect Four game built entirely with SwiftUI. Through working on this project, I have learned that the upsides of using Sw

Vincent Smithers 8 Jul 11, 2021
XCode and Swift game based on the generation of random cards and some functions related to the comparison of the results.

war-card-game-V1 XCode and Swift game based on the generation of random cards and some functions related to the comparison of the results. Once a card

Eduard 1 Dec 10, 2021
The one and only open source 4X MMO mid-core strategy game for iOS. Similar to Game of War and Mobile Strike

4X MMO Strategy Game for iOS I have spent 4 years of my life and a significant amount of money into completing this game and I hope you enjoy it. For

shankqr 69 Nov 16, 2022
Switshot is a game media manager helps you transfer your game media from Nintendo Switch to your phone, and manage your media just few taps.

Switshot is a game media manager helps you transfer your game media from Nintendo Switch to your phone, and manage your media just few taps.

Astrian Zheng 55 Jun 28, 2022
Gravity Switch - A dynamic game that integrates swiping and tapping to create a fun interactive game

GravitySwitch Gravity Switch is a dynamic game that integrates swiping and tappi

null 3 Nov 19, 2022
iOS association game chatbot. AI based on neural word embedding language model. Image recognition with convolutional neural net.

AssociationBot ##iOS association game chatbot. UI based on JSQMessagesDemo. Association database created with the help of Word2Vec neural word embeddi

Alex Sosnovshchenko 16 Nov 24, 2022