Domain of X

• 

  homepage

• 

  Main Protagonist (Updated)

• 

  tutorial ui demo

• 

  example number card design

• 

  example number card design

• 

  example operator card design

• 

  example operator card design

• 

  example enemy design

• 

  main protagonist design

• GIF

  Attack Anime

Inspiration

We are fans of a comic called Fantasy Math Series (판타지 전쟁 수학). This book really intrigued our interest in math in elementary school. And now we provide a game so kids can enjoy math. This game is not only for children. We believe adults can also have fun with the game design.

What it does

Basically, it is a turn-based strategy card game.

Instead of "health point" commonly used for the enemy, we use a set of features of number (such as x>=20, x%10==0, x==12). And instead of "damage", we use a number to represent the player's attack. Players can build the number by using number cards and calculation cards (+, -, *, /, %, etc). If the number card given by the player meets the feature of number that feature will be removed from the set. For, example, if the player plays a card "20", then x>=20 and x%10==0 are removed. Then If the set is empty, the enemy dies. If multiple features are met, then all of those features will be removed, which is the way we encourage players to do so! Attack from enemies is also a feature of number. For attack, the player has to play the card, but for defense, the number of cards in hand can also work. Players will draw cards until seven at the beginning of a round and can remain cards up to 3 at the end of the round.

For an enemy's attack, we design multiple templates of features and rank them in different difficulty levels. And the enemy will generate a feature whenever it attacks.

How we built it

Our project is based on a frontend and a backend. We built our frontend using React and our backend using Node.js. The backend is responsible for dealing cards to the user, storing and sending data about each level to the frontend, and checking if a card played matches any of the enemy’s weaknesses. The frontend is responsible for rendering everything on the UI and dynamically updating it according to the current state of the game.

Challenges we ran into

The main challenge we ran into was the limitation of time. Although we started brainstorming the project early on and did our best during the hackathon to implement our thoughts, the project proved too ambitious for a 24-hour timeframe. After we built our frontend and backend, we ran into some bugs preventing the frontend from fetching data from the backend correctly, which prevented us from making further progress before the deadline to make the game dynamic. The game we envisioned also just had too many features including using calculation to create two-digit cards, attacks from the enemy, and monitoring our HP, so it was super time-consuming to implement all the logic :(. Another challenge we faced which feeds into the limitation of time is that we were learning along the way of making the project. This is our first hackathon and none of us are experts in the technologies we used yet. Learning while applying the knowledge we learned in our project took up quite a lot of time and brain cells.

What we learned

1. Collaborating on complex project
2. Time and project management
3. Creating backend server
4. Creating dynamic frontend UI
5. Creating artistic designs

What's next

1. Connect frontend and backend to make the game dynamic
2. Design more enemies, cards, skills, etc.
3. Make it available to the public

Built With

• adobe-illustrator
• adobe-in-design
• cors
• express.js
• javascript
• node.js
• nodemon
• procreate
• react
• slugify