I hope you enjoy our conversation.

Can you guess what bass line I'm playing on my bass during the intro? It's from a 1979 song.

You can watch the interview on freeCodeCamp's YouTube channel:

Or you can listen to the podcast in Apple Podcasts, Spotify, or your favorite podcast app. You can also listen to the podcast below, right in your browser:

Be sure to follow The freeCodeCamp podcast in your favorite podcast app. And share this podcast with a friend. Let's inspire more folks to learn to code and build careers for themselves in tech.

Also, I want to thank the 8,983 kind people who support our charity each month, and who make this podcast possible. You can join them and support our mission at: https://www.freecodecamp.org/donate

Links we talk about during the interview:

Ben's game, Void Pet on Android and iOS (Built in React Native): https://voidpet.com/

XKCD coming on "Real Programmers" that Quincy mentions: https://xkcd.com/378/

React Native course by Ben Awad: https://www.freecodecamp.org/news/create-an-app-that-works-on-ios-android-and-the-web-with-react-native-web/

I couldn't find my Mac Control hotkeys video tutorial that I mentioned anywhere, so I wrote a quick article explaining how to use these: https://www.freecodecamp.org/news/mac-control-keyboard-shortcuts-hotkeys-that-work-everywhere-in-macos/

Jabril has developed tons of other games as well. He runs the popular Jabrils gamedev focused-YouTube. He's also published a 5-hour introduction to programming course on freeCodeCamp.

We talk about:

• How Jabril got into gamedev as a kid when he got a copy of GameMaker
• Jabril's career working at a comedy club and a radio station
• The anime that Jabril's been working on for years
• Jabril's advice to gamedevs who want to make a career out of building video games

Can you guess what bass line I'm playing on my bass during the intro? It's a 2009 song that became popular in the 2010's by being associated with a meme.

You can watch the interview on YouTube:

Or you can listen to the podcast in Apple Podcasts, Spotify, or your favorite podcast app. You can also listen to the podcast below, right in your browser:

Be sure to follow The freeCodeCamp podcast in your favorite podcast app. And share this podcast with a friend. Let's inspire more folks to learn to code and build careers for themselves in tech.

Also, I want to thank the 8,509 kind people who support our charity each month, and who make this podcast possible. You can join them and support our mission at: https://www.freecodecamp.org/donate

Links we talk about during the interview:

Jabril's full length Programming for Beginners course on freeCodeCamp

That time Quincy angered the entire BTS army with a confused tweet

"The best episodes of Shark Tank are the bad ideas." How Jabril created a Fake Shark Tank Episode Generator using AI tools

Subscribe to Jabril on YouTube

Today on the freeCodeCamp Podcast, I'm joined by Lynn Zheng. She's a software engineer at freeCodeCamp and at Salesforce.

Lynn grew up in Shenzhen, China – the computer hardware capital of the world. Both of her parents were engineers. And from an early age, they encouraged Lynn to learn math and computer science.

Lynn got into the prestigious Computer Science program at University of Chicago, where she earned both Bachelors and Masters degree – all by the age of 21.

I met up with Lynn at the Redwood City Public Library in the heart of Silicon Valley. But they didn't have any study rooms available. so we climbed to a nearby rooftop and recorded there.

We talk about Lynn's many game development projects, which culminated in Learn to Code RPG, a Visual Novel game where you learn to code and get a developer job.

And we talk about her experience working as an engineer at one of the largest tech companies in the world, even as she's stuck in work visa limbo.

Next week will be our 100th episode, and I've got something extra special in store for you.

Tell your friends about the freeCodeCamp podcast. Let's inspire more folks to learn to code and build careers for themselves in tech.

Learn to Code RPG

Lynn's Stable Diffusion course

Lynn on Twitter

Lynn on LinkedIn

I'm excited to announce the launch of Learn to Code RPG v1.5, a year after the launch of Learn to Code RPG v1. (Fun fact: we're calling it v1.5 instead of v2 because we have grand plans for v2, which we plan to release in early 2023.)

What is Learn to Code RPG?

Learn to Code RPG is an interactive visual novel game where you will teach yourself to code, make friends in the tech industry, and pursue your dream of working as a developer. 🎯

The game features:

• Hours of gameplay 🎮

• Original art and music 🎨

• 1,000+ Computer Science quiz questions 📚

• 50+ achievements you can unlock 🏆

• 6 different endings 👀

• 10+ characters you can make friends with, and an adorable cat 🐱

• Minigames 👾

• A renown system, a money system, and fun items you can buy for your cat and to customize your room 🏠

Learn to Code RPG v1.5 Game Trailer

You can also watch the game trailer below and share the YouTube video with your friends:

You can download the game and play it for free. It's available for PC, Mac, and Linux on itch.io. And on Android from the Google Play Store.

If you'd like to learn more about the game itself and the development process, read on.

We'll walk you through the story, characters, graphics, and code. I'm sure you'll enjoy it. And it may even inspire you to code your own video game.

How LearnToCodeRPG Went From v1 to v1.5

The Team

When Lynn created v1, she was working solo on the game, juggling writing, coding, and some asset creation.

With this release, to give Lynn more time to focus on coding, KayLa took care of the writing. Nielda helped brainstorm features and create art assets.

Want to see a teamwork showcase? Here's one for the item shop. After purchasing furniture from the shop, the player will see the furniture in their room.

• Lynn programmed the shop, the items, and the room customization

• KayLa and Nielda came up with ideas for the items

• KayLa wrote fun flavor text for the items

• Nielda created all the assets – the room and the items – by tracing over 3D assets and applying textures over them

The Learn to Code RPG Main Story

In v1 (or what we call the Prologue), the story started as our protagonist, Lydia, decided to get a job in the tech industry. She needed to learn to code, make friends in the industry, find mentors, tackle technical interviews, and eventually arrive at her goal – a shiny new developer job.

Building from the Prologue story, in v1.5 (or what we call Arc I) Lydia starts working as a full-stack developer. She now needs to interact with her new colleagues on a day-to-day basis and react to events that arise.

She will be faced with all the things a real-world software engineer faces – changes in project requirements, communicating with project managers, learning from senior developers, and so on.

Does this look like a familiar scene from working in tech to you?

Outside of work, Lydia can also go hang out at Hacker Space with friends she made back when she was first learning to code.

At Hacker Space, Lydia might run into old acquaintances who are also looking for a job. She can decide whether or not to give them a referral.

She can also give back to the community by mentoring high school students with their projects.

There is never a shortage of fun things to do at Hacker Space. 😄

The Characters

To give the characters more depth, we brainstormed using the character card format shown below. Here's the character card for Lydia:

Lydia meets many new colleagues in this arc and our character list has been greatly expanded.

When designing the characters, sometimes our artist Noa will experiment with hair color and style variations until we land on a design that we are happy with:

Mala's different designs. Which is your favorite?

Here's also a sneak peek into one of the many characters and their many expressions:

Darius's many faces

Of course, everyone's favorite, Mint the kitty, is still the key emotional support for this story arc. 🐱

The Graphics

Now moving on to other graphics besides character sprite art. Just like in v1, we again created background images by applying a watercolor-like filter to real-world images.

Since a lot of story takes place at the company Lydia is working at, we also tried to find stock images that are coherent in color scheme, like the ones below:

Background images for the company Lydia's working at

The Code

Just like in v1, I used the game engine that I'm most familiar with, the Ren'Py Visual Novel Engine.

During this year of development, a really exciting piece of news for the Ren'Py community is that Ren'Py 8 now supports Python 3. This is exciting to me.

