Once I was thinking about making a free browser game in the same style as the old games Fallout 2, Arcanum and Commandos 2. I used mainly HTML, CSS and Javascript.
In this video, I will show you how I created animation using Javascript and CSS in a browser game. I first created the animation using properties and then optimized it. Also shown here is an example of a Pathfinding Mechanism (A* Algorithm) for character movement.
To draw the character and level, several layers of Canvas and DOM elements were used. The following properties were used for animation: Keyframes, Canvas, CSS Animation, Sprite Animation.
And for the global engine loop I used requestAnimationFrame.
The engine works on all modern browsers. Recording was done on Google Chrome
Music from: https://mixkit.co/
#cssanimation #browsergame #webdevelopment #gamedevelopment #javascriptanimation #javascriptengineer #gameengine #javascripttutorial #jstutorial #csstutorial #htmltutorial #webgame #fallout2 #arcanum #commandos2 #isometricview #csskeyframes #keyframes #cssdesign #gamedesign #gamedesign #canvaspainting #canvastutorial #astaralgorithm #pathfinderrpg
source
2 comments
This is so awesome!
source code???
Comments are closed.