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="tank"> <div class="hlaven"> <img src="http://petama.wz.cz/hlaven.png"> </div> </div> <div class="objekt"></div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#playground { position: relative; overflow: hidden; width: 400px; 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(deg); background-image: url("http://petama.wz.cz/tank.png"); background-size: 100%; z-index:11; } .hlaven { position: relative; width: 50px; height: 38px; transform-origin: center center; -webkit-transform-origin:center center; transform: rotate(0deg); -webkit-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; } .objekt { position: absolute; width: 60px; height: 60px; left: 300px; top: 30px; background-color: #FFA334; } }
CSS
Autoformát
CSS reset
Až na konci
var keys=[]; var tank= { x:0, y:0, pitch:0, canonPitch:0 }; var DOM = { tank : document.getElementsByClassName("tank")[0], canon : document.getElementsByClassName("hlaven")[0], playground : document.getElementById("playground"), objekt : document.getElementsByClassName("objekt")[0] }; function checkIfTankIsInPlayground() { if(tank.x > playground.width() - DOM.tank.offsetWidth) tank.x = playground.width() - DOM.tank.offsetWidth; if(tank.y > playground.height() - DOM.tank.offsetHeight) tank.y = playground.height() - DOM.tank.offsetHeight; if(tank.x < 0) tank.x = 0; if(tank.y < 0) tank.y = 0; } var playground = { width : function(){return DOM.playground.offsetWidth}, height : function(){return DOM.playground.offsetHeight} }; 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; checkIfTankIsInPlayground() 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; checkIfTankIsInPlayground() 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)/* Mezerník */ { function anim(shot, pos, time) { pos.x+=Math.cos(shotStartPitch/180*Math.PI)*4; pos.y+=Math.sin(shotStartPitch/180*Math.PI)*4; shot.style.webkitTransform=shot.style.transform="translate("+pos.x+"px,"+pos.y+"px)"; time++; if(time==1000) { DOM.playground.removeChild(shot); return; } var dx = Math.max(DOM.objekt.offsetLeft + DOM.objekt.offsetWidth, pos.x) - Math.min(DOM.objekt.offsetLeft + DOM.objekt.offsetWidth, pos.x); var dy = Math.max(DOM.objekt.offsetTop + DOM.objekt.offsetHeight, pos.y) - Math.min(DOM.objekt.offsetTop + DOM.objekt.offsetHeight, pos.y); var vzdalenostNaDruhou = dx * dx + dy * dy; console.log(vzdalenostNaDruhou); console.log(DOM.objekt.offsetWidth * DOM.objekt.offsetWidth); if (vzdalenostNaDruhou > DOM.objekt.offsetWidth * DOM.objekt.offsetWidth / 2) { setTimeout(function(){anim(shot, pos, time)}, 10); } } var shotStartPitch=tank.pitch+tank.canonPitch; var pos= { x:tank.x+20, y:tank.y+13 }; var shot=document.createElement("div"); shot.className="bullet"; shot.style.webkitTransform=shot.style.transform="translate("+pos.x+"px,"+pos.y+"px)"; DOM.playground.appendChild(shot); anim(shot, pos, 0); } }; function reloadGame() { DOM.tank.style.webkitTransform=DOM.tank.style.transform="translate("+tank.x+"px,"+tank.y+"px) rotate("+tank.pitch+"deg)"; DOM.canon.style.webkitTransform=DOM.canon.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>