Small example showing how you can make game sprite animations using CSS with Javascript movement.

Hi there, I'm Björn Hjorth 👋

I like combining the web and game development, if you like what you see please do not be a stranger and say "Hi" on Twitter @colorsofcode

Edit Demo on StackBlitz ⚡️ · Report Bug

About The Project

Small example showing how you can make game sprite animations using CSS with Javascript movement.

All of the game logic happens in the game.js file.

All of the CSS animation (exept states) is in the duck/duck.styles.css

You use keyboard A W S D navigation to move around

PS. the images are hosted on firebase to make the demo work on StackBlitz

Prerequisites

• Node
• Npm

Getting started

1. Clone the repo

   git clone https://github.com/colorsofcode/javascript-game-development-css-amimation.git

2. Move to the new directory

   cd javascript-game-development-css-amimation

3. Install development dependencies

   npm install

4. Start up the development environment

   npm run dev   
   

Contact

Björn Hjorth - @colorsofcode

Homepage: https://colorsofcode.com

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgments

To all the indiedevs that I have connected with over the years.