All you need to make HTML 5 Games #1. Isometric Board Game Tutorial

Here is a tutorial for everyone to be able to make an isometric board game on the HTML 5 Canvas with JavaScript and ZIM. This follows the Medium tutorial here: https://levelup.gitconnected.com/make...

ZIM is a general canvas framework at https://zimjs.com

00:00 example of iso game
02:01 website https://zimjs.com canvas framework for creativity
02:29 article on medium about iso games
03:34 grab the code for VS Code (or Atom.io) on https://zimjs.com/code
05:24 extension 'open in browser' to view live in browser
06:17 information about https://zimjs.com/editor where you can save ZIM files
06:51 starting with template: remove Circle() code in VS Code
08:23 start making the game import game module zim_game module
11:00 parameters for the https://zimjs.com/docs board
12:02 importing assets : pictures
13:13 basic example with new Person() and new Tree()
19:11 setting the background color
20:21 color of the orb tile circles with series of color
27:05 lanterns code with colors
30:33 information about new Container()
35:34 wall code
41:03 keyboard movement with new Pane() to activate function
46:30 board.addKeys() method
48:49 path finding with additional script easystar
49:25 login and save isometric game https://zimjs.com/editor and add easystar script
50:06: path finding which will work for most games
57:21 lantern interaction with new Emitter() https://zimjs.com/016/emitter.html
01:08:30 example with player next to latern
01:13:52 wrong answer of color zogr()
01:20:51 add a new Timer()
01:22:33 add a stop for the timer
01:23:51 add LeaderBoard (not in this game) https://zimjs.com/zong as pong game
01:24:48 Final touches info about CORS on images https://zimjs.com/tips#CORS
01:28:24 assets new Pic() in VS Code
01:31:30 assets new Pic() in https://zimjs.com/editor
01:33:25 player new Person() replaced by new Pic() in container to be able to flip
01:38:12 flipping code for the player
01:40:06 logo and fonts
01:41:40 lantern picture
01:44:10 conclusion with other examples on https://zimjs.com/examples
01:46:10 code in FIVE minutes
01:47:10 more ZIM articles on Medium https://zimjs.com/medium

Thanks Karel Rosseel for the TimeStamps - here and anywhere you see them!