Compared to Python 2.7 (which we used in Ren'Py 7.4 when we developed Learn to Code RPG v1), Python 3 brings in a lot of new features that positively impact our development.

This also means that I had to spend a little time to migrate from Python 2.7 to Python 3 in our project. (It was a small Git commit, trust me 🤓).

Now some exciting stats – Ren'Py's built-in linter is perfect for gathering stats for comparisons between v1 and v1.5:

# v1
Ren'Py 7.4.8.1895 lint report, generated at: Fri Dec 17 22:11:43 2021
Statistics:
The game contains 1,335 dialogue blocks, containing 15,390 words and 85,105 characters, for an average of 11.5 words and 64 characters per block.
The game contains 40 menus, 20 images, and 49 screens.

# v1.5
Ren'Py 8.0.3.22090809 lint report, generated at: Tue Dec 20 19:22:05 2022
Statistics:
The game contains 3,339 dialogue blocks, containing 41,214 words and 220,501
characters, for an average of 12.3 words and 66 characters per block.
The game contains 68 menus, 19 images, and 51 screens.

From the stats we can see that we've nearly tripled the story content. Woohoo! 🤩

Next Steps for LearnToCodeRPG: From v1.5 to v2

Hooray! After a whole year of development, we've taken v1 to new heights and are now presenting you with Learn to Code RPG v1.5.

What's more exciting: we are only just getting started. Just as Quincy always likes to say, the sky is the limit. ✈️

Here are some things you can look forward to in v2, or even sooner, between v1.5 and v2:

• 🌎 Localization: All the text in v1 has been fully translated into Portuguese, and we have an active community working on translating the game into other world languages. You can help too, by starting here.

• 🎭 More story and characters (shhh... we have 10+ characters planned and some drawn already)

• 📚 Expanded bank of quiz questions and spaced repetition to help you learn more efficiently.

• 💻 Auto-update from inside the game so that you can stay up-to-date with the latest bug fixes, features, and storylines.

• ... and more on our holiday wishlists! 🎁

Last but not least, we hope you enjoy playing this game as much as we enjoyed developing it! 🥳

Links

You can find the game on itch.io here:

And here's the GitHub repo with all the code:

If you haven't read about how v1 of the game took shape, here's an article for you:

And here's the official press kit for the game:

If you are interested in building a Visual Novel Game yourself, check out this article of mine:

We hope you enjoy learning what it's like to work in tech by playing the Learn to Code RPG. 🧑‍💻

If you dig it, subscribe to my new music channel and leave a comment with feedback or your favorite track.

I am currently uploading this to Spotify.

How I Made The Learn to Code RPG Soundtrack

The Funk of the 70s.
The Jazz of the 80s.
The Hip Hop of the 90s.

I was a lover of music. But I never really learned how to play.

That changed 3 months into the pandemic. I bought an electric bass. I clocked several hundred hours in Rocksmith practicing the bass lines of Nathan East, Bootsy Collins, and Andy Rourke from The Smiths.

Bootsy Collins, the legendary bassist for both Parliament and James Brown

For theory, I made heavy use of Musician YouTube, including Rick Beato and Adam Neely, and most importantly Paul Del Bello.

I also got guidance from two musicians in the freeCodeCamp community: Lawrence Yeo (AKA Trebles and Blues) and Devin Lane (AKA Gentle Return). Check out their tunes.

Before long I came to realize that almost any piece of music could potentially sound good with nothing more than drums, bass, and a piano. But I didn't want to find a drummer or a pianist, so I set out to learn how to play those instruments myself.

My gear – a Fender Precision bass, Roland Octopad, and M-Audio midi controller

I started by learning to read music, doing ear training, memorizing the circle of fifths – all the things I presume you learn in music school. But I quickly abandoned that in favor of just sitting down and writing songs.

I bought a $100 midi controller and a $200 copy of Logic Pro, then got to work learning how to compose chords and melodies, and play to a metronome.

It took about 6 months, but I recorded dozens of instrumental tracks, 10 of which made it into the first release of Learn to Code RPG. I am working on several more songs with similar tempos and instrumentation for future expansions to the game.

How do you make your keyboard sounds?

I build my synth patches using Logic's built-in Alchemy additive synth and its analog synth. I also use some of Logic's stock pianos, electric pianos, organs, and its celesta.

What do you use for drums?

I play a heavily modified Logic producer drum kit on a Roland Octopad. I use heavy muting and very few plugins. I'm going for a dry, crisp 1970s sound.

You may notice that I only use the kick, snare, ride, and hi-hat. That is all that the 70s greats like Clyde Stubblefield and Gregory Coleman needed to build grooves. So I imposed that constraint upon myself. (I find that reasonable constraints can accelerate the creative process.)

Rather than playing the classic 70s breakbeats, I attempt to weave my own around the song's bass line.

What is that kick drum sound?

A booming house music kick layered on top of a clicky death metal kick.

What is that bass sound?

The bass you hear on the Learn to Code RPG soundtrack is a fattened-up analog synth sound with some delay and distortion. I can't quite play bass tight enough for studio-grade recordings, and rather than chopping it my playing, I just played on a keyboard. I EQ the bass at 40 Hz to make room room for the kick, and so it still sounds OK on a phone's speakers.

Can I use your music in my videos / on my live stream?

DM me on Twitter and we can discuss this.

Can you play my tech conference / roller skating rink / art opening?

That sounds like a blast. DM me on Twitter.

Thanks for reading about my music. I never thought I'd discover a new all-consuming passion at age 40. But it has been a blast. And I am just getting started. If I am lucky, I will still have 40 years left in me to learn music and create work I am proud of.

Learn to Code RPG is an interactive visual novel game where you will teach yourself to code, make friends in the tech industry, and pursue your dream of becoming a developer. 🎯

The game features:

• Hours of gameplay 🎮

• Original art and music 🎨

• 600+ Computer Science quiz questions 📚

• 50+ Easter Eggs you can discover 🚀

• 6 different endings 👀

• Friendly characters and an adorable cat 🐱

• Minigames! 👾

This is a first release and we hope to add more content to it in the future. Future releases will have more characters, scenarios, side quests, art, music, and, yes, minigames. (CS quiz speed run and survival mode, anyone?) We are also planning to localize it into different languages. 🌎 The sky is the limit here. ✈️

You can download it and play it for free on itch.io.

If you'd like to learn more about the game itself, my development process, and so on, read on. This is a very visual devlog (our game is a Visual Novel for a reason) and I'm sure you will enjoy it.

Learn to Code RPG – A game where you role play learning to code

Where It All Started

Let's start with a bit of background about me.

I've always loved story-rich video games since I was little. 🧒🏻

My interest in game development inspired me to major in Computer Science in college. In June 2021, I graduated from the University of Chicago with a joint Bachelor's and Master's degree in Computer Science.

In July 2021, as I was planning my move to San Francisco to start my career as a software developer, Quincy reached out to me about this game idea.

A game where you learn to code, make friends, explore the tech culture, and eventually break into the tech industry. 🎯

Although I dabble in game development engines like Unity and Ren'Py and have created small passion projects in my own time, this would be my first time building a game from the ground up, on a (mostly) one-person team. That is to say, I was a little overwhelmed by this opportunity to make my game development dream come true. 🤯

Well, you know the saying: If you’re offered a seat on a rocket ship 🚀, don’t ask what seat!

So I said yes and dove right in.

Who am I to turn down an offer from CupcakeCPU? 🧁

From Zero to Hero: How to Build A Game In Four Months

The Story

The story idea was pretty clear from the beginning: The hero/heroine makes the decision to learn to code, conquers obstacles along the journey, meets allies and mentors, and eventually gets to the grand prize – a shiny developer job.

I started with the classic writing framework of The Hero's Journey, or, the 17-stage monomyth.

(Since I started working on this game, time and again I wish I'd taken at least one creative writing class in college. 😅)

Here's a glimpse into my outline for the first and the third stage out of the 17 stages, straight from my Google Doc:

The Characters

Including the main character which the player controls, we have four major characters in the game:

• The main character, Lydia, a recent graduate from college. (In future releases of the game we may be able to present a few different main characters the player can choose from.)

• Annika, the main character's college best friend

• Marco, who becomes the main character's mentor

• Layla, the main character's onboarding buddy at her first dev job

I started designing the characters by collecting images on Pinterest. Then Quincy and I commissioned an artist online to create the character sprites and splash image.

In the images below, you can see the Pinterest character inspirations (copyright belongs to their original artists) and the final design side-by-side.

Lydia inspiration art + final character card

Annika inspiration art + final character card

Layla inspiration art + final character card

Marco inspiration art + final character card

Now that we have the main cast, what else do we need to add more character depth to Lydia, so that she is not sitting in her room alone all day long grinding code? Maybe she could use a cat in her room? 🐱

And enter Mint, Lydia's cat. (Art by me as a makeshift artist so that our artist could focus on the characters. Digital art 🎨 is my second biggest hobby after game dev.)

Mint says hi!

The Graphics

With the character graphics done, you may think that concludes the bulk of the graphics. But not so fast! A visual novel is, as its name suggests, visual, and so it needs a lot more graphics to tell an appealing story.

For example, in this image below, besides the character sprites, there is the background image and some GUI components like the textbox.

Basic graphic components: GUI, character sprites, background

To create the background images, I applied special effect filters to stock images to add a watercolor-like texture. This way, the color scheme of our characters blends perfectly into that of the background.

Top: stock image. Bottom: with filters

To illustrate the passage of time in a single day, I changed the lighting of the background images by applying color manipulation programmatically. (Check out our GitHub repo if you are interested in the implementation details!)

Four modes of lightning

For a motivation boost, whenever I feel like procrastinating, I switch my creative gears and doodle miscellaneous items that show up throughout the game. 🤣

And that's how we got in-game cookies, toast, pizza, fried chicken, and more!

Yummy!

The Code

I used the game engine that I'm most familiar with, the Ren'Py Visual Novel Engine. I reused a lot of code from my old passion projects – for example, blinking character sprites and a rhythm minigame.

Blinking characters 😉

Rhythm Minigame. Can you get a perfect score?

I also incorporated some open-source Ren'Py code like the code for kinetic text tags and the code for feather icon text.

Kinetic text tag, which can be turned off for accessibility

Feather icons are awesome for creating crisp, simplistic GUI

I will refrain from diving into the codebase here (because I won't know when to stop then 😆). Just know that it's a lot of code, both for the logic and the GUI. See the Ren'Py Lint report below.

Phew... Can we now move on to something more visual?

Ren'Py 7.4.8.1895 lint report, generated at: Fri Dec 17 22:11:43 2021
Statistics:
The game contains 1,335 dialogue blocks, containing 15,390 words and 85,105 characters, for an average of 11.5 words and 64 characters per block.
The game contains 40 menus, 20 images, and 49 screens.

The Progress-Tracker

Even a one-person project needs a project manager, so why not be my own project manager?

I used Trello to track my process and collaborate with others. I even color-coded labels for different categories of tasks, like coding, UI/UX, writing, and so on as shown in the image below on the first card in the Backlog column.

And wow, isn't that a long scroll of tasks done? 😤

My Trello board

Everything in the TODO and Doing column is moved to Done, and that brings us to...

My Takeaway

Hooray! After eight months (four months of the idea brewing, plus four months of intense coding, writing, and art making), we present to you Learn to Code RPG. 🥳

In four in-game months, Lydia has grown from an aspiring engineer into an engineer with a dev job. 🎯

In four real-world months, I've grown from an aspiring game developer into a game developer who's actually built a game. 👾

Naturally here comes the million-dollar question: What's my takeaway from this entire process?

Well, like any creative process, game development isn't easy. I'm extremely fortunate to have a team supporting me: our artist Noa who created the character art, Quincy who created the awesome original music tracks, and proofreaders and playtesters from the freeCodeCamp staff.

My GitHub contributions tell apart the days when I code vs. the days when I brainstorm or write or draw 🤪

I've grown both in terms of technical skills (by finding creative ways to build things in Ren'Py), non-technical skills (by acting as my own project manager), and more (by managing expectations, overcoming imposter syndrome, and seeking a work-life balance).

Do you know what imposter syndrome is? 👻 You bet I do!

It was by no means an easy ride, but the outcome is worth every second of hard work. More importantly, I look forward to you playing the game and providing feedback so that I can make the game better in future releases.

I hope you enjoy playing Learn to Code RPG as much as I've enjoyed creating it! 🙌

Learn to Code RPG Links

You can find the game on itch.io here:

And here's the GitHub repo with all the code.

You can also watch the Game Trailer on YouTube and share it with your friends:

Want to see what the game is like? Check out the Let's Play with Ania and Lynn.

And here's the official press kit for the game.

If you are interested in building a Visual Novel Game yourself, check out this article of mine:

Fact Sheet

Developer

freeCodeCamp.org, a 501(c)(3) nonprofit

Platform

Windows/Mac/Linux

Available on

itch.io

Price

Free

Source Code

GitHub

Release Date

December 22, 2021

Developer Contact

Quincy Larson, quincy@freecodecamp.org

Lynn Zheng, lynn@freecodecamp.org

Description

Learn to Code RPG is an interactive visual novel game where you will teach yourself to code, make friends in the tech industry, and pursue your dream of becoming a developer. 🎯

In this game, your choices shape and drive the story forward: What will you do on a day-by-day basis? Learn to code? Work as a barista? Visit the Hacker Space? Or chill, relax in the park, or cuddle with a kitten over some video games?

Will you stick to your dream – getting a job in the tech industry – and more importantly, keep that job? The choice is in your hands.

Features

• 2+ hours of gameplay 🎮

• Original art and music 🎨

• 600+ CS quiz questions 📚

• 50+ Easter Eggs you can tweet about 🚀

• 6 different endings 👀

• Friendly characters and an adorable cat 🐱

• Minigames! 👾

Dev Log Article

https://www.freecodecamp.org/news/learn-to-code-rpg/

Screenshots

Learn to Code RPG Splash art

Learn to Code RPG Game Menu

Hanging out at the Hacker Space with your best friend Annika

Chill at home with your cat Mint

Take CS quizzes

Quiz question explanation screen

NPCs

Rhythm Minigame

Videos

Trailer

Let's Play

Logo

Character Cards

Putting together all of the pieces of a full stack JavaScript application can be a complex endeavor.

In this tutorial, we're going to build a multiplayer tabletop game simulator using Vue, Phaser, Node/Express, and Socket.IO to learn several concepts that will be useful in any full stack app.

You can follow along with this video tutorial as well (1 hour 16 minute watch):

All of the project files for this tutorial are available on GitHub.

Project Overview

Our project will feature a Phaser game instance that will allow us to create tokens and cards on screen, and move them around on a digital game board.

The Phaser instance will be wrapped in a Vue component that will handle things like multiplayer chat and commands. Together, Phaser and Vue will comprise our front end (referred to from here on as the "client"), and we'll use Socket.IO to communicate with other players and tie together the front and back ends of our app.

The back end (referred to from here on as the "server") will be a simple Express server that receives Socket.IO events from the client and acts accordingly. The whole application will run on Node as its runtime.

You don't need to be an expert in any of the above frameworks to complete this project, but it would be a good idea to have a solid foundation in basic JavaScript and HTML/CSS before trying to tackle the specifics. You can also follow along with my series on Learning JavaScript by Making Digital Tabletop Games and Web Apps.

You'll also want to make sure that you have Node and Git installed, along with your favorite code editor and a command line interface (you can follow my tutorial on setting up an IDE here if you need help).

Let's get started!

Part 1: Client Basics

We'll begin building our client by installing the Vue CLI, which will help us with some tooling and allow us to make changes to our files without having to reload our web browser.

In a command line, type in the following to install the Vue CLI globally:

npm install -g @vue/cli

Navigate to a desired directory and create a new folder for our project:

mkdir tabletop-project
cd tabletop-project

Now we can use the Vue CLI to template a front end project for us:

vue create client

You can just hit "enter" at the ensuing prompts unless you have specific preferences.

The Vue CLI has helpfully templated a front end project for us, which we can view in our code editor:

Let's navigate to our new client folder in our CLI and run the template app:

cd client
npm run serve

After a little work, the Vue CLI should begin displaying our app in a web browser at the default http://localhost:8080:

Cool! We have the basic structure of our client. Let's break it by creating two new components in the /components folder, called Game.vue and Chat.vue (you can go ahead and delete HelloWorld.vue and anything in the assets folder if you're obsessed with tidiness like I am).

Replace the code in App.vue with the following:

<template>
    <div id="app">
        <div id="game">
            <Game />
        </div>
        <div id="border" />
        <div id="input">
            <Chat />
        </div>
    </div>
</template>

<script>
    import Chat from './components/Chat.vue';
    import Game from './components/Game.vue';

    export default {
        name: 'App',
        components: {
            Chat,
            Game
        }
    }
</script>

<style>
    #app {
        font-family: 'Trebuchet MS';
        text-align: left;
        background-color: black;
        color: cyan;
        display: flex;
    }
    #game {
        width: 50vw;
        height: 100vh;
    }
    #input {
        width: 50vw;
        height: 100vh;
    }
    #border {
        border-right: 2px solid cyan;
    }
    @media (max-width: 1000px) {
        #app {
            flex-direction: column;
        }
        #game {
            width: 100vw;
            height: 50vh;
        }
        #input {
            width: 100vw;
            height: 50vh;
        }
    }
