/arcomage-hd

Web-based, open source, remastered 3D clone of 3DO/NWC's 2000 card game Arcomage. 10 languages. Desktop / tablet / mobile screen. PWA. Against AI or Multiplayer (w/o server). πŸ§πŸ‘ΎπŸƒ (ts+react+redux+rxjs, CSS-based anim, WebRTC)

Primary LanguageTypeScriptOtherNOASSERTION

ArcoMage HD logo

arcomage.github.io

ArcoMage HD - Open Source Card Game

ArcoMage HD is a web-based, open source, remastered 3D clone of 3DO and New World Computing's 2000 PC card game Arcomage, which appeared in the Might and Magic RPG game series.

This not-for-profit fan-remake of the tower defense, resource management fantasy game is developed by @tomchen with TypeScript + React + Redux + redux-observable + RxJS + CSS-based animations + WebRTC (see Β§ Development). Please star the repo / follow me to support me.

It's available in 10 languages: English, French, German, Simplified Chinese, Traditional Chinese, Spanish, Italian, Russian, Czech, Polish.

The default single player mode (against computer AI πŸ€–) is stableβœ”οΈ. I recently added Multiplayer Mode πŸ§‘β€πŸ€β€πŸ§‘ which is generally good but may need more testsπŸ§ͺ. Click gear βš™οΈ icon in the game to open the "Preferences" window so you can change settings and/or switch to Multiplayer Mode.

