In this series, we will go over how to create a reusable TypeScript class that can be used to build the game Connect Four, and in a future series we will see how we can use this library to create implementations of the Connect Four game for the CLI and the web.
In part 1 of this series, we are going to review the rules and game play of the game Connect Four and we will start to build out the initial ConnectFour class by adding the properties and methods that will be needed.
Before we start learning about HTML5 Canvas and start writing any code, the first thing we need to do is setup a development environment that will allow us to easily edit our files, serve our static files on a local web server, and view our changes in real time as we make them.
For this series, we will be trying to keep things as simple as possible, so we will not be using things like node, npm, webpack, vite, etc.
Today, I wanted to introduce a new series that I will begin working on that will be focusing on creating games with pure JavaScript and rendered on HTML using the HTML Canvas element . This series will focus on step by step tutorials for learning the basics of working with the HTML Canvas elements for game development and then we will move on to creating games.
As we progress through the series, we will be building blocks of re-usable code that you will be able to use to create your own games.
Welcome everyone! This is the first of many posts that will cover the topic of game prototyping and we will be putting game prototyping into practice by building some basic games in HTML5 using TypeScript.
What is game prototyping? In game design, game prototyping is the process by which a game designer builds the simplest version of their game in order to test their idea and get feedback. A good prototype will convey the mechanics of the game the designer wants to build and it will allow others to test the gameplay.
Update: If you would prefer to watch a video on this content, you can see the content here on YouTube: Developer Bytes - Generating Templates With Plopjs.
In one of my recent developer bytes articles, I discussed with you some of the benefits of the micro-generator framework tool Plop and how I used this tool in my day to day. In this article I want to expand on the example the example I shared in the last article.
GitHub Actions is a fantastic CI/CD platform that allows you to set up custom workflows to do a variety of tasks, anything from running unit tests anytime there is a pull request to building your web application and deploying that application to your hosting service.
If you are not familiar with CI/CD, this is a method to allow you to frequently deliver software by introducing automation into your development process. The main concepts for CI/CD are: continuous integration, continuous delivery, and continuous deployment.
As a developer, one of the things I strive to do is reuse my code across my various projects when possible, and one of the best tools available to do this is the npm registry. If you are not familiar, npm is a package manager for the JavaScript programming language and npm is the default package manager for the Node.js runtime environment. npm is a free registry that allows you to publish both public and private npm packages that can be shared with other npm users.
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.
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:
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.
