Autor Zpráva
SpotRudloff
Profil
Ahoj, dělám si hru v JS, HTML a CSS a potřeboval bych vytvořit zeď. Jsou tam panáčci, kteří budou jezdit okolo a zeď nesmí jít projít. Zkoušel jsem v CSS všelijaké šamanské techniky (od position k z-indexu), ale pořád to jde projít. Nevím zda je to problém CSS, nebo JS a také nevím zda budete potřebovat kód aplikace.

Pokud ano, dám ho sem.
Děkuju.
panther
Profil
SpotRudloff:
nevím zda budete potřebovat kód aplikace.
ne, všechno potřebné si domyslíme. Upřímně, co bys z tohohle popisu pochopil ty, kdybys nebyl do aplikace zasvěcený? Nic.
SpotRudloff
Profil
<script type="text/javascript" src="TechGL.js"></script>

<script>
init(100, 50, 350, 500);
MOVING();
showMoves();
WALL(10, 10, 200, 20);
</script>

<?php
$big_x = 100;
$big_y = 50;
$small_x = 350;
$small_y = 500;
?>

<style>
body {
  width: 100%;
  height: 100%;
}

#small {
  margin-top: <?php echo $small_y; ?>;
  margin-left: <?php echo $small_x; ?>;
  position: absolute;
}

#big {
  margin-top: <?php echo $big_y; ?>;
  margin-left: <?php echo $big_x; ?>;
  position: absolute;
}

.obj {
  width: 100px;
  height: 100px;
  border: Red 1px Dashed;
  position: absolute;
}
</style>

<button onClick="showMoves();">Počet pohybů</button>

<div class="obj"></div>
<img src="images/man.png" id="small" onclick='fish="small";fish_name="Malá";alert(fish_name);'>
<img src="images/man.png" id="big" onclick='fish="big";fish_name="Velká";alert(fish_name);'>


Tohle je HTML soubor. Jde mi v něm o to, aby panáček "small"[b][/b] ano "big" nemohli vstoupit do .obj. Jenže to se nedaří. V JS souboru je kód pohybu a inicializace počátečních míst:

var fish = "small";
var moves = 0;
var big_position_x;
var big_position_y;
var small_position_x;
var small_position_y;

if(!window.addEventListener) {
  window.addEventListener = function (type, listener, useCapture) {
    document.body.attachEvent('on' + type, listener);
  }
}

function init(big_start_x, big_start_y, small_start_x, small_start_y) {
  // Start positions
  big_position_x = big_start_x;
  big_position_y = big_start_y;
  small_position_x = small_start_x;
  small_position_y = small_start_y;
}

/*function WALL(x, y, xx, yy) {
  if(big_position_x >= x || big_position_x <= xx) alert("ERR");
}*/

function MOVING() {
    function move_up(e) {
      if(!e) e = window.event;
        if(e.keyCode == 87 || e.keyCode == 119) {
          var el = (fish == "small") ? document.getElementById("small").style.marginTop = small_position_y - 5 : document.getElementById("big").style.marginTop = big_position_y - 5;
            if(fish == "small") small_position_y = small_position_y - 5;
            else big_position_y = big_position_y - 5;
            moves = moves + 1;
          e.returnValue = false;
          return false;
        } else {
          return true;
        }
      }
  
      function move_down(e) {
        if(!e) e = window.event;
          if(e.keyCode == 83 || e.keyCode == 115) {
            var el = (fish == "small") ? document.getElementById("small").style.marginTop = small_position_y - 5 : document.getElementById("big").style.marginTop = big_position_y - 5;
            if(fish == "small") small_position_y = small_position_y + 5;
            else big_position_y = big_position_y + 5;
            moves = moves + 1;
            e.returnValue = false;
            return false;
          } else {
            return true;
          }
        }
  
      function move_left(e) {
      if(!e) e = window.event;
        if(e.keyCode == 65 || e.keyCode == 97) {
          var el = (fish == "small") ? document.getElementById("small").style.marginLeft = small_position_x - 5 : document.getElementById("big").style.marginLeft = big_position_x - 5;
            if(fish == "small") small_position_x = small_position_x - 5;
            else big_position_x = big_position_x - 5;
            moves = moves + 1;
          e.returnValue = false;
          return false;
        } else {
          return true;
        }
      }
  
    
      function move_right(e) {
      if(!e) e = window.event;
        if(e.keyCode == 68 || e.keyCode == 100) {
          var el = (fish == "small") ? document.getElementById("small").style.marginLeft = small_position_x + 5 : document.getElementById("big").style.marginLeft = big_position_x + 5;
            if(fish == "small") small_position_x = small_position_x + 5;
            else big_position_x = big_position_x + 5;
            moves = moves + 1;
          e.returnValue = false;
          return false;
        } else {
          return true;
        }
      }

      function spacebar(e) {
        if(!e) e = window.event;
          if(e.keyCode == 82) {
            fish = (fish == "small") ? "big" : "small";
            fish_name = (fish == "small") ? "Malá" : "Velká";
            alert(fish_name);  
            e.returnValue = false;
            return false;
          } else {
            return true;
          }
      }

  window.addEventListener("keydown", move_up, false);
  window.addEventListener("keydown", move_down, false);
  window.addEventListener("keydown", move_left, false);
  window.addEventListener("keydown", move_right, false);
  window.addEventListener("keydown", spacebar, false);
}

function showMoves() {
  alert(moves);
}


Vím, že je to docela dlouhý kód, a že nikoho z vás neplatím, ale pomoc by se hodila.
ShiraNai7
Profil
Jak souvisí CSS s tím že panáčci mohou projít zdí? To je snad záležitost toho javascriptu - nějaká detekce kolize ne?

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0