All you need to make HTML 5 Games #2. Side-scroller Game Tutorial
Channel: ZIM LEARN
Date: 17/04/2024

Here is a tutorial for everyone to be able to make a side-scroller game on the HTML 5 Canvas with JavaScript and ZIM.  This follows the Medium tutorial here:  https://levelup.gitconnected.com/make-html-5-games-side-scroller-game-tutorial-79e4fe894c8f?sk=375873598baceb3668cad962a320eb2f

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

00:00 start game Lost Olive ZAPP at https://zimjs.com/zapp/Z_UP99E
00:01 olive following mouse with MotionController ZAPP https://zimjs.com/zapp/Z_8YJK6
01:19 game made in ZIM framework https://zimjs.com
02:32 article on https://zimjs.com/medium
03:14 free open source online ZIM editor https://zimjs.com/editor
04:02 simple example https://zimjs.com/zapp/Z_UAVR4
04:23 VS Code editor
04:55 start with code template https://zimjs.com/code
07:05 FIT with cdn/016/zim module script
07:44 circle code into https://zimjs.com/editor
08:44 adding title in html
09:56 adding zim_physics and zim_pizzazz modules
12:12 adding olive circle
16:44 adding bounciness DUO to circle and ramp addPhysics(false)
19:20 adding ramp - rectangles need registration point .reg(CENTER) for physics
22:40 interactive example of ball with ramp
23:12 find the code in the docs https://zimjs.com/docs
25:44 circle "olive" color set to new RadialColor()
28:44 ZIM coding tutorials in FIVE 5 minutes https://zimjs.com/five
29:12 physics set to zero 0 no gravity
31:33 physics parameters olive impulse, (force, spin,) and ramp torque
34:58 ZAPP Criss-Cross ZAPP: https://zimjs.com/zapp/Z_D7N7M
36:25 FIVE Slingshot AngryBirds https://dev.to/zimlearn/angry-birds-like-physics-game-in-15-minutes-with-zim-9al
36:30 ZAPP DPad https://zimjs.com/zapp/Z_YUEAG info https://zimjs.com/ten/dpad3
37:21 FlappyBird https://zimjs.com/certificates/game.html
38:43 adding a tree rectangle with circles
40:41 F12 console to check for zog() or errors
42:05 using .top() or .bot() and .ord()
43:37 adding .reg(CENTER) to tree rectangle
43:55 placing circles with .loc(x,y).place() to see the coordinates in console
46:10 follow olive when going forward with keyboard + info keyboardAcces for https://zimjs.com/editor
48:41 Stage moves because to control olive we need a physics 0,0 zero point
49:50 Backing pattern series https://zimjs.com/docs.html?item=makePattern
52:08 setting the boundary with to backing.width + example with .drag()
53:24 olive.follow() horizontal when going to right side with keyboard
56:32 Pane with start message has a STYLE
01:07:52 loading example https://zimjs.com/editor/view/Z_UP99E
01:09:22 example code for upright rectangle code for sprites
01:10:32 example side-scrollers without physics https://zimjs.com/ia
01:12:06 PATHS hats made with https://zimjs.com/paths
01:12:53 ZAPP example Cat Food https://zimjs.com/014/cat.html
01:14:14 interactive example code HAT new Blob({interactive:true})
01:15:36 HAT code with Blob({points:, interactive:false})
01:17:44 JUMPING + emitter : on contact ground, and keyboard and puff
01:25:04 Tiling multiple hats to jump on
01:33:42 ANIMATE with wiggle() the hats called wiggler SetSleepingAllowed(false)
01:41:01 Ticker hat.body.loc().rot()
01:44:46 Pane need a hat pauseAnimate at the start Pane
01:46:00 Falling side property
01:48:26 GAME OVER: Pane when contact bottom side of boundary walls
01:52:20 END of the game: falling in glass
01:57:42 buoyancy when olive is in glass floating in liquid
02:03:27 WINNING function winCheck with new Emitter()
02:08:07 put the hats back in place
02:10:48 conclusion example droid https://zimjs.com/droid/ and droid2 https://zimjs.com/droid2/
02:11:31 more games at https://zimjs.com/games
02:12:08 join us at https://forum.zimjs.com and https//zimjs.com/discord