</style>

As you can see, a Vue component ordinarily has three sections: Template, Script, and Style, which contain any HTML, JavaScript, and CSS for that component, respectively. We've just imported our Game and Chat components here and added a little styling to give it a cyberpunk feel when it's all up and running.

That's actually all that we need to do to set up our App.vue component, which will house everything else in our client. Before we can actually do anything with it, we'll need to get our server working!

Part 2: Server Basics

At our root directory (tabletop-project, above /client), initialize a new project in a new command line interface by typing:

npm init

Like with our client, you can go ahead and press "enter" at the prompts unless there are specifics that you'd like to designate at this time.

We'll need to install Express and Socket.IO, along with Nodemon to watch our server files for us and reboot as necessary:

npm install --save express socket.io nodemon

Let's open up the new package.json file in that root directory and add a "start" command in the "scripts" section:

  "scripts": {
    "start": "nodemon server.js"
  },

Create a new file called server.js in this directory, and enter the following code:

const server = require('express')();
const http = require('http').createServer(server);
const io = require('socket.io')(http);

io.on('connection', function (socket) {
    console.log('A user connected: ' + socket.id);

    socket.on('send', function (text) {
        let newText = "<" + socket.id + "> " + text;
        io.emit('receive', newText);
    });

    socket.on('disconnect', function () {
        console.log('A user disconnected: ' + socket.id);
    });
});

http.listen(3000, function () {
    console.log('Server started!');
});

Excellent! Our simple server will now listen at http://localhost:3000, and use Socket.IO to log to the console when a user connects and disconnects, with their socket ID.

When the server receives a "send" event from a client, it will create a new text string that includes the socket ID of the client that emitted the event, and emit its own "receive" event to all clients with the text that it received, interpolated with the socket ID.

We can test the server by returning to our command line and starting it up :

npm run start

The command console should now display:

Cool! Let's return to the Chat component of our client to start building out our front end functionality.

Part 3: Chat

Let's open a separate command line interface and navigate to the /client directory. Within that directory, install the client version of Socket.IO:

npm install --save socket.io-client

In /client/src/components/Chat.vue, add the following code:

<template>
    <div id="container">
        <div id="output">
            <h1>STRUCT</h1>
            <p v-for="(text, index) in textOutput" :key="index">{{text}}</p>
        </div>
        <div id="input">
            <form>
                <input type="text" v-model="textInput" :placeholder="textInput" />
                <input type="submit" value="Send" v-on:click="submitText" />
            </form>
        </div>
    </div>
</template>

<script>
    import io from 'socket.io-client';
    let socket = io('http://localhost:3000');

    export default {
        name: 'Chat',
        data: function () {
            return {
                textInput: null,
                textOutput: []
            }
        },
        methods: {
            submitText: function (event) {
                event.preventDefault();
                socket.emit('send', this.textInput);
            }
        },
        created: function () {
            socket.on('connect', () => {
                console.log('Connected!');
            });
            socket.on('receive', (text) => {
                this.textOutput.push(text);
                this.textInput = null;
            });
        }
    }
</script>

<style scoped>
    #container {
        text-align: left;
        display: flex;
        flex-direction: column;
        margin-left: 1vw;
        min-height: 100vh;
    }
    h1 {
        text-align: center;
    }
    .hotpink {
        color: hotpink;
    }
    #input {
        position: fixed;
        margin-top: 95vh;
    }
    input[type=text] {
        height: 20px;
        width:  40vw;
        border: 2px solid cyan;
        background-color: black;
        color: hotpink;
        padding-left: 1em;
    }
    input[type=submit]{
        height: 25px;
        width: 5vw;
        background-color: black;
        color: cyan;
        border: 2px solid cyan;
        margin-right: 2vw;
    }
    input[type=submit]:focus{
        outline: none;
    }
    input[type=submit]:hover{
        color: hotpink;
    }
    @media (max-width: 1000px) {
        #container {
            border-left: none;
            border-top: 2px solid cyan;
            min-height: 50vh;
        }
        #input {
            margin-top: 43vh;
        }
        #output {
            margin-right: 10vw;
        }
        input[type=text] {
            width: 60vw;
        }
        input[type=submit] {
            min-width: 10vw;
        }
    }
</style>

Let's examine the above from bottom to top before moving forward. Between the

I'm a tabletop game developer, and am continually looking for ways to digitize game experiences. In this tutorial, we're going to build a multiplayer card game using Phaser 3, Express, and Socket.IO.

In terms of prerequisites, you'll want to make sure that you have Node/NPM and Git installed and configured on your machine. Some experience with JavaScript would be helpful, and you may want to run through the basic Phaser tutorial before tackling this one.

Major kudos to Scott Westover for his tutorial on the topic, Kal_Torak and the Phaser community for answering all my questions, and my good friend Mike for helping me conceptualize the architecture of this project.

Note: we'll be using assets and colors from my tabletop card game, Entromancy: Hacker Battles. If you prefer, you can use your own images (or even Phaser rectangles) and colors, and you can access the entire project code on GitHub.

If you'd prefer a more visual tutorial, you can also follow along with the companion video to this article:

Let's get started!

The Game

Our simple card game will feature a Phaser client that will handle most of the game logic and doing things like dealing cards, providing drag-and-drop functionality, and so on.

On the back end, we'll spin up an Express server that will utilize Socket.IO to communicate between clients and make it so that when one player plays a card, it shows up in another player's client, and vice-versa.

Our goal for this project is to create a basic framework for a multiplayer card game that you can build upon and adjust to suit your own game's logic.

First, let's tackle the client!

The Client

To scaffold our client, we're going to clone the semi-official Phaser 3 Webpack Project Template on GitHub.

Open your favorite command line interface and create a new folder:

mkdir multiplayer-card-project
cd multiplayer-card-project

Clone the git project:

git clone https://github.com/photonstorm/phaser3-project-template.git

This command will download the template in a folder called "phaser3-project-template" within /multiplayer-card-project. If you want to follow along with our tutorial's file structure, go ahead and change that template folder's name to "client."

Navigate into that new directory and install all dependencies:

cd client
npm install

Your project folder structure should look something like this:

Before we muck with the files, let's go back to our CLI and enter the following command in the /client folder:

npm start

