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="bullet"></div> <div id="hlaven"></div> </div> </div> <div class="objekt"></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: relative; top: -5px; background-image: url("http://petama.wz.cz/hlaven.png"); background-size: 100%; width: 72px; height: 29.5px; } #bullet { transform: translate(34px, 12px); width: 35px; height: 5px; background-color: #00AA00; } .objekt { position: absolute; left: 300px; bottom: 320px; width: 60px; height: 60px; border-radius: 0px; background-color: #FFA334; }
CSS
Autoformát
CSS reset
Až na konci
var key = { A : 65, D : 68, E : 69, F : 70, Q : 81, S : 83, W : 87 }; var tankone = {}; var tanks = {}; var objekt = { polomerNaDruhou : $(".objekt").width() / 2 * $(".objekt").width() / 2, x : parseInt($(".objekt").css("left")) + $(".objekt").width() / 2, y : parseInt($(".objekt").css("bottom")) + $(".objekt").height() / 2 }; tankone.hlaven = { uhel: 0, rspeed : 2, x : parseInt($("#otochlav1").css("left")), y : $("#otochlav1").height() - parseInt($("#otochlav1").css("top")) }; tankone.body = { uhel : 0, mspeed : 5/* move speed */, rspeed : 4/* rotate speed*/, x : 200, y : 200, }; tankone.bullet = { mspeed: 10, x : 34, y : 12 }; 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 vypustStrelu() { tankone.bullet.x += tankone.bullet.mspeed * Math.cos((tankone.hlaven.uhel + tankone.body.uhel) / 180 * Math.PI); $("#bullet").css("transform", "translate(" + tankone.bullet.x + "px, " + tankone.bullet.y + "px)"); /* Pythagorova věta */ var dx = objekt.x - (tankone.bullet.x + tankone.hlaven.x + tankone.body.x); var dy = objekt.y - (tankone.bullet.y + tankone.hlaven.y + tankone.body.y); var vzdalenostNaDruhou = dx * dx + dy * dy; console.log("vzdalenost = " + Math.sqrt(vzdalenostNaDruhou)); console.log("objekt.polomer = " + Math.sqrt(objekt.polomerNaDruhou)); if (vzdalenostNaDruhou > objekt.polomerNaDruhou) { /* Střela není v objektu, po 700ms zopakuj funkci */ setTimeout(vypustStrelu, 700); } else if(vzdalenostNaDruhou < objekt.polomerNaDruhou) { alert("BUM!"); } } 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)"); } if (tanks.pressedKeys[key.F]) { vypustStrelu(); } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>