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: 200px; bottom: 200px; transform: 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 = { rspeed : 2 } tankone.body = { uhel : 0, mspeed : 5/* move speed */, rspeed : 4/* rotate speed*/, directionX : 1, directionY : 0, x : 200, y : 200, } 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 convertMatrix(csstransform) { var values = csstransform.split('(')[1].split(')')[0].split(','); var angle = Math.round(Math.atan2(values[1], values[0]) * (180/Math.PI)); return { uhel : angle, a : values[0], b : values[2] } } function gameloop() { if(tanks.pressedKeys[key.E]) { var hlavrotate = convertMatrix($("#otochlav1").css("transform")); var uhel = hlavrotate.uhel; var newrotate = "rotate(" + (uhel + tankone.hlaven.rspeed) + "deg)"; $("#otochlav1").css("transform", newrotate); } if(tanks.pressedKeys[key.Q]) { var hlavrotate = convertMatrix($("#otochlav1").css("transform")); var uhel = hlavrotate.uhel; var newrotate = "rotate(" + (uhel - tankone.hlaven.rspeed) + "deg)"; $("#otochlav1").css("transform", newrotate); } if(tanks.pressedKeys[key.D]) { var tankrotate = convertMatrix($("#tank1").css("transform")); var uhel = tankrotate.uhel; var newrotate = "rotate(" + (uhel + tankone.body.rspeed) + "deg)"; $("#tank1").css("transform", newrotate); var newtankrotate = convertMatrix($("#tank1").css("transform")); tankone.body.uhel = newtankrotate.uhel; tankone.body.directionX = newtankrotate.a; tankone.body.directionY = newtankrotate.b; } if(tanks.pressedKeys[key.A]) { var tankrotate = convertMatrix($("#tank1").css("transform")); var uhel = tankrotate.uhel; var newrotate = "rotate(" + (uhel - tankone.body.rspeed) + "deg)"; $("#tank1").css("transform", newrotate); var newtankrotate = convertMatrix($("#tank1").css("transform")); tankone.body.uhel = newtankrotate.uhel; tankone.body.directionX = newtankrotate.a; tankone.body.directionY = newtankrotate.b; } if( tanks.pressedKeys[key.W] && /* Pravá hrana: */ (tankone.body.x < ($("#playground").width() - $("#tank1").width()) || (tankone.body.uhel <= -90 || tankone.body.uhel >= 90)) && /* Horní hrana: */ (tankone.body.y < ($("#playground").height() - $("#tank1").width()) || (tankone.body.uhel >= 0 || tankone.body.uhel <= -180)) && /* Levá hrana: */ (tankone.body.x > 0 || (tankone.body.uhel >= -90 && tankone.body.uhel <= 90)) && /* Dolní hrana: */ (tankone.body.y > 0 || (tankone.body.uhel <= 0 && tankone.body.uhel >= -180)) ) { tankone.body.x = tankone.body.x + tankone.body.mspeed * tankone.body.directionX; tankone.body.y = tankone.body.y + tankone.body.mspeed * tankone.body.directionY; $("#tank1").css({"left":tankone.body.x, "bottom":tankone.body.y}); } if( tanks.pressedKeys[key.S] && /* Pravá hrana: */ (tankone.body.x < ($("#playground").width() - $("#tank1").width()) || (tankone.body.uhel >= -90 && tankone.body.uhel <= 90)) && /* Horní hrana: */ (tankone.body.y < ($("#playground").height() - $("#tank1").width()) || (tankone.body.uhel <= 0 && tankone.body.uhel >= -180)) && /* Levá hrana: */ (tankone.body.x > 0 || (tankone.body.uhel <= -90 || tankone.body.uhel >= 90)) && /* Dolní hrana: */ (tankone.body.y > 0 || (tankone.body.uhel >= 0 || tankone.body.uhel <= -180)) ) { tankone.body.x = tankone.body.x - tankone.body.mspeed * tankone.body.directionX; tankone.body.y = tankone.body.y - tankone.body.mspeed * tankone.body.directionY; $("#tank1").css({"left":tankone.body.x, "bottom":tankone.body.y}); } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>