Our Phaser template utilizes Webpack to spin up a local server that in turn serves up a simple game app in our browser (usually at http://localhost:8080). Neat!

Let's open our project in your favorite code editor and make some changes to fit our card game. Delete everything in /client/src/assets and replace them with the card images from GitHub.

In the /client/src directory, add a folder called "scenes" and another called "helpers."

In /client/src/scenes, add an empty file called "game.js".

In /client/src/helpers, add three empty files: "card.js", "dealer.js", and "zone.js".

Your project structure should now look like this:

Cool! Your client might be throwing you errors because we deleted some things, but not to worry. Open /src/index.js, which is the main entry point to our front end app. Enter the following code:

import Phaser from "phaser";
import Game from "./scenes/game";

const config = {
    type: Phaser.AUTO,
    parent: "phaser-example",
    width: 1280,
    height: 780,
    scene: [
        Game
    ]
};

const game = new Phaser.Game(config);

All we've done here is restructure the boilerplate to utilize Phaser's "scene" system so that we can separate our game scenes rather than try to cram everything in one file. Scenes can be useful if you're creating multiple game worlds, building things like instruction screens, or generally trying to keep things tidy.

Let's move to /src/scenes/game.js and write some code:

export default class Game extends Phaser.Scene {
    constructor() {
        super({
            key: 'Game'
        });
    }

    preload() {
        this.load.image('cyanCardFront', 'src/assets/CyanCardFront.png');
        this.load.image('cyanCardBack', 'src/assets/CyanCardBack.png');
        this.load.image('magentaCardFront', 'src/assets/MagentaCardFront.png');
        this.load.image('magentaCardBack', 'src/assets/MagentaCardBack.png');
    }

    create() {
        this.dealText = this.add.text(75, 350, ['DEAL CARDS']).setFontSize(18).setFontFamily('Trebuchet MS').setColor('#00ffff').setInteractive();
    }

    update() {

    }
}

We're taking advantage of ES6 classes to create a new Game scene, which incorporates preload(), create() and update() functions.

preload() is used to...well...preload any assets that we'll be using for our game.

create() is run when the game starts up, and where we'll be establishing much of our user interface and game logic.

update() is called once per frame, and we won't be making use of it in our tutorial (but it may be useful in your own game depending on its requirements).

Within the create() function, we've created a bit of text that says "DEAL CARDS" and set it to be interactive:

Very cool. Let's create a bit of placeholder code to understand how we want this whole thing to work once it's up and running. Add the following to your create() function:

        let self = this;

        this.card = this.add.image(300, 300, 'cyanCardFront').setScale(0.3, 0.3).setInteractive();
        this.input.setDraggable(this.card);

        this.dealCards = () => {

        }

        this.dealText.on('pointerdown', function () {
            self.dealCards();
        })

        this.dealText.on('pointerover', function () {
            self.dealText.setColor('#ff69b4');
        })

        this.dealText.on('pointerout', function () {
            self.dealText.setColor('#00ffff');
        })

        this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
            gameObject.x = dragX;
            gameObject.y = dragY;
        })

We've added a lot of structure, but not much has happened. Now, when our mouse hovers over the "DEAL CARDS" text, it's highlighted in cyberpunk hot pink, and there's a random card on our screen:

We've placed the image at the (x, y) coordinates of (300, 300), set its scale to be a bit smaller, and made it interactive and draggable. We've also added a little bit of logic to determine what should happen when dragged: it should follow the (x, y) coordinates of our mouse.

We've also created an empty dealCards() function that will be called when we click on our "DEAL CARDS" text. Additionally, we've saved "this" - meaning the scene in which we're currently working - into a variable called "self" so that we can use it throughout our functions without worrying about scope.

Our Game scene is going to get messy fast if we don't start moving things around, so let's delete the code block that begins with "this.card" and move to /src/helpers/card.js to write:

export default class Card {
    constructor(scene) {
        this.render = (x, y, sprite) => {
            let card = scene.add.image(x, y, sprite).setScale(0.3, 0.3).setInteractive();
            scene.input.setDraggable(card);
            return card;
        }
    }
}

We've created a new class that accepts a scene as a parameter, and features a render() function that accepts (x, y) coordinates and a sprite. Now, we can call this function from elsewhere and pass it the necessary parameters to create cards.

Let's import the card at the top of our Game scene:

import Card from '../helpers/card';

And enter the following code within our empty dealCards() function:

        this.dealCards = () => {
            for (let i = 0; i < 5; i++) {
                let playerCard = new Card(this);
                playerCard.render(475 + (i * 100), 650, 'cyanCardFront');
            }
        }

When we click on the "DEAL CARDS" button, we now iterate through a for loop that creates cards and renders them sequentially on screen:

NICE. We can drag those cards around the screen, but it might be nice to limit where they can be dropped to support our game logic.

Let's move over to /src/helpers/zone.js and add a new class:

export default class Zone {
    constructor(scene) {
        this.renderZone = () => {
            let dropZone = scene.add.zone(700, 375, 900, 250).setRectangleDropZone(900, 250);
            dropZone.setData({ cards: 0 });
            return dropZone;
        };
        this.renderOutline = (dropZone) => {
            let dropZoneOutline = scene.add.graphics();
            dropZoneOutline.lineStyle(4, 0xff69b4);
            dropZoneOutline.strokeRect(dropZone.x - dropZone.input.hitArea.width / 2, dropZone.y - dropZone.input.hitArea.height / 2, dropZone.input.hitArea.width, dropZone.input.hitArea.height)
        }
    }
}

Phaser has built-in dropzones that allow us to dictate where game objects can be dropped, and we've set up one here and provided it with an outline. We've also added a tiny bit of data called "cards" to the dropzone that we'll use later.

Let's import our new zone into the Game scene:

import Zone from '../helpers/zone';

And call it in within the create() function:

        this.zone = new Zone(this);
        this.dropZone = this.zone.renderZone();
        this.outline = this.zone.renderOutline(this.dropZone);

Not too shabby!

We need to add a bit of logic to determine how cards should be dropped into the zone. Let's do that below the "this.input.on('drag')" function:

        this.input.on('dragstart', function (pointer, gameObject) {
            gameObject.setTint(0xff69b4);
            self.children.bringToTop(gameObject);
        })

        this.input.on('dragend', function (pointer, gameObject, dropped) {
            gameObject.setTint();
            if (!dropped) {
                gameObject.x = gameObject.input.dragStartX;
                gameObject.y = gameObject.input.dragStartY;
            }
        })

        this.input.on('drop', function (pointer, gameObject, dropZone) {
            dropZone.data.values.cards++;
            gameObject.x = (dropZone.x - 350) + (dropZone.data.values.cards * 50);
            gameObject.y = dropZone.y;
            gameObject.disableInteractive();
        })

Starting at the bottom of the code, when a card is dropped, we increment the "cards" data value on the dropzone, and assign the (x, y) coordinates of the card to the dropzone based on how many cards are already on it. We also disable interactivity on cards after they're dropped so that they can't be retracted:

We've also made it so that our cards have a different tint when dragged, and if they're not dropped over the dropzone, they'll return to their starting positions.

Although our client isn't quite complete, we've done as much as we can before implementing the back end. We can now deal cards, drag them around the screen, and drop them in a dropzone. But to move forward, we'll need to set up a server than can coordinate our multiplayer functionality.

The Server

Let's open up a new command line at our root directory (above /client) and type:

npm init
npm install --save express socket.io nodemon

We've initialized a new package.json and installed Express, Socket.IO, and Nodemon (which will watch our server and restart it upon changes).

In our code editor, let's change the "scripts" section of our package.json to say:

  "scripts": {
    "start": "nodemon server.js"
  },

Excellent. We're ready to put our server together! Create an empty file called "server.js" in our root directory and enter the following code:

const server = require('express')();
const http = require('http').createServer(server);
const io = require('socket.io')(http);

io.on('connection', function (socket) {
    console.log('A user connected: ' + socket.id);

    socket.on('disconnect', function () {
        console.log('A user disconnected: ' + socket.id);
    });
});

http.listen(3000, function () {
    console.log('Server started!');
});

