A Game Development Guide for DOM Developers -02. Flying Birds

Warehouse address: github.com/haiyoucuv/W…

Introduced concept: use animation to change display object properties

Animation is an important part of a game, and without it, the game would be boring

This section creates a simple KeyFrame animation to understand the animation in the game

Add an animation to the style tag

@keyframes bird-fly {
    0% {
        top: 50%;
        transform: scale(1.1) rotate(45deg)}50% {
        top: 30%;
        transform: scale(1.1) rotate(45deg)}100% {
        top: 50%;
        transform: scale(1.1) rotate(45deg)}}Copy the code

Apply the CSS animation we just wrote to our Bird

#bird {
    [...].
    
    / * * / animation
    animation: bird-fly 5s infinite;
}
Copy the code

After a bit of manipulation, we got ourselves a live bird but this way seems impossible to operate freely think about king of Glory, how should your hero send the tower? The diagram below: