Creating A Memory Game Class in TypeScript

Intro

The purpose of this tutorial is to show you how to create a simple Memory Game class in TypeScript that will contain all of the core game logic for building a simple Memory Game. For this tutorial, we will be testing our game logic using the browser developer console. However, in future tutorials, I will be showing you how we can take this class and create a basic Memory Game using HTML5 game frameworks like Phaser and Kontra.

New Learn JavaScript Course

JavaScript 101 Course

It has been awhile since any new content has been published to my blog, but today I am happy to announce that I have released a brand new course on learning JavaScript that you can watch for free on YouTube here: JavaScript 101


Over the past year and a half, I have been working as a freelancer for Zenva (GameDev Academy and Phaser GameDev Tutorials) and I had the opportunity to create some video courses for them. At first I was not sure if I would enjoy making that type of content, and I found that I really enjoyed making video tutorials. As a result, for some time I have been wanting to publish some content myself, and in addition to this, I have been wanting to start a channel on YouTube and start publishing video content there.

Adding Gitment to your Hugo blog

In my last post, I talked a little bit about Gitment and how you could use that library for using GitHub Issues for comments on your blog. In this post, I am going to share with you how you can add Gitment to your Hugo blog. If you are not familiar with Gitment, it is a small JS library that leverages GitHub Issues for storing comments on each post.

Some key things to note about Gitment:

Switching to GitHub Issues for comments

With the new year, I decided to explore new ways of handling comments on my blog. In my research, I happened to come accross Gitment . Gitment is a small JS library that leverages GitHub Issues for storing comments on each post.

Some things to note about Gitment:

  • Each post will have a seperate matching GitHub Issue.
  • Users have to be logged into GitHub to post a comment. Even though this is an ask on the users for leaving a comment or question, signing up for GitHub is easy and free. I also figured the audience for my post may already have a GitHub login.
  • Each comment will be saved as a comment on the matching GitHub issue.
  • Gitment will automatically display the form for creating comments, and it will also display the relevant comments for each post.

In addition to this, I also came accross utterances , which is a lightweight comments widget that is build on GitHub Issues.

New Year, New Goals

It has been more than a year since I have posted any content to this site, and with the new year beginning I want to remedy that. Looking back, 2019 was quite a busy year and this blog just kept being put on the back burner. Between taking classes for my Masters Degree, the promotion at work, the side work I was doing for Zenva, GameDev Academy and Phaser GameDev Tutorials, and the time with my wonderfull family I had a little time for much else.

Using ES6 With Phaser 3

Phaser 3 offers a fantastic Webpack project template that makes it easy to start creating games right away. This template uses Webpack Dev Server , which provides live reloading while working on your game. It will also bundle all of JS files into one file once you are ready to deploy your game.

However, one thing that is missing from this template for me is support for ES6 and other newer features of JS. The great thing about the template is, we can easily extend it to include Babel, which will compile our JS code into backwards compatiable version of JS that is supported in curretn and older browsers.

Creating A Phaser 3 Template Tutorial - Part 1

My new Phaser 3 tutorial on creating a Phaser 3 template is finally live on Game Dev Academy.

In this tuorial, I show you how to create a Phaser 3 template that you will be able to extend and reuse in future Phaser 3 game you work on. In the tutorial, I show you how to:

  • extend the basic Phaser 3 template
  • adding a Boot scene
  • adding a Preloader scene

In part 2 we will wrap up the tutorial by covering the following topics:

Phaser Progressive Web Apps Tutorial

My new Phaser 3 tutorial on creating an offline first game in Phaser 3 is finally live on Game Dev Academy.

In this tuorial, I show you how to turn your Phaser Game into a Progressive Web App. In the tutorial, I show you how to:

  • add a service worker
  • cache assets
  • manage your cache assets
  • how to allow users to add your game to their home screen

You can checkout the tutorial here: https://gamedevacademy.org/phaser-progressive-web-apps-tutorial/

Site Updates

After working with the Hugo static site generator, I’ve decided that I wanted to move my blog over to this template.

For the most part, this should be an easy transition since all of the blog files were already Markdown files, but with the transition, there could be some small issues.

Hopefully this will be a smooth transition, and I hope you like the new site design!

Create a Dialog Modal Plugin in Phaser 3 – Part 2 Tutorial

My new Phaser 3 tutorial on making a dialog modal plugin in Phaser 3 is finally live on Game Dev Academy. This is the second part of the tutorial.

In this tuorial, we pickup were we left off in the first tutorial we focus on the following:

  • adding logic to for a close button on the dialog window
  • add logic to show/hide the window
  • add logic to show dialog
  • add logic to animate the text

You can checkout the tutorial here: https://gamedevacademy.org/create-a-dialog-modal-plugin-in-phaser-3-part-2/