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

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

Avatar
Jan Dvořáček:

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. června 22:43
Avatar
David Hynek
Redaktor
Avatar
Odpovídá na Jan Dvořáček
David Hynek:

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. června 23:58
Nahoru Odpovědět 13. června 23:56
Čím víc vím, tím víc věcí nevím.
Avatar
David Hynek
Redaktor
Avatar
David Hynek:

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. června 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.