In the previous post i wrote about creating different shapes using css tricks. One of the shape was “pacman”which inspired me to make this script. I created pacman shape with css and then thought lets move this pacman around the screen. This is quick and dirty script so there might be code repetition, less reuse of code and so so so….so lets start how to create pacman like animation using jquery css
At first i was trying to animate this pacman using jQuery animate method but seems like jquery doesnt support animate method for borders. So i used simple jquery timers and jquery css() method, its little hectic but we have find another way to move on and get the work done.Its really easy to move pacman object just one timer to move it around and one “direction” variable to track the direction and change it accordingly. Like if pacman object is moving from left to right then next valid movements will be only downward or upward, there cannot be sudden 180 degree direction change like left to right then suddenly right to left.
At first i was trying to animate this pacman using jQuery animate method but seems like jquery doesnt support animate method for borders. So i used simple jquery timers and jquery css() method, its little hectic but we have find another way to move on and get the work done.Its really easy to move pacman object just one timer to move it around and one “direction” variable to track the direction and change it accordingly. Like if pacman object is moving from left to right then next valid movements will be only downward or upward, there cannot be sudden 180 degree direction change like left to right then suddenly right to left.
Have a look at the demo and let me know how is it ??
View Demo
Hello, plz provide me the source file of the pacmn animation plz. thx
Just check the “view source” and all the code is there.