Now, for the game we will be developing (a 2D platform game) all you need to do, is the exact opposite of reactivity, when creating 2D JavaScript games and 2D HTML5 games like in this guide.
Those who are used to the lifecycle of frameworks like React or Vue will know that when you update a variable in the state object, the component will then re-render with the changes made to the state object, trying to be as efficient as possible, by only replacing the nodes that have been affected. Let’s begin with some concepts! Lifecycle Very briefly, the kind of game we will be creating will be a platformer, a little bit like flappy bird. Personally, I have used this with React, React Native and VanillaJS.
So after you will not only be able to develop games with JavaScript and HTML5, you will be able to say, with confidence, that you can create React Hook games too!Īfter you have done with this tutorial on how to develop 2D JavaScript games and 2D HTML5 games, you will be able to take the concepts and apply it to any framework you want. If you don’t know React or React Hooks very well, you don’t need to worry as I will be explaining what each part is doing (even the React). We will be using React, React Hooks, JavaScript, CSS3 and HTML5. So in this JavaScript game / HTML5 game tutorial, we will be using a few tools I live by, all of which are built for normal web development.
I highly recommend starting off with 2D (and this tutorial!). I keep mentioning 2D games specifically, this is because 3D games, whilst similar, do have another layer of complexity with things such as Unity. Many people might also mention specific libraries known as game engines, to help you develop the physics, and other things you may need in your game, we won’t be using any here, we will be keeping it nice and simple.įor this reason, in this step by step guide, we will be using regular HTML5 elements in conjunction with JavaScript to build our 2D game. Whilst this is performant, it is not the easiest to understand in comparison to standard HTML5 elements like a div or a span. Many people would now start talking about how to use canvas, and combine it with JavaScript. If you are used to using a framework like React you will have to change the way you may normally write your applications to allow for game development, but I will help walk you through this. It’s not that much different when creating simple 2D JavaScript games or 2D HTML5 games. We usually use these frameworks to make making UI’s or web apps with animations, transitions, and event listeners nice and easy. We are all used to coding in JavaScript, HTML5, React, React Native, VueJS, AngularJS, VanillaJS, and so on…
If the match wasn’t made, we instead leave the game board alone and add true to theįlippedIndexes array, triggering a flip reset.It’s outside our usual realm of coding so is almost unknown territory, but good news, it’s not as hard as it may seem!
Variable is ready, we update the game and set the third flippedIndexes value to be To update the flipped values of those cards in the game array. If the match is made and the colorIds of each card are the same, we clone the game board The colorId is an index 0, 1, 2, etcįor the color of the card which we generated at the beginning of the game. When two cards are flipped they will either be a match or not, and we can check for that.įirst we set a boolean variable match to check whether the indexes of the cards weįlipped have the same colorId in the game board.