It supports Google Chrome Firefox Safari Microsoft Edge Opera Samsung Internet and other modern browsers (it works best in Chrome and browsers with Chrome's Blink engine, and may or may not have performance issues in Safari & Firefox. Safari, Firefox, IE users can use the Desktop Version instead).

It supports desktop / tablet / mobile screen πŸ–₯οΈπŸ’»πŸ“±. It's a PWA, meaning you can install it and play it offline.

Click to play it now

ArcoMage HD screenshot

version number Actions Status License

Gameplay

ArcoMage HD Manual Image

Click to show game rules in text form

Victory conditions vary per tavern. Build your tower, destroy your opponent's tower, or collect enough resources before your opponent does.

Large yellow numbers in column are the productions. This is how many new units of a particular resource you will receive on your next turn. Small black numbers in column are the resources. This is how many units you have available to spend on your current turn.

Cards: Each have their own cost to play, indicated in a small circle in the lower right corner of the card. The cost will be deducted from your resources according to the color of the card. Left click on a card plays the card. Right click on a card to discard without playing.

Red represents your Quarry Generator which produces your Brick 🧱 resources, blue represents your Magic Generator which produces Gem πŸ’Ž resources, green represents your Dungeon (aka. Zoo) generator which produces Recruit (aka. Beast) 🐲 resources.

Play It Offline (PWA)

The image and sound files, as well as the card and language settings, are automatically stored in your browser. In addition, you can install this "Progressive Web App" (PWA) on your computer or smartphone. Google Chrome's article on how to install PWA.

Depending on your browser, sometimes you may need to press Ctrl + F5 to clear the cache files & reload arcomage.github.io webpage to have the latest version of the game.

Desktop Version

If you don't have performance issues playing ArcoMage HD in your browser, then you don't need to use the Desktop Version.

Some browsers, such as Firefox and Safari, that are not Chrome's engine based, may (or may not) be a bit slow running ArcoMage HD. In this case, you can use the Desktop Version.

The Desktop Version is merely a Google Chrome browser-like wrapper that visits the URL https://arcomage.github.io/.

Click to download the Desktop Version (Windows)

Click to show more details on the Desktop Version

Do I Need Desktop Version? (browser list)

If you are using "fully supported" browser, then it's likely you don't need the Desktop Version.

Browsers based on Chrome's engine (Blink or WebKit) are fully supported by ArcoMage HD (as of 2021):

(*: I didn't really test these browsers)

  • Google Chromium
  • Google Chrome
  • Brave
  • Edge
  • Opera *
  • Maxthon *
  • Vivaldi *
  • QQ *
  • Sogou *
  • Baidu *
  • WeChat's browser
  • Yandex Browser *
  • UC Browser *
  • CM Browser *
  • etc.

Browsers not or partially based on Chrome's engine, and may or may not run ArcoMage HD very well, therefore you can use the Desktop Version:

  • Internet Explorer: this old browser, of course, does not work
  • Firefox & Safari: you can play the game with these browsers, but they do not have as good performance as Chrome's engine based browsers therefore may be a bit slow, it depends on your CPU / GPU
    • Pale Moon *

Other Remarks

The Desktop Version is not expected to be updated. The Desktop Version's version number is different from ArcoMage HD's. Actually the Desktop Version may stays v1.0.0 forever unless there's really something to update.

The first time you run ArcoMage HD Desktop Version, it downloads all the images and sound files silently. You should wait maybe 1 minute (depending on your Internet speed), before you can cut off Internet and play it completely offline.

If you install both Google Chrome and the Desktop Version, the Desktop Version will have independent storage. Clearing your Google Chrome's stored data will not reset the Desktop Version's settings.

Keyboard Control

The game is fully controllable with keyboard. Use Tab (or Option (Alt) + Tab in Safari) to select a top-menu icon or a card, then Enter to open or use it, Delete / Backspace to discard a card, Esc to close a preferences window.

Click to show the detailed keyboard control instruction & additional special "Access Key" usage (e.g. Alt + P: Preferences; Alt + 1: use the 1st card ...)

Top Menu

Use Tab to select an icon (it's Option (Alt) + Tab in Safari), then Enter to open it. When the window is open, use Esc to close it.

Or with access key (only for opening a window):

  • Alt + P: Preferences
  • Alt + L: Language
  • Alt + V: Volume
  • Alt + T: Toggle Fullscreen
  • Alt + H: Help
  • Alt + G: GitHub

Card

Use Tab to select a card (it's Option (Alt) + Tab in Safari), then Enter to use it, or Delete / Backspace to discard it.

Or with access key (only for using a card):

  • Alt + 1: Use the 1st card
  • Alt + 2: Use the 2nd card
  • Alt + 3: Use the 3rd card
  • Alt + ...: Use the nth card (n <= 9, you can't use 10th or later card with access key)

It could be other key instead of Alt

The way to activate the accesskey depends on the browser and its platform, it's "Alt + key" in Chrome Windows/Linux.

Multiplayer Mode

(Multiplayer Mode is experimentalπŸ§ͺ and may be unstable)

How To Use the Multiplayer Mode

multiplayer-demo.mp4

Both players enable the "Multiplayer" Mode. Bob 🧝 must copy and give his ID to Alice πŸ‘§ via Discord or other platforms or forums. Alice πŸ‘§ then enters Bob 🧝's ID and connect to Bob 🧝. Alice πŸ‘§ becomes the host 🏠 (i.e. technically it's her computer that deals cards) and Bob 🧝 is the guest πŸ’Ό.

Click to show technical details

Technical

In Multiplayer Mode, you are connected directly to your opponent (Peer to Peer, P2P) without server. However, we still need a free public relay server. Once we use the ID assigned by the relay server to connect to each other, we are connected directly and don't need the server any more.

The game operates no servers at all, therefore it does not have a server that stores a "list of players online" so you can choose your opponent more easily. You have to instead give your ID to your opponent via Discord or other platforms.

The relay servers used here are free STUN servers set up by Google and others.

WebRTC (Web Real-Time Communication) is used for the Peer to Peer communication.

Development

The stack:

Typescript React Redux redux-observable RxJS (ReactiveX) WebRTC Workbox JavaScript ECMAScript 6+ Sass Tailwind CSS Material-UI webpack Jest JSS Prettier ESLint PostCSS Autoprefixer Visual Studio Code yarn v1 Inkscape Adobe Illustrator Adobe Photoshop

TypeScript + React + Redux + redux-observable + RxJS, CSS-based animations without <canvas>. PWA (using Workbox). P2P Multiplayer Mode without server (only uses STUN servers as relay) with WebRTC (using PeerJS).

To Do

To-do list

Translation Credits

Click to show the translation credits

See also Issue #9

Arcomage original game

Arcomage was initially developed by Stickman Games and later sold to The 3DO Company (3DO). The game appeared as a mini-game in Might and Magic VII: For Blood and Honor (MM7) and Might and Magic VIII: Day of the Destroyer (MM8), the seventh and eighth games in New World Computing (NWC)'s Might and Magic (MM) series. (It's like Gwent in The Witcher) NWC and its parent company, 3DO, also released a stand-alone version in 2000, which can be played in single player or multi player mode. The original stand-alone Arcomage has a resolution of 800 x 600 pixels and is usable in 16-bit color mode in Windows 10, but the graphics is unstable.

Copyright

The code of the ArcoMage HD game: MIT License (c) 2021 Tom Chen.

The assets, text, appearance and other copyrightable elements of the game: (c) 2001 The 3DO Company.

See LICENSE.md file for a detailed presentation of the copyright status of the game's components.