Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div id="playground"> <div class="target" style="position:absolute;top:100px;left:500px"></div> <div class="tank"> <div class="hlaven"> <img src="http://petama.wz.cz/hlaven.png"> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#playground { position: relative; overflow: hidden; width: 850px; height: 400px; background-color: #D0D0D0; border: solid 1px #000000; } .tank { position: absolute; width: 50px; height: 38px; left: 0px; top: 0px; -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); background-image: url("http://petama.wz.cz/tank.png"); background-size: 100%; z-index:11; } .hlaven { position: relative; width: 50px; height: 38px; -webkit-transform-origin:center center; -webkit-transform: rotate(0deg); transform-origin:center center; transform: rotate(0deg); z-index:5; } .hlaven img { width:72px; position:relative; top:4px; left:-11px; } .bullet { width: 10px; height: 10px; background-color: #000000; border-radius:50%; position:absolute; top:0; z-index:1; } .target { height:30px; width:30px; border-radius:50%; background:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ12few0gW6LnN1Gt2zxvd3WiAZj_BbHnv6-I5GpFYAWnHnstPTMQ); background-size:100%; }
CSS
Autoformát
CSS reset
Až na konci
var keys=[]; var tank= { x:0, y:0, pitch:0, canonPitch:0, shots:0 }; DOMtank=document.getElementsByClassName("tank")[0]; action= { 87:function(tank) //klávesa W { if(keys[87]===false)return; tank.x+=Math.cos(tank.pitch/180*Math.PI)*2; tank.y+=Math.sin(tank.pitch/180*Math.PI)*2; if(tank.x > 800) tank.x = 800; if(tank.y > 400-38) tank.y = 400-38; if(tank.x < 0) tank.x = 0; if(tank.y < 0) tank.y = 0; reloadGame(); setTimeout(function(){action[87](tank)}, 20); }, 83:function(tank) //klávesa S { if(keys[83]===false)return; tank.x-=Math.cos(tank.pitch/180*Math.PI)*2; tank.y-=Math.sin(tank.pitch/180*Math.PI)*2; if(tank.x > 800) tank.x = 800; if(tank.y > 400-38) tank.y = 400-38; if(tank.x < 0) tank.x = 0; if(tank.y < 0) tank.y = 0; reloadGame(); setTimeout(function(){action[83](tank)}, 20); }, 68:function(tank) { if(keys[68]===false)return; tank.pitch+=2; reloadGame(); setTimeout(function(){action[68](tank)}, 20); }, 65:function(tank) { if(keys[65]===false)return; tank.pitch-=2; reloadGame(); setTimeout(function(){action[65](tank)}, 20); }, 81:function(tank) { if(keys[81]===false)return; tank.canonPitch-=2; reloadGame(); setTimeout(function(){action[81](tank)}, 20); }, 69:function(tank) { if(keys[69]===false)return; tank.canonPitch+=2; reloadGame(); setTimeout(function(){action[69](tank)}, 20); }, 32:function(tank) { function anim() { function remove() { document.getElementById("playground").removeChild(shot); tank.shots--; } pos.x+=Math.cos(pitch/180*Math.PI)*7; pos.y+=Math.sin(pitch/180*Math.PI)*7; shot.style.webkitTransform="translate("+pos.x+"px,"+pos.y+"px)"; shot.style.transform="translate("+pos.x+"px,"+pos.y+"px)"; if((pos.x-515)*(pos.x-515)+(pos.y-115)*(pos.y-115)<15*15){remove();document.getElementById("playground").removeChild(document.getElementsByClassName("target")[0]);return;} if(pos.x > 860) {remove();return} if(pos.y > 410) {remove();return} if(pos.x < -10) {remove();return} if(pos.y < -10) {remove();return} time++; if(time>500)remove(); setTimeout(function(){anim(shot, pos, time, pitch)}, 10); } if(keys[32]===false||tank.shots>=10)return; tank.shots++; var pitch=tank.pitch+tank.canonPitch; var time=0; var pos= { x:tank.x+20, y:tank.y+13 }; var shot=document.createElement("div"); shot.className="bullet"; shot.style.webkitTransform="translate("+pos.x+"px,"+pos.y+"px)"; shot.style.transform="translate("+pos.x+"px,"+pos.y+"px)"; document.getElementById("playground").appendChild(shot); anim(shot, pos, 0, pitch); setTimeout(function(){action[32](tank)}, 200); } }; function reloadGame() { DOMtank.style.webkitTransform="translate("+tank.x+"px,"+tank.y+"px) rotate("+tank.pitch+"deg)"; DOMtank.style.transform="translate("+tank.x+"px,"+tank.y+"px) rotate("+tank.pitch+"deg)"; DOMtank.getElementsByClassName("hlaven")[0].style.webkitTransform="rotate("+tank.canonPitch+"deg)"; DOMtank.getElementsByClassName("hlaven")[0].style.transform="rotate("+tank.canonPitch+"deg)"; } onkeydown=function(event) { if(keys[event.keyCode]===true)return; keys[event.keyCode]=true; if(action[event.keyCode])action[event.keyCode](tank); }; onkeyup=function(event){keys[event.keyCode]=false;};
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>