[LINK TO COURSE](https://morganpage.teachable.com/p/react-learn-modern-react-with-hooks-by-creating-a-roguelike)

Ever wanted to learn **React** and **Hooks** but found traditional courses a little boring & long?
Jump straight in by coding a **roguelike** game and learn the fun way!

You will get experience using:

- React
- Hooks
- Javascript
- ES6
- Classes
- Arrays
- Functions
- Objects
- Node.js

Coding a roguelike game is  a great way to learn the fundamentals of React, Hooks and useful generic game concepts like movement, combat and inventories.

The game includes:

- Movement
- Input handling
- Procedural generation
- Collision detection
- Inventory
- Combat log

[LINK TO COURSE](https://morganpage.teachable.com/p/react-learn-modern-react-with-hooks-by-creating-a-roguelike)


How to learn modern react with hooks by creating a roguelike.

large_React Rogue - landscape.png

medium_React Rogue - landscape.png

small_React Rogue - landscape.png

thumbnail_React Rogue - landscape.png

React Rogue - landscape.png

Learn Modern React With Hooks By Creating A Roguelike

[LINK TO COURSE](https://morganpage.teachable.com/p/create-an-inventory-crafting-system-in-javascript-with-phaser-3)

If you need to practise your javascript... If you want to learn some new ES6 stuff... If you have ever wanted to create an inventory and/or crafting system for your game... Then this course is for you!

You will get experience using:

- Inventory systems
- Crafting systems
- User Interface creation
- ES6
- Classes
- Arrays
- Objects
- Functions
- Phaser 3

Adding an inventory and crafting system to a survival game is fun way to practise Javascript and Phaser.

The game includes:

- Animations
- Basic Enemy AI
- Audio
- Mouse & Keyboard Input Handling
- Advanced Matter Physics

Full source code is included.

![inventory.gif](https://res.cloudinary.com/morganpage/image/upload/v1610373845/inventory_ae95b2d812.gif)

[LINK TO COURSE](https://morganpage.teachable.com/p/create-an-inventory-crafting-system-in-javascript-with-phaser-3)

Create An Inventory & Crafting System In Javascript With Phaser 3

large_Inventory & Crafting System.png

medium_Inventory & Crafting System.png

small_Inventory & Crafting System.png

thumbnail_Inventory & Crafting System.png

Inventory & Crafting System.png

[LINK TO COURSE](https://morganpage.teachable.com/p/practise-modern-javascript-by-coding-a-card-game)


If you need to practise your javascript... If you want to learn some new ES6 stuff... If you have ever wanted to create a card game...

Then this course is for you!

You will get experience using:

- Javascript
- ES6
- Classes
- Arrays
- Functions
- Objects
- Phaser 3
- Figma
- Bitmap Fonts (BMFont)

Card games are a great way to learn some javascript and phaser fundamentals.

The game includes:

- Dragging and dropping
- Tweening
- Importing graphics and fonts
- Buttons

![cardgame_128.gif](https://res.cloudinary.com/morganpage/image/upload/v1610372364/cardgame_128_17000b0832.gif)


[LINK TO COURSE](https://morganpage.teachable.com/p/practise-modern-javascript-by-coding-a-card-game)

Practise your modern javascript (ES6 and above) by coding a card game

large_Coding a Card Game.png

medium_Coding a Card Game.png

small_Coding a Card Game.png

thumbnail_Coding a Card Game.png

Coding a Card Game.png

Practise Modern Javascript By Coding A Card Game

[LINK TO COURSE](https://morganpage.teachable.com/p/create-a-survival-game-in-javascript-with-phaser-3-in-2020)

If you need to practise your javascript... If you want to learn some new ES6 stuff... If you have ever wanted to create a survival game...

Then this course is for you!

You will get experience using:

- Javascript
- ES6
- Classes
- Arrays
- Functions
- Objects
- Phaser 3
- Tiled
- Animation
- Spritesheets

Creating a survival game is fun and a great way to learn some Javascript and Phaser fundamentals.
The game includes:

- Animations
- Basic Enemy AI
- Audio
- Mouse & Keyboard Input Handling
- Advanced Matter Physics

Full source code is included.

![survive_512.gif](https://res.cloudinary.com/morganpage/image/upload/v1610372076/survive_512_957a27e25b.gif)


[LINK TO COURSE](https://morganpage.teachable.com/p/create-a-survival-game-in-javascript-with-phaser-3-in-2020)

Create A Survival Game In Javascript With Phaser 3 In 2020

large_Survival Game (1).png

medium_Survival Game (1).png

small_Survival Game (1).png

thumbnail_Survival Game (1).png

Survival Game (1).png

## How to get started quickly with a new phaser 3 project

Procrastinating about starting up a Phaser project? Must install node, must download starter project... nah...
Create 2 files, index.html & MainScene.js, paste in the html and js code below. Done!

index.html
```
<!DOCTYPE html>
<html>
  <head>
    <title>Phaser Quick Start</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.23.0/phaser.min.js"></script>
  </head>
  <body>
    <script type="module">
      import MainScene from "./MainScene.js";
      var config = {
        type: Phaser.AUTO,
        width: 512,
        height: 512,
        backgroundColor: '#999',
        physics: {
          default: "arcade",
          arcade: {
            gravity: { y: 200 },
          },
        },
        scene: [MainScene],
      };
      var game = new Phaser.Game(config);
    </script>
  </body>
</html>
```

MainScene.js
```
export default class MainScene extends Phaser.Scene {
  constructor(){
    super("MainScene");
  }

  create(){
    let graphics = this.add.graphics();
    graphics.lineStyle(8, 0xff0000);
    graphics.strokeCircle(256, 256, 128);
  }
}
```

How to get started quickly with a new phaser 3 project

large_How to get started quickly with a new phaser 3 project.png

medium_How to get started quickly with a new phaser 3 project.png

small_How to get started quickly with a new phaser 3 project.png

thumbnail_How to get started quickly with a new phaser 3 project.png

How to get started quickly with a new phaser 3 project.png

Phaser 3 Quick Tips - Get Started Quickly!

Host Your Game Quickly!

Hosting my game, ok so I need to setup a git repo, some webhooks, a docker image, throw in some Kubernetes, buy some cheap hosting somewhere... nah...

1. Sign Up to [Netlify](https://www.netlify.com/) for free
2. Drag & Drop your project folder into the 'Sites' tab designated area
3. Done!

How to host your phaser 3 game quickly and easily.

large_How to host your phaser 3 game.png

medium_How to host your phaser 3 game.png

small_How to host your phaser 3 game.png

thumbnail_How to host your phaser 3 game.png

How to host your phaser 3 game.png

Phaser 3 Quick Tips - Host Your Game Quickly!!!

Below shows a typical use of the array method map. Note use of the arrow function. If the arrow function contains only one statement, the curly brackets and return keyword can be omitted as shown below. Unlike the foreach array method, map returns a new array so is considered a pure function since it does not alter the input array (users in this case).
```
const users = ['john','derek','tracey','anna'];
const maptorocks = users.map(user => user + " totally rocks!");
console.log(maptorocks);
```

Output will be:

```
[ 'john totally rocks!',
  'derek totally rocks!',
  'tracey totally rocks!',
  'anna totally rocks!' ]
```

How to use the javascript map() array method.

large_How to use the javascript map array method.png

medium_How to use the javascript map array method.png

small_How to use the javascript map array method.png

thumbnail_How to use the javascript map array method.png

How to use the javascript map array method.png

Javascript map() Array Method

Below shows a typical use of the array method includes.

Additionally a template literal is used below with a placeholder ${userJohnExists} adding to the terseness of the code. Note that back-ticks (`) are used to denote a template literal.

```
const users = ["john", "derek", "tracey", "anna"];
let userJohnExists = users.includes("john");
console.log(`John exists: ${userJohnExists}`);
```

Output will be:

```
John exists: true
```

How to use the javascript includes() array method.

large_How to use the javascript inclues array method.png

medium_How to use the javascript inclues array method.png

small_How to use the javascript inclues array method.png

thumbnail_How to use the javascript inclues array method.png

How to use the javascript inclues array method.png

Javascript includes() Array Method

Below shows a typical use of the For Loop.

Additionally a template literal is used along with a couple of conditional ternary operators.

Note that back-ticks (`) are used to denote a template literal.
```
for (let index = 10; index >= 0; index--) {
  console.log(
    `${index === 10 ? "Ignition sequence" : ""}  ${index} ${
      index === 0 ? "LIFT OFF!!!" : ""
    }`
  );
}
```

Ouput will be:

```
Ignition sequence  10
  9
  8
  7
  6
  5
  4
  3
  2
  1
  0 LIFT OFF!!!
```

large_How to use the javascript for loop.png

medium_How to use the javascript for loop.png

small_How to use the javascript for loop.png

thumbnail_How to use the javascript for loop.png

How to use the javascript for loop.png

Javascript for Loop

Below shows a typical use of the array method forEach. Note use of the arrow function. If the arrow function contains only one statement, the curly brackets and return keyword can be omitted as shown below.

Additionally a template literal is used below with a placeholder ${user} adding to the terseness of the code. Note that back-ticks (`) are used to denote a template literal.

```
const users = ['john','derek','tracey','anna'];
users.forEach(user => console.log(`Hello ${user}, welcome!`));
```

Output will be:

```
Hello john, welcome!
Hello derek, welcome!
Hello tracey, welcome!
Hello anna, welcome!
```

How to use the javascript forEach() array method.

large_How to use the javascript forEach array method.png

medium_How to use the javascript forEach array method.png

small_How to use the javascript forEach array method.png

thumbnail_How to use the javascript forEach array method.png

How to use the javascript forEach array method.png

Javascript forEach() Array Method

Tutorials on web and game development. Learn to create games using core web technologies like: javascript, html & css. Use modern javascript, ES6 & later including classes, array methods, arrow functions, destructuring, ES modules, template strings and more! Both vanilla javascript and frameworks like react, vuejs, svelte, nextjs are covered. Specifically for game development, phaser 3 is covered along with canvas, animations, AI, audio & physics.

Learn Modern React With Hooks By Creating A Roguelike

How to learn modern react with hooks by creating a roguelike.

January 9th, 2021

Author