HTML5 provides capabilities for building games in a cross-platform and lightweight manner without dependencies. It includes powerful APIs like the canvas element for 2D drawing and WebGL for 3D rendering. Common elements of HTML5 games include using <canvas> to define a drawing area, a 2D or 3D API to render shapes and objects, physics engines to simulate movement and interactions, and technologies like local storage for data caching. Tools like game engines, libraries, and bundlers can help develop HTML5 games.
2. Intro To HTML5 (Games)
● Simple Concepts
● Easy integration
● Flexibility
● Powerful Api (canvas)
● Cross-Platform
● Lightweight
● No dependencies
3. <canvas>
● canvas is a rectangular area on an HTML page.
● Interactivity — any events listeners that can be used in JavaScript can be
incorporated with canvas drawings
● Fast — because canvas uses immediate mode, the generation of graphics is quicker
then methods that use retained mode which bogs down browser memory
● Support—it can be used with virtually any modern browsers
Code Sample :
<canvas id="myCanvas" width="200" height="100"></canvas>
4. 2D API
● 2D API has the possibility of creating basic shapes, so-called primitives.
exemple:
5. 3D API ( WebGL )
● WebGL is an API for 3D rendering in an HTML canvas in browsers that support it without
the use of plug-ins.
6. Physics engine
● Nature of cause ,
● Velocity,
● acceleration
● make your Environment ready
It’s all about vectors !
7. 3D components
● Set the Scene : camera and a renderer
● Making a Mesh : Spheres, Planes, Cubes, Cylinders ...
● Materials : Basic, Lambert , Phong , textures — applied to meshes
● Lights
● Render
● Common Object Properties : geometry (which contains the vertices and faces) —
materials
● Polygons (faces, vertices, edge)
8. Technologies
Local storage :
● Cache or store data on a user’s local device
Web Assembly :
● low-level bytecode for the web that
works alongside with javascript
WebGPU :
● Not implemented, still a future standard
● Will enable modern 3D graphics and computation
capabilities in web browsers
Gamepad API :
● Allow controller input in web games (e.g.Xbox
controller)
PhoneGap :
● Allow (HTML5) to be converted to an android app
9. Tools
Full games engines :
Useful JavaScript Libraries :
2D Rendering
3D Rendering
JavaScript module bundler :
JavaScript checking library :
