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
<h1>Hra s tankem</h1> <div id="playground"> <div id="tank1"> <div id="otochlav1"> <div id="hlaven"></div> <div id="bullet"></div> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#playground { position: absolute; overflow: hidden; width: 400px; height: 400px; background-color: #D0D0D0; border: solid 1px #000000; } #tank1 { position: absolute; width: 50px; height: 38px; left: 0px; top: 0px; transform: translate(200px, 200px) rotate(0deg); background-image: url("http://petama.wz.cz/tank.png"); background-size: 100%; } #otochlav1 { position: relative; width: 72px; height: 29.5px; top: 4px; left: -11px; transform: rotate(0deg); transform-origin: 50% 50%; text-align: center; } #hlaven { position: absolute; background-image: url("http://petama.wz.cz/hlaven.png"); background-size: 100%; width: 72px; height: 29.5px; } #bullet { position: absolute; /* ještě jsem nesehnal žádný obrázek střely z tanku zadarmo, takže nevím v podstatě nic */ }
CSS
Autoformát
CSS reset
Až na konci
var key = { A : 65, D : 68, E : 69, Q : 81, S : 83, W : 87 }; var tankone = {}; var tanks = {}; tankone.hlaven = { uhel: 0, rspeed : 2 }; tankone.body = { uhel : 0, mspeed : 5/* move speed */, rspeed : 4/* rotate speed*/, directionX : 1, directionY : 0, x : 200, y : 200, }; var playground = { width: $("#playground").width() - $("#tank1").width(), height: $("#playground").height() - $("#tank1").height(), }; tanks.pressedKeys = []; tanks.timer = setInterval(gameloop, 30); $(document).keydown(function(e){ tanks.pressedKeys[e.which] = true; }); $(document).keyup(function(e){ tanks.pressedKeys[e.which] = false; }); function gameloop() { if(tanks.pressedKeys[key.E]) { tankone.hlaven.uhel += tankone.hlaven.rspeed; $("#otochlav1").css("transform", "rotate(" + tankone.hlaven.uhel + "deg)"); } if(tanks.pressedKeys[key.Q]) { tankone.hlaven.uhel -= tankone.hlaven.rspeed; $("#otochlav1").css("transform", "rotate(" + tankone.hlaven.uhel + "deg)"); } if(tanks.pressedKeys[key.W] || tanks.pressedKeys[key.A] || tanks.pressedKeys[key.S] || tanks.pressedKeys[key.D]) { if(tanks.pressedKeys[key.D]) { tankone.body.uhel += tankone.body.rspeed; } if(tanks.pressedKeys[key.A]) { tankone.body.uhel -= tankone.body.rspeed; } if(tanks.pressedKeys[key.W] || tanks.pressedKeys[key.S]) { var direction = tanks.pressedKeys[key.W] ? 1 : -1; // při couvání je rychlost záporná tankone.body.x += tankone.body.mspeed * direction * Math.cos(tankone.body.uhel / 180 * Math.PI); tankone.body.y += tankone.body.mspeed * direction * Math.sin(tankone.body.uhel / 180 * Math.PI); // pokud bychom měli vyjet ven, zarazíme se o okraj if(tankone.body.x > playground.width) tankone.body.x = playground.width; if(tankone.body.y > playground.height) tankone.body.y = playground.height; if(tankone.body.x < 0) tankone.body.x = 0; if(tankone.body.y < 0) tankone.body.y = 0; } $("#tank1").css("transform", "translate(" + tankone.body.x + "px," + tankone.body.y + "px) rotate(" + tankone.body.uhel + "deg)"); } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>