All you need to make HTML 5 Games #3. Falling Game Tutorial
Channel: ZIM LEARN
Date: 19/04/2024

Here is a tutorial for everyone to be able to make a falling game where you catch and avoid objects on the HTML 5 Canvas with JavaScript and ZIM.  This follows the Medium tutorial here:  https://medium.com/gitconnected/make-html-5-games-falling-game-tutorial-70c3db2d870b?sk=1e9f66257e7112d7cc7c52c2a2a4c6ac

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

00:00 start playing LANDSCAPE game ZAPP https://zimjs.com/zapp/Z_RJ6XC
01:14 ZIM is canvas framework for creativity https://zimjs.com/games
03:54 article on https://zimjs.com/medium
04:59 simple ZAPP falling game https://zimjs.com/zapp/Z_29RW4
05:00 FIVE falling game https://zimjs.com/five/falling.html video https://youtu.be/CU5uxSXlL4g
05:01 FIVE score + lives https://zimjs.com/five/score.html video https://youtu.be/Gkigr3hodvM
05:32 coding in VS Code or ZIM Editor https://zimjs.com/editor
05:55 PORTRAIT ZIM game https://zimjs.com/zapp/Z_9XMZ7
06:24 set game mode on simple falling ZAPP https://zimjs.com/editor/code/Z_29RW4
08:40 copy CODE template to VS Code https://zimjs.com/code
11:30 hidden code above and below into ZIM editor
12:44 START tutorial with changing module tot cdn/016/zim_game and F.color=black;
15:40 adding a new Pane()
17:30 ZIM is very simple to use also for kids https://zimjs.com/kids because has half of code of other libraries
19:25 Pane().show(playGame) function with keyboardAccess:true to enable the keyboard
22:37 Pods info: circles falling objects in an interrval
23:20 ZIM Ticker do only an S.update() when there is a change necessary to not drain battery
24:23 Pods do not need the ZIM log zog("playing game!")
26:06 when pane closes starts of the function playGame()
27:19 DisplayObject pods in a new Container()
28:01 ZIM interval in seconds (Javascript setInterval is reversed code in milliseconds)
31:09 Pod = new Circle(radius,color) with different colors in an array
33:06 pluck a color from an new Circle(radius, [array])
33:43 interval({min, max}) to pick a time for the random falling pods
36:58 pod.loc(x,y,container) on random horizontal x position
37:55 pod.animate() parameters
39:33 example falling pod circles and disappearing with target.dispose()
40:29 adjusting the y in loc(x,y) animate({props{ {y:value, alpha:0, scale:10, color:red,}, rewind:true}
43:47 chaining the time:3 to {min, max} so falling with different weights
44:41 difference between 100 and relative "100" animate{props:{x:String(rand{-100,100}})
48:41 Paddle new Rectangle() controlled with ZIM MotionController() in new Boundary() Stage
52:50 Paddle examples "mousemove", "gamestick" examples at https://zimjs.com/controller
55:13 Paddle moving with MotionController "keydown" settings
56:47 new Indicator() info hearts are the lives of the game
57:37 Indicator code settings fill:true, indicatorType: "heart"
59:30 new Timer().pos() info about difference .loc() and .pos()
01:01:55 HitTest pixel possibilities https://zimjs.com/docs.html?item=hitTestPoint
01:05:07 ZIM Tips subjects with info at https:///zimjs.com/tips
01:06:18 at the GOLD bars TIPS SKOOL KIDS VIDS BEAM https://zimjs.com/#gold
01:07:00 HitTest code Ticker checking if paddle catches the pods to change the indicator.selectedIndex
01:13:32 WINNING if all indicators hearts are red, clear the interval, stopAnimate(), timer.stop()
01:18:32 show pane with your time with new Pane().show()
01:20:46 TITLE is a new Label() with font from Google with "gf_name" https://fonts.google.com
01:23:05 null or undefined
01:24:27 ZIM DUO technique makes it possible to choose the order of the parameters
01:26:47 using STYLE technique to give all items same parameters
01:33:23 UNIQUENESS pod.wiggle()
01:37:31 making circles around the pod to make it more visible, hula hoops
01:42:09 add free ASSETS pictures/sprites you can find at https://zimjs.com/assets
01:45:01 lazy loading Pictures new Pic("https://") is can be used also in ZIM KIDS SLATE https://zimjs.com/kids/slate
01:46:04 CORS problems with assets can be solved at https://zimjs.com/tips#IMAGES
01:47:34 CONCLUSION extra game PEACE shooting drones to get silence https://codepen.io/danzen/pen/dybEOeV
01:48:44 extra articles on medium https://zimjs.com/medium
01:51:49 other GAME TUTURIALS, to follow on https://zimjs.com/youtube