NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Změna pozice objektu na zmáčknutí klávesy

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Jan Dvořáček
Člen
Avatar
Jan Dvořáček:13.6.2016 22:43

Dobrý den. Potřeboval bych poradit, jak na zmáčknutí mezerníku posunout žlutý blok na šedou plošinu a zároveň blok vyřadit z booleanu, aby se dále nehýbal do stran. Přikládám náhled "hry" a můj dosavadní způsob zapojená mezerníku. Děkuji za váš čas.

window.addEven­tListener('ke­ydown', moveSelection);
}
function spaceBarPressed() {
var element = document.getE­lementsByName("blok0");
element.style.top = parseInt(elemen­t.style.top) + 25 + 'px';
}
function moveSelection(evt) {
switch (evt.keyCode) {
case 32:
spaceBarPressed();
break;
}
};

Odpovědět
13.6.2016 22:43
You're never too old to learn something stupid
Avatar
David Hynek
Tvůrce
Avatar
Odpovídá na Jan Dvořáček
David Hynek:13.6.2016 23:56

Jen v rychlosti, už se mi chce spát :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Hra</title>
  <style>
  * {padding: 0; margin: 0;}
  #kostka {width: 48px; height: 48px; background: #0f0; border: 1px solid #000; position: absolute; top: -1000px; left: -1000px;}
  #plosina {width: 100px; height: 28px; background: #009; border: 1px solid #000; position: absolute; top: -1000px; left: -1000px;}
  </style>
  </head>
  <body>
    <div id="kostka"></div>
    <div id="plosina"></div>

  <script>
  var w = window.innerWidth;
  var h = window.innerHeight;
  var plosina_l = (w-100)/2;
  var kostka = document.getElementById("kostka");
  var plosina = document.getElementById("plosina");

  document.onkeydown = function(e) {
  var event = window.event || e;
  var kod = event.keyCode;
  if(kod == 32) kostka.style.top = (h-90)+"px";
  if(kod == 37 && plosina_l > 100) plosina_l -= 50;
  if(kod == 39 && plosina_l < (w-150)) plosina_l += 50;
  plosina.style.left = plosina_l+"px";
  }

  window.onload = function()
  {
   kostka.style = "top: 30px; left: 100px;";
   plosina.style = "top: "+(h-40)+"px; left: "+plosina_l+"px;";
  }
  </script>
  </body>
</html>
Editováno 13.6.2016 23:58
Nahoru Odpovědět
13.6.2016 23:56
Čím víc vím, tím víc věcí nevím.
Avatar
David Hynek
Tvůrce
Avatar
David Hynek:14.6.2016 0:03

a k tomu tvému:

var element = document.getE­lementsByName("blok0"); <-- Elements, jde tedy o pole elementů název musíš doplnit ještě o číslo pořadí elementu. Tedy asi document.getE­lementsByName("blok")[0]

Nahoru Odpovědět
14.6.2016 0:03
Čím víc vím, tím víc věcí nevím.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.