Battlebot 1 Sawhorse

Battlebot 1 Sawhorse 


Battlebot 1 Saw Horse

Tap to move





Source Code


Html5 CSS JQUERY


<!DOCTYPE html>
<html>
    <head>
        <title>Battlebot 1 Saw Horse</title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <style>
            #bg {
    background-image:url(https://static1.squarespace.com/static/5ae509ea45776e399721f8b3/t/5afd07846d2a73124e573723/1526531979251/Battlebots.jpg?format=350w);
    background-size: 360px;
height:500px;
width:350px;
}


#a{
    position:absolute ;
    width:40px;
    height:40px;
    background-color:black;
    top:135px;
    left:200px;
    border-radius:100%;}

#b{
    position:absolute ;
    width:40px;
    height:40px;
    background-color:black;
    top:135px;
    left:300px;
    border-radius:100%;
    }
#c{
    position:absolute ;
    width:140px;
    height:80px;
    background-color:gray;
    top:150px;
    left:200px;
}
#d{
    position:absolute ;
    background-color:gray;
    height:20px;
    width:90px;
    top:175px;
    left:140px;
    }
#e{
    position:absolute ;
    width:40px;
    height:40px;
    background-color:black;
    top:200px;
    left:200px;
    border-radius:100%;}

#f{
    position:absolute ;
    width:40px;
    height:40px;
    background-color:black;
    top:200px;
    left:300px;
    border-radius:100%;
    }
#h{
    position:absolute ;
    width:60px;
    height:60px;
    background-color:black;
    top:150px;
    left:130px;
    border-radius:100%;
    }
  #g{
    position:absolute ;
    width:56px;
    height:56px;
    background-color:gray;
    top:152px;
    left:132px;
    -webkit-animation:spin .5s linear infinite; -moz-animation:spin .5s linear infinite; animation:spin .5s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 
 

 
#i{
    position:absolute ;
    width:30px;
    height:30px;
    background-color:gray;
    top:165px;
    left:145px;
    border-radius:100%;
    }

#bot{
   position:absolute ;
   }
 
#j{
    position:absolute ;
    width:100px;
    height:20px;
    background-color:blue;
    top:175px;
    left:220px;
   }
#k{
    position:absolute ;
    width:50px;
    height:12px;
    background-color:blue;
    top:155px;
    left:245px;
   }
#l{
    position:absolute ;
    width:50px;
    height:14px;
    background-color:blue;
    top:205px;
    left:245px;
   }
#m{
    position:absolute ;
    width:15px;
    height:15px;
    background-color:blue;
    top:212px;
    left:212px;
    border-radius:100%;
    }
#n{
    position:absolute ;
    width:15px;
    height:15px;
    background-color:blue;
    top:172px;
    left:152px;
    border-radius:100%;
    }
#o{
    position:absolute ;
    width:15px;
    height:15px;
    background-color:blue;
    top:212px;
    left:312px;
    border-radius:100%;
    }
h3{
    color:white;
}
#⬆️{
position:absolute ;
   top:150px;
   left:253px;
}
#⬇️{
   position:absolute ;
   top:202px;
   left:253px;
}
#⬅️{
    position:absolute ;
   top:175px;
   left:215px;
}
#➡️{
    position:absolute ;
   top:175px;
   left:290px;
}
        </style>

    </head>
    <body>
<div id="bg">
        <h3>Tap to move</h3>
    <div id="bot">
        <div id="a"></div>
        <div id="b"></div>
        <div id="c"></div>
        <div id="e"></div>
        <div id="f"></div>
        <div id="d"></div>
        <div id="g"></div>
        <div id="h"></div>
        <div id="i"></div>
        <div id="j"></div>
        <div id="k"></div>
        <div id="l"></div>
        <div id="m"></div>
        <div id="n"></div>
         <div id="o"></div>
          <button id="⬆️">⬆️</button>
          <button id="⬇️">⬇️</button>
           <button id="⬅️">⬅️</button>
            <button id="➡️">➡️</button>
        </div></div>
     

        <script>
            window.onload = function() {

$('#⬆️').click (function(){

    $('#bot').animate({
        top:'-=25px'
        }, 100)
});

$('#⬇️').click (function(){
$('#bot').animate({
        top:'+=25px'
        }, 100)
});

$('#⬅️').click (function(){
$('#bot').animate({
        left:'-=25px'
        }, 100)
});

$('#➡️').click (function(){
$('#bot').animate({
        left:'+=25px'
        }, 100)
});

}
        </script>
    </body>
</html>


Click here to run this Code



Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. Is the bot above with the spinning blade the Easter Egg?? Battlebots

    ReplyDelete

Post a Comment

Popular posts from this blog