Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Develop Game Using Pure CSS3 ?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 523
    Comment on it

    Hello all,

    Below is an example of pure CSS3 game using CSS3 animation. This example show efficiency of CSS3.

    Below is the sample of flying plane game.

    CSS:-

    * {margin: 0;padding: 0;}
    .board {width: 300px;height: 600px;margin:20px auto 0 !important;background: #0d2704;cursor: url(https://cdn3.iconfinder.com/data/icons/flat-icons-big-sized/64/plane-20.png),pointer;position: relative;overflow: hidden;}
    .board .enemy:hover {height: 600px;width: 300px;position: absolute;top: 0;left:0;z-index: 999;background: #000;overflow: visible;cursor:not-allowed;
        animation: animation 0s 0s linear infinite !important; -webkit-animation: animation 0s 0s linear infinite !important; }
    .board .enemy:hover:after{content: 'GAME OVER';display: block;text-align: center;top:240px;position: relative;}
    .enemy {height: 20px;width: 20px;position: absolute;top: -30px;left: 0;background: url(http://54.160.13.227/imgM/plane-20.png) no-repeat;color: #fff;}
    .enemy.eme2{left:40px;}
    .enemy.eme3{left:80px;}
    .enemy.eme4{left:120px;}
    .enemy.eme5{left:160px;}
    .enemy.eme6{left:200px;}
    .enemy.eme7{left:240px;}
    .enemy.eme8{left:280px;}
    .enemy.eme22{left:20px;}
    .enemy.eme33{left:60px;}
    .enemy.eme44{left:100px;}
    .enemy.eme55{left:140px;}
    .enemy.eme66{left:180px;}
    .enemy.eme77{left:220px;}
    .enemy.eme88{left:260px;}
    .board:hover .enemy {animation: animationt 1s 3s linear infinite;-webkit-animation: animationt 1s 3s linear infinite;}
    .board:hover .enemy.eme2 {animation: animationt 2s 7s linear infinite;-webkit-animation: animationt 2s 7s linear infinite;}
    .board:hover .enemy.eme3 {animation: animationt 700ms 6s linear infinite;-webkit-animation: animationt 700ms 6s linear infinite;}
    .board:hover .enemy.eme4 {animation: animationt 1s 2s linear infinite;-webkit-animation: animationt 1s 2s linear infinite;}
    .board:hover .enemy.eme5 {animation: animationt 3s 500ms linear infinite;-webkit-animation: animationt 3s 500ms linear infinite;}
    .board:hover .enemy.eme6 {animation: animationt 4s 1s linear infinite;-webkit-animation: animationt 4s 1s linear infinite;}
    .board:hover .enemy.eme7 {animation: animationt 5s 3s linear infinite;-webkit-animation: animationt 5s 3s linear infinite;}
    .board:hover .enemy.eme8 {animation: animationt 6s 5s linear infinite;-webkit-animation: animationt 6s 5s linear infinite;}
    .board:hover .enemy.eme22 {animation: animationt 3s 6s linear infinite;-webkit-animation: animationt 3s 6s linear infinite;}
    .board:hover .enemy.eme33 {animation: animationt 1s 8s linear infinite;-webkit-animation: animationt 1s 8s linear infinite;}
    .board:hover .enemy.eme44 {animation: animationt 5s 4s linear infinite;-webkit-animation: animationt 5s 4s linear infinite;}
    .board:hover .enemy.eme55 {animation: animationt 6s 1s linear infinite;-webkit-animation: animationt 6s 1s linear infinite;}
    .board:hover .enemy.eme66 {animation: animationt 700ms 5s linear infinite;-webkit-animation: animationt 700ms 5s linear infinite;}
    .board:hover .enemy.eme77 {animation: animationt 8s 4s linear infinite;-webkit-animation: animationt 8s 4s linear infinite;}
    .board:hover .enemy.eme88 {animation: animationt 3s 6s linear infinite;-webkit-animation: animationt 3s 6s linear infinite;}
    @keyframes animation {0% {top: -10%;} 100% {top: 100%;}}@keyframes animationt {0% {top: -10%;} 100% {top: 100%;}}
    @-webkit-keyframes animation {0% {top: -10%;}100% {top: 100%;}}@-webkit-keyframes animationt {0% {top: -10%;}
        100% {top: 100%;}}
    

    HTML:-

        <div class="board">
            <p class="enemy"></p>
            <p class="enemy eme2"></p>
            <p class="enemy eme3"></p>
            <p class="enemy eme4"></p>
            <p class="enemy eme5"></p>
            <p class="enemy eme6"></p>
            <p class="enemy eme7"></p>
            <p class="enemy eme8"></p>
            <p class="enemy eme22"></p>
            <p class="enemy eme33"></p>
            <p class="enemy eme44"></p>
            <p class="enemy eme55"></p>
            <p class="enemy eme66"></p>
            <p class="enemy eme77"></p>
            <p class="enemy eme88"></p>
        </div>
    <audio src="http://66.90.91.26/ost/planet-51-soundtrack/sihenryjne/canal-journey.mp3" loop="" autoplay=""></div>
    

    Out put:-

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: