Battlebot 1 Sawhorse
Battlebot 1 Sawhorse
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>
This comment has been removed by the author.
ReplyDeleteIs the bot above with the spinning blade the Easter Egg?? Battlebots
ReplyDelete