You can convert GIF images into sprite sheets on this website.
I used a sprite sheet consisting of Pikachu movements as depicted in the figure below:
As the canvas background image:
The HTML <canvas> element is used to draw graphics on a web page.
The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph, but through WebGL it allows 3D shapes and images to be displayed. HTML5 Canvas also helps in making 2D games.
- Do not forget to set images' display properties to none to avoid their appearance on the web page except the canvas element.
- Define the canvas element and context - canvas.getContext("2d").
- Define the game width and game height.
- Set the index variable as '0'.
- Define the properties of Pikachu - width, height, and position.
- Define the movements consisting of the selected animated part on the sprite sheet using a multidimensional array.
- 'sx' and 'sy' refer to the starting point coordinates.
- 'px' and 'py' refer to the ending point coordinates.
- In the draw() function:
- Clear the canvas.
- Draw the background image depending on the game width and game height.
- Draw the selected movement - the area between the starting and ending point - depending on the index variable.
- Increment the index variable.
- If the index variable is greater than the length of the movements array, set the index variable as '0'.
- To call the draw() function every second to create new frames, use the setInterval() function.