We're importing Express and Socket.IO, asking for the server to listen on port 3000. When a client connects to or disconnects from that port, we'll log the event to the console with the client's socket id.

Open a new command line interface and start the server:

npm run start

Our server should now be running on localhost:3000, and Nodemon will watch our back end files for any changes. Not much else will happen except for the console log that the "Server started!"

In our other open command line interface, let's navigate back to our /client directory and install the client version of Socket.IO:

cd client
npm install --save socket.io-client

We can now import it in our Game scene:

import io from 'socket.io-client';

Great! We've just about wired up our front and back ends. All we need to do is write some code in the create() function:

        this.socket = io('http://localhost:3000');

        this.socket.on('connect', function () {
            console.log('Connected!');
        });

We're initializing a new "socket" variable that points to our local port 3000 and logs to the browser console upon connection.

Open and close a couple of browsers at http://localhost:8080 (where our Phaser client is being served) and you should see the following in your command line interface:

YAY. Let's start adding logic to our server.js file that will serve the needs of our card game. Replace the existing code with the following:

const server = require('express')();
const http = require('http').createServer(server);
const io = require('socket.io')(http);
let players = [];

io.on('connection', function (socket) {
    console.log('A user connected: ' + socket.id);

    players.push(socket.id);

    if (players.length === 1) {
        io.emit('isPlayerA');
    };

    socket.on('dealCards', function () {
        io.emit('dealCards');
    });

    socket.on('cardPlayed', function (gameObject, isPlayerA) {
        io.emit('cardPlayed', gameObject, isPlayerA);
    });

    socket.on('disconnect', function () {
        console.log('A user disconnected: ' + socket.id);
        players = players.filter(player => player !== socket.id);
    });
});

http.listen(3000, function () {
    console.log('Server started!');
});

We've initialized an empty array called "players" and add a socket id to it every time a client connects to the server, while also deleting the socket id upon disconnection.

If a client is the first to connect to the server, we ask Socket.IO to "emit" an event that they're going to be Player A. Subsequently, when the server receives an event called "dealCards" or "cardPlayed", it should emit back to the clients that they should update accordingly.

Believe it or not, that's all the code we need to get our server working! Let's turn our attention back to the Game scene. Right at the top of the create() function, type the following:

        this.isPlayerA = false;
        this.opponentCards = [];

Under the code block that starts with "this.socket.on(connect)", write:

        this.socket.on('isPlayerA', function () {
            self.isPlayerA = true;
        })

Now, if our client is the first to connect to the server, the server will emit an event that tells the client that it will be Player A. The client socket receives that event and turns our "isPlayerA" boolean from false to true.

Note: from this point forward, you may need to reload your browser page (set to http://localhost:8080), rather than having Webpack do it automatically for you, for the client to correctly disconnect from and reconnect to the server.

We need to reconfigure our dealCards() logic to support the multiplayer aspect of our game, given that we want the client to deal us a certain set of cards that may be different from our opponent's. Additionally, we want to render the backs of our opponent's cards on our screen, and vice versa.

We'll move to the empty /src/helpers/dealer.js file, import card.js, and create a new class:

import Card from './card';

export default class Dealer {
    constructor(scene) {
        this.dealCards = () => {
            let playerSprite;
            let opponentSprite;
            if (scene.isPlayerA) {
                playerSprite = 'cyanCardFront';
                opponentSprite = 'magentaCardBack';
            } else {
                playerSprite = 'magentaCardFront';
                opponentSprite = 'cyanCardBack';
            };
            for (let i = 0; i < 5; i++) {
                let playerCard = new Card(scene);
                playerCard.render(475 + (i * 100), 650, playerSprite);

                let opponentCard = new Card(scene);
                scene.opponentCards.push(opponentCard.render(475 + (i * 100), 125, opponentSprite).disableInteractive());
            }
        }
    }
}

With this new class, we're checking whether the client is Player A, and determining what sprites should be used in either case.

Then, we deal cards to our client, while rendering the backs of our opponent's cards at the top the screen and adding them to the opponentCards array that we initialized in our Game scene.

In /src/scenes/game.js, import the Dealer:

import Dealer from '../helpers/dealer';

Then replace our dealCards() function with:

        this.dealer = new Dealer(this);

Under code block that begins with "this.socket.on('isPlayerA')", add the following:

        this.socket.on('dealCards', function () {
            self.dealer.dealCards();
            self.dealText.disableInteractive();
        })

We also need to update our dealText function to match these changes:

        this.dealText.on('pointerdown', function () {
            self.socket.emit("dealCards");
        })

Phew! We've created a new Dealer class that will handle dealing cards to us and rendering our opponent's cards to the screen. When the client socket receives the "dealcards" event from the server, it will call the dealCards() function from this new class, and disable the dealText so that we can't just keep generating cards for no reason.

Finally, we've changed the dealText functionality so that when it's pressed, the client emits an event to the server that we want to deal cards, which ties everything together.

Fire up two separate browsers pointed to http://localhost:8080 and hit "DEAL CARDS" on one of them. You should see different sprites on either screen:

Note again that if you're having issues with this step, you may have to close one of your browsers and reload the first one to ensure that both clients have disconnected from the server, which should be logged to your command line console.

We still need to figure out how to render our dropped cards in our opponent's client, and vice-versa. We can do all of that in our game scene! Update the code block that begins with "this.input.on('drop')" with one line at the end:

        this.input.on('drop', function (pointer, gameObject, dropZone) {
            dropZone.data.values.cards++;
            gameObject.x = (dropZone.x - 350) + (dropZone.data.values.cards * 50);
            gameObject.y = dropZone.y;
            gameObject.disableInteractive();
            self.socket.emit('cardPlayed', gameObject, self.isPlayerA);
        })

When a card is dropped in our client, the socket will emit an event called "cardPlayed", passing the details of the game object and the client's isPlayerA boolean (which could be true or false, depending on whether the client was the first to connect to the server).

Recall that, in our server code, Socket.IO simply receives the "cardPlayed" event and emits the same event back up to all of the clients, passing the same information about the game object and isPlayerA from the client that initiated the event.

Let's write what should happen when a client receives a "cardPlayed" event from the server, below the "this.socket.on('dealCards')" code block:

         this.socket.on('cardPlayed', function (gameObject, isPlayerA) {
            if (isPlayerA !== self.isPlayerA) {
                let sprite = gameObject.textureKey;
                self.opponentCards.shift().destroy();
                self.dropZone.data.values.cards++;
                let card = new Card(self);
                card.render(((self.dropZone.x - 350) + (self.dropZone.data.values.cards * 50)), (self.dropZone.y), sprite).disableInteractive();
            }
        })

The code block first compares the isPlayerA boolean it receives from the server against the client's own isPlayerA, which is a check to determine whether the client that is receiving the event is the same one that generated it.

Let's think that through a bit further, as it exposes a key component to how our client - server relationship works, using Socket.IO as the connector.

Suppose that Client A connects to the server first, and is told through the "isPlayerA" event that it should change its isPlayerA boolean to true. That's going to determine what kind of cards it generates when a user clicks "DEAL CARDS" through that client.

If Client B connects to the server second, it's never told to alter its isPlayerA boolean, which stays false. That will also determine what kind of cards it generates.

When Client A drops a card, it emits a "cardPlayed" event to the server, passing information about the card that was dropped, and its isPlayerA boolean, which is true. The server then relays all that information back up to all clients with its own "cardPlayed" event.

Client A receives that event from the server, and notes that the isPlayerA boolean from the server is true, which means that the event was generated by Client A itself. Nothing special happens.

Client B receives the same event from the server, and notes that the isPlayerA boolean from the server is true, although Client B's own isPlayerA is false. Because of this difference, it executes the rest of the code block.

The ensuing code stores the "texturekey" - basically, the image - of the game object that it receives from the server into a variable called "sprite". It destroys one of the opponent card backs that are rendered at the top of the screen, and increments the "cards" data value in the dropzone so that we can keep placing cards from left to right.

The code then generates a new card in the dropzone that uses the sprite variable to create the same card that was dropped in the other client (if you had data attached to that game object, you could use a similar approach to attach it here as well).

Your final /src/scenes/game.js code should look like this:

import io from 'socket.io-client';
import Card from '../helpers/card';
import Dealer from "../helpers/dealer";
import Zone from '../helpers/zone';

export default class Game extends Phaser.Scene {
    constructor() {
        super({
            key: 'Game'
        });
    }

    preload() {
        this.load.image('cyanCardFront', 'src/assets/CyanCardFront.png');
        this.load.image('cyanCardBack', 'src/assets/CyanCardBack.png');
        this.load.image('magentaCardFront', 'src/assets/magentaCardFront.png');
        this.load.image('magentaCardBack', 'src/assets/magentaCardBack.png');
    }

    create() {
        this.isPlayerA = false;
        this.opponentCards = [];

        this.zone = new Zone(this);
        this.dropZone = this.zone.renderZone();
        this.outline = this.zone.renderOutline(this.dropZone);

        this.dealer = new Dealer(this);

        let self = this;

        this.socket = io('http://localhost:3000');

        this.socket.on('connect', function () {
            console.log('Connected!');
        });

        this.socket.on('isPlayerA', function () {
            self.isPlayerA = true;
        })

        this.socket.on('dealCards', function () {
            self.dealer.dealCards();
            self.dealText.disableInteractive();
        })

        this.socket.on('cardPlayed', function (gameObject, isPlayerA) {
            if (isPlayerA !== self.isPlayerA) {
                let sprite = gameObject.textureKey;
                self.opponentCards.shift().destroy();
                self.dropZone.data.values.cards++;
                let card = new Card(self);
                card.render(((self.dropZone.x - 350) + (self.dropZone.data.values.cards * 50)), (self.dropZone.y), sprite).disableInteractive();
            }
        })

        this.dealText = this.add.text(75, 350, ['DEAL CARDS']).setFontSize(18).setFontFamily('Trebuchet MS').setColor('#00ffff').setInteractive();

        this.dealText.on('pointerdown', function () {
            self.socket.emit("dealCards");
        })

        this.dealText.on('pointerover', function () {
            self.dealText.setColor('#ff69b4');
        })

        this.dealText.on('pointerout', function () {
            self.dealText.setColor('#00ffff');
        })

        this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
            gameObject.x = dragX;
            gameObject.y = dragY;
        })

        this.input.on('dragstart', function (pointer, gameObject) {
            gameObject.setTint(0xff69b4);
            self.children.bringToTop(gameObject);
        })

        this.input.on('dragend', function (pointer, gameObject, dropped) {
            gameObject.setTint();
            if (!dropped) {
                gameObject.x = gameObject.input.dragStartX;
                gameObject.y = gameObject.input.dragStartY;
            }
        })

        this.input.on('drop', function (pointer, gameObject, dropZone) {
            dropZone.data.values.cards++;
            gameObject.x = (dropZone.x - 350) + (dropZone.data.values.cards * 50);
            gameObject.y = dropZone.y;
            gameObject.disableInteractive();
            self.socket.emit('cardPlayed', gameObject, self.isPlayerA);
        })
    }

    update() {

    }
}

