21 Comments



Check out my books, games and more!

Join our Discord:

Learn how to build a multiplayer card game using Phaser 3, Express, and Socket.IO!

Follow along with the written version of this tutorial: www.freecodecamp.org/news/how-to-build-a-multiplayer-card-game-with-phaser-3-express-and-socket-io/

Access the code for this project on GitHub:

Download the assets for this project on GitHub:

Follow the basic official Phaser tutorial:

Read Scott Westover’s excellent article on creating a basic multiplayer game in Phaser with Socket.IO:

Many thanks to Kal_Torak, the Phaser community, and my good friend Mike in answering all my questions and helping me conceptualize the architecture for this project!

Subscribe and like for more!

Check out my books and games:

Follow me on Twitter:

Music shout-out: “8bit Blix” by Micah Young

Nguồn: https://partnersinsublime.com/

Xem thêm bài viết khác: https://partnersinsublime.com/game/

Author

meeylandofficial@gmail.com

21 thoughts on “How to Build a Multiplayer Card Game with Phaser 3, Express, and Socket.IO

  1. Hi @M. S. Farzan! I am working on my own project but using this to connect NodeJS to my frontend. I ran in to a problem, so I cloned your project but got the same error.

    When I run (even using your project):
    > npm run start
    I go to localhost:3000, and I get an error that says cannot "Cannot GET /"

    I also do not understand how your server.js connects or calls your index.html or index.js to kick off game.js.

    Thank you my friend!

  2. Your a life savior, its amazing that you did this, but can i ask about if the user clicks and not drag the card, how to animate the card from the hand to the zone?
    And when dealer draws cards for the players, how would we animate them like one by one (while drawing, push the near card)

  3. Hi, I followed along with the turorial exactly till you load the first card image, for some reasin i can only see a green box instead of the images, do you know why?

  4. Great instructional example and video. I would suggest finding a way to increase the text resolution. It's hard to read details even on full screen. Thanks though!

  5. Thanks a lot M. S. Farzan for this great tutorial; by far the best one available.

    Quick question: The game is running fine on my localhost, but I'm trying to access it from another Mac on the same LAN. I noticed the Socket.io server is listening to port 3000 and can be accessed by other computers; but the web server launched from the client folder with "npm start" is only listening to port 8080 from localhost. I tried adding this line: [server.use(serveStatic(__dirname + "/client"));] from your other tutorial, but it just made the Socket.io server crash. Any ideas?

    Thanks again!

  6. I love this tutorial. It's well suited for someone who is proficient in another technology stack but wants to learn how to create online web games.
    Please make a tutorial on how to deploy this server client app to heroku. I've been trying but I'm having trouble. I was able to get the server deployed and running successfully, but I'm having trouble with the client. It's difficult parsing through the information online, especially for someone who doesn't not come from a background of web development. (I've been doing Android development most of the last decade, with a bit of Unity for hobby games)

  7. Hello, thank you for this tutorial.
    I can't work with this projet because when I connect using npm start, I go to localhost:8080, it's ok. After a click on "deal card" and I've got an error : " net::ERR_CONNECTION_REFUSED".
    https://www.cjoint.com/c/JEzjjxYDN5x

    My bad ! I did a npm start on a client and a server. and it's ok finally ! xD
    sorry for my english !
    Thank you.

  8. Thank you so much for this tutorial, it was very helpful and concise! I was wondering (like Ergydion) how to make it multiplayer so that it could be accessed from say a link or another remote browser? I can’t find a clear answer online. Thank you so much!

  9. Hello, thank you! This is really good work, can i contact you to discuss some moments&

  10. Thank you! This was a great explanation and I, as a long time developer-noob Phaser enthusiast, learned a great deal of things of what can I do with the library.

  11. Hello, Can you explain me what apporach to follow when there are 3 – 4 players in oppose to true:false that is possible only for 2 players?

  12. Hi excellent video!
    But I have a question. Since each player sees themselves at the bottom of the screen. How do you deal with movement data to accurately reflect what another player sees when a card is moved? That is seeing the cards being dragged and not just appearing in the drop zone.
    I appreciate your feedback 🙂

  13. Ok, Im back with a question:
    how do I access the io from outside the server.js?
    I did some refactoring and added a model to my server that represents the game. Now I also have a GameController and would like to send out events via the io instead of doing it directly within the server.js.
    I already found something on StackOverflow but didnt manage to export the io into my GameController.
    Do you maybe have any advice?

  14. Thank you, I will use your tutorial to hopefully create a multiplayer online game for me and my friends.
    A topic that would be really interesting for me would automatic scaling solutions with phaser. I've looked around but didn't manage to get it to work.
    This would be really useful when people with different screen sizes use the game.
    Anyway thank for the clear and concise tutorial!

  15. Good video, haven't finished watching yet… But it is very hard to follow since everything is so small!

  16. Hey, thanks for the guide. But Im already stuck at the beginning.
    If I type in npm start in the beginning I get the following error:
    npm ERR! code ELIFECYCLE

    npm ERR! errno 1

    npm ERR! phaser3-project-template@1.1.0 start: `webpack-dev-server –config webpack/base.js –open`

    npm ERR! Exit status 1
    npm ERR!

    npm ERR! Failed at the phaser3-project-template@1.1.0 start script.

    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    What could be the problem?
    I also tried downloading your finished project from github but ended with a webpage that says "Cannot Get /"

  17. Hey, thank you for your guide.

    I was trying to recreate the game step by step. Unfortunately I am not able to establish a handshake between server and client. I also tried your provided files on GitHub for comparison and they are not working too – at least on my system apparantly.
    The only respond I receive in Edge, Chrome and Vivaldi is "Cannot GET /".
    Do you have any idea what the problem could be?

  18. Great tut!

    just wonder why you went out of your way to be es6 and not leverage rocket functions instead of referencing 'this' as self? the renderOutline method also could have dropped the parameterized call and just assumed 'this' caller's context is the instance of the dropZone. and could socket.io not be used to forgo differentiate between playerA and playerB?

    imagine you're leaving a lot of room for learning 🙂

  19. Hi, ive made a partly working card game in js with socket io, but ive got a lot of issues with it, so i started to watch your video of unity card game, i like it so far, but id like to make it mutilplayer based

Leave a Reply

Your email address will not be published. Required fields are marked *