Save everything, open two browsers, and hit "DEAL CARDS". When you drag and drop a card in one client, it should appear in the dropzone of the other, while also deleting a card back, signifying that a card has been played:

That's it! You should now have a functional template for your multiplayer card game, which you can use to add your own cards, art, and game logic.

One first step could be to add to your Dealer class by making it shuffle an array of cards and return a random one (hint: check out Phaser.Math.RND.shuffle([array])).

Happy coding!

If you enjoyed this article, please consider checking out my games and books, subscribing to my YouTube channel, or joining the Entromancy Discord.

M. S. Farzan, Ph.D. has written and worked for high-profile video game companies and editorial websites such as Electronic Arts, Perfect World Entertainment, Modus Games, and MMORPG.com, and has served as the Community Manager for games like Dungeons & Dragons Neverwinter and Mass Effect: Andromeda. He is the Creative Director and Lead Game Designer of Entromancy: A Cyberpunk Fantasy RPG and author of The Nightpath Trilogy. Find M. S. Farzan on Twitter @sominator.

So you want to try and make a game, but are a bit intimidated? Don’t worry, I was too!

I was afraid of using objects, for example. They were this big spooky thing that I shelved away for later. But now I use them all the time!

I’m going to walk you through all the steps I went through to build my JavaScript role playing game.

Here’s my game running on CodePen. (Note that it’s not yet optimized for mobile):

First, pick the point of your game. Is it a puzzle? An RPG? A hack & slash? All right, now think about the technical difficulties of making it. A puzzle game would require a lot of complicated javascript. A hack & slash would need a lot of careful balancing, and so on.

Also, decide whether you want it to be a browser game, a mobile game, or both (a “native web” game).

For example, my game can’t fit well on mobile screen, because the player has 24 spells. That’s not comfortable clicking these small buttons on a tiny screen, so I would need to redesign the game for mobile.

Second, write down all the things you need to program to actually make the game. For me it was:

• an inventory system
• an item generator
• a player stat system
• a saving system

Third, start making your game by solving these problems one by one.

Need help actually creating the game?

It’s much easier to break your game down into small tasks. You’re not making a game, you’re making an inventory system. Then you’re making a combat system. And so on.

Unless you are already good at drawing — or want to spend months or years getting good at it — use these tools to create assets that will make your game look good:

• Game-Icons.net — these icons are fun and easy to color
• Open Game Art — get some great public domain assets
• Bulk Resize Photos — a great tool for making your own tiny icons
• CSS Sprite Generator — helps you make CSS spritesheets for your icons

Issues I encountered them and how I solved them

Spritesheets

Do you plan on having more than 20 images in your game? If so, you don’t want to make 20 images with image links to each one. You might not think 20 images is that much, but if you decide to add 50 more? That’s where spritesheets come in handy. Put some pictures onto them, copy the CSS file to your project, and just add the class to your element that corresponds with your desired image.

Saving your game’s state

Do you want your game to be saved? Well you can choose between using the browser’s LocalStorage and storing things on a server. Servers require back end knowledge. If you have none, I suggest using LocalStorage. It saves the game as long as the user doesn’t delete it with some cleanup tool. Here’s how I did it:

Basically, save all your data in one object, then update your items on load. Use the JSON stringify and parse it later.

Modularize your code

Figure out which part to hard-code and which parts to modularize. I mistakenly started hard-coding spells, which got ugly quickly. I needed 24 of these functions, along with 24 ifCritical functions.

I swear I didn’t write this! Uhh.. I was forced to!

It even has a function which can add custom functionality!

Now you may ask, how does the second spell work? I have a function playerAttack() that uses the spell object to do stuff:

• It first runs the update spells function, which calls the spells object. Then the spell takes your current stats and turns them into values like “damage” and “mana cost”.
• It checks to see whether the damage is more than 0. If yes, it does damage to boss and displays the damage, which spell did it, and the amount. It does this for most other values, too. You might think that a greater-than-zero check is useless, but you’ll think again when the game says you did 0 damage and restored 0 mana.
• Then it runs a custom function, if the spell has one. This could be used to give spells special effects which aren’t possible through our main attack function.

The game loop

For me, the game loop checks and update things: player stats, whether the player is dead, whether the player just leveled up, whether a boss is dead, and so on.

You’ll have to figure this one out yourself. I think it’s good learning experience. Think about for what and when the checks and updates need to run. For example, with a level check, I set it to run every 20 seconds since leveling isn’t that big a deal.

But then I also have a Boss death check which runs every second after battle starts. Why? So players don’t have to wait 20 seconds for a boss to die.

Some other things don’t even need to be in a loop. The functions can just be called when they are needed. Take my update spell function, for example. It’s only called when a player uses a spell.

A few things I’ve learned:

• Objects are good. This way, when you have to save data, you just need to save the object — not the 50 individual variables.
• Always set timeouts and intervals as variables, so they can be cleared later on — unless they are permanent effects that and you’re sure you won’t ever need to clear them.
• One big javascript file might not be a wise idea. CodePen only allows for one JavaScript file, but ideally, you should separate everything into modules.
• If you’re not worried about performance, you can just copy and paste the object when it needs to be updated — no need for updating half of the values individually. If the object is huge, you can even define the object first as a variable like: var object; and then build it up using some other function when you want it to be updated. I did this with my spells. Every time player casts a spell, the updateSpell() function first defines the spells object again, calculates all the damage and stats, and then fires the spell.

Funny things I’ve compromised on:

• Skill mana costs are per boss level, because if they were at the player level, I’d punish players for leveling up. This also made higher level bosses much harder, which I liked.
• Items are created with all stats, but they are not displayed if they are 0. This way, I don’t need to check for undefined, and I can avoid displaying stats if they’re generated as 0. Double win!
• I have simplified buffs and debuffs a lot. Basically, there’s a var buffStat, nerfStat, totalStat and stat. So buffs or debuffs never stack.
• With bosses, nerf stat skill doesn’t actually nerf it to 0. This is a lot more sophisticated than that. It nerfs the stat by 9999999, then checks to see if it’s less than 0. If yes, it sets it to 0. So if you manage to reach a level where you have stats that are in the billions, I might have to add more zeros.

What all of this has thought me is that I should plan a bit further ahead, even if I’m just building a fun project to expand my own skills.

Also, I now have a much better understanding of how bugs arise: sometimes you don’t realize all the edge cases where things can break down the road. And that’s when the bugs bite.

Bugs and Exploits

This one amazed me, and scared me a little. I couldn’t believe that my perfect piece of art contained bugs!

Ok, I’m exaggerating a bit. But I did underestimate the sheer number of things that could go wrong without me even realizing it.

Here’s a few bugs and exploits that cropped up, off the top of my head:

1. You could change boss levels while battling a boss, and get better loot drops that way
2. HP and Mana bars would sometime overflow
3. You could attack the boss before the battle even started. Talk about a sucker punch!
4. Mana could go negative, which prevented you from being able to perform even basic attacks, which is the main way you can restore your mana.
5. Heals temporarily increased your maximum health.
6. One spell wasn’t actually clickable most of the time due to a CSS problem
7. Attacking while not in combat put your spells on infinite cooldown

These all sound horrifying right? In an MMORPG, these things would be abused from day one and ruin everything!

Well, the good news is that most of them were easily fixable — usually with less than 1 line of code.

Others bugs, though, required me to completely rework the entire system. With the spell system, I went from having to write 3 whole functions for each spell to needing only a small object which takes only a few seconds of editing.

Again, here’s my game if you want to try it out (note that it’s not optimized for mobile devices):

And here’s the code (which is also open source and editable on CodePen):

RobertSkalko/LOOT-RPG-v1.0
_LOOT-RPG-v1.0 - Kill bosses, get LOOT!_github.com

Keep in mind that I’m a beginner (just 2 months into programming) so some of my solutions can be improved. Hopefully though, I gave you at least the basics to get you started!

Have fun creating your Javascript game!

Like many 9 year-olds, the first thing I did when our family got a computer was install games on it. My brother and I would tussle after school over who got to play before mom or dad got home and booted us off of it.

As I grew up, my interests drifted away from gaming, and toward reading. Then a few days ago, my friend showed me Super Mario on his phone. And just like that, I was hooked on games again.

A thought occurred to me in that moment: why not create a game? Now that I’m learning to code with Free Code Camp, I just might be able to create a basic game. But I had no clue where to start. So I started googling.

I found out about canvas API, and how it could be used to create basic games. I took Udacity’s HTML5 Canvas course. It took me three days to finally wrap my head around the concepts of canvas.

After the course, I still felt I needed a tutorial to teach me how to build a game from the scratch step-by-step, so I followed one. This revealed to me that I was still lost on some of the fundamentals of Object Oriented Programming, so I found another course on Udacity for Object Oriented JavaScript.

This was pretty dense, and took some time to digest. I had to watch some videos twice to understand them. But eventually, I finished watching all the videos, and came to the last chapter where you finally create a game. The good part about this course was that they provided a game framework already.

The game was called “Frogger”, where a sprite would have to cross a path full of bugs without colliding with any of them. The sprite could also collect gems to score extra points.

To begin with, I forked their GitHub repo. There were files already created — like when using a generator like Yeoman — and the JavaScript was divided into three files: app.js, engine.js and resources.js. All I had to do was fill in the pre-written functions. Since these functions were already named, I got a fair idea of which arguments to pass and what loops to create.

There are three important aspects to any game:

1. The game loop — it keeps repeating a process, so that the game won’t stop unless you call the function to stop.
2. Rendering — taking cues from the back end works and showing sprites on the front end (using canvas, in this case).
3. Updating — updating the positions of the sprites according to the specified moves.

This might seem easy for someone who has been coding for years, but starting off fresh required a lot of patience.

After quite a bit of brainstorming and fixing bugs, the game worked. Even though it was quite basic, the sheer joy I felt having created a game was immense.

Here’s what my game looks like:

And here’s my code on GitHub:

surbhioberoi/frontend-nanodegree-arcade-game
_Contribute to frontend-nanodegree-arcade-game development by creating an account on GitHub._github.com

This game can be improved in a number of ways, such as by using random inputs. Here, I’ve hard-coded the positions, which is not a good practice. I am learning to do things in a better way, and the first step is acknowledging that a better way exists.

Over the weekend, I practiced Canvas some more, and it was fun! I created simple things on JSfiddle — just anything that popped into my head that could use canvas.

I wanted to create something more now. I had heard about Conway’s Game of Life. Initially, I thought that it would be really hard to create it. Despite my skepticism that I could pull it off, I just started thinking about it.

There are two very important things about coding that I learnt after making many silly mistakes: Never never panic! Everything is doable — just find out how. And never begin writing code straight away. Take time, think, sketch out your data and functionality on a sheet of paper. Try to solve the problem manually first, like you would do without a computer. If you follow this approach, writing code should always be the last step, for it’s important to know what to code first.

In my notebook, I wrote my functions, data, and what I thought would be my inputs. I created the canvas first, then proceeded to create the grid for the Game of Life.

Honestly, it’s frustrating when something does not work how you expect it to, but when it eventually works, all the irritation was worth it. It feels good to create things, and even better when those things are playable games.

The challenging part of creating this game was figuring out how to make the grid area clickable. This really worked me up, but I finally figured out a way: using offset coordinates.

Here’s what The Game of Life looks like:

And here’s my code on GitHub:

surbhioberoi/GameOfLife
_GameOfLife - Conway's game of life_github.com

The problems that I often faced when creating something new was the fear that I wouldn’t be able to do it. I kind of overcame this fear by learning to create games.

Also, I thought that rendering the back end on the front end was the hardest part, and it genuinely scared me. But now I’m getting past that challenge, as well.

I’ve found creating games to be the most fun way of practicing programming, because I’ve always loved playing them. Games have helped me learn programming in an entertaining way, and that I think is the best way to learn anything new.

HTML5 Canvas is really awesome, and once you get a hang of it, it is convenient to use. It’s quite fascinating how you can create so many things with just this one element.

Now, I don’t know whether you like playing games. If there’s something that you enjoy more, just try to create that. When you create something that you actually like, you can overcome the fear of not being able to create it. It will still be hard, but you’ll have the benefit of enjoyable perks along, like having a new game to play afterward. And the best part — the sense of accomplishment — will always be there waiting for you, no matter how long the creative process takes.

Originally published at surbhioberoi.com.