Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 12.09.2020, 20:23
Huby Huby ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2020
Beiträge: 1
Huby befindet sich auf einem aufstrebenden Ast
Standard Grid buttons mit veränderten Größen

Hy,

ich versuche gerade so eine art Spiel in html zu erstellen.
Für die Steuerung hab ich ein D-Pad als png erstellt (420x420px) und das in ein div grid als Hintergrund gepackt.
Dieses div hab ich dann mit 9 untergeordneten div's versehen (3x3).
Dann hab ich das D-Pad png in 9 teile geteilt um einen hover effekt zu erzeugen.
Bis hier hin funktioniert auch alles, wenn man feste Pixelwerte für die grids verwendet.

so sieht der Spaß jetzt aus:

------------------
| game (flex 1) |
------------------
| d-pad | buttons |
| flex 2 | flex 3 |
-------------------

Jetzt zum Problem

Ich wollte es umfunktionieren, damit es im portrait und landscape modus funktioniert.
Wenn ich das Smartphone um 90° drehe, verändert sich die Anordnung vom grid (soll auch so sein).

--------------------------
| d-pad | game | buttons |
| flex 2 | flex 1 | flex 3 |
----------------------------

Nun hab ich links und rechts neben dem Spiel nicht mehr genügend Platz um mit festen Pixelgrößen arbeiten zu können.
Darum habe ich die grid container flexibel in der Größe gemacht.
Das D-Pad passt sich jetzt auch der Größe des grids an, leider sind die 9 untergrids des d-pads jetzt nicht mehr passend zum Hintergrundbild (logisch).
Ich suche also nach einer Möglichkeit die Grid-container größe an das verkleinerte d-pad Bild anzupassen um die einzelnen div's wieder mit einem hover ansprechen zu können.
Mit einem zusätzlichen div container in flex 2, wird das d-pad gar nicht mehr angezeigt.

Um die Verwirrung noch zu maximieren, würde ich einfach mal den jetzigen Code posten.

HTML-Code:
<head>
  <meta charset="ISO-8859-1">
  <meta name="viewport" content="user-scalable=no,user-scalable=0"/>

  <style>
 
  .medium {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
}
 
@media only screen and (orientation: landscape) {
    .flex1 { order: 2; width: 60% }
    .flex2 { order: 1; width: 20% }
    .flex3 { order: 3; width: 20% }
    #dpad_container {background-size: 100% auto;}
}

@media only screen and (orientation: portrait) {
    .flex1 { width: 100% }
    .flex2 { width: 50% }
    .flex3 { width: 50% }
    #dpad_container {background-size: 100% auto;}
}  
  </style>
 
  <script type="text/javascript" language="JavaScript">



function changebg (ids, nr, press){
    var fass = document.getElementById(ids);

    if (press === undefined) {
        press = '';
      }

    if (nr > 0){
        fass.style.backgroundImage = "url('" + ids + press + ".png')";
    } else {
        fass.style.backgroundImage = "none";
    }
}

</script>


</head>

<body bgcolor="darkgrey">

  <div align="center">
    <div class="medium">
        <div align="center" class="flex1">GAME</div>
       
          <div align="center" class="flex2" id="dpad_container" style="background-image: url(dpad.png); background-repeat: no-repeat; background-position: 50% 50%;">
            <div class="grid-container" style="display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; width:auto;height:auto;">
                  <div class="grid-item" onmousedown="changebg('dpad_up',1);changebg('dpad_left',1);" onmouseup="changebg('dpad_up',0);changebg('dpad_left',0);" ontouchstart="changebg('dpad_up',1);changebg('dpad_left',1);" ontouchend="changebg('dpad_up',0);changebg('dpad_left',0);"></div>
                  <div id="dpad_up" class="grid-item" onmousedown="changebg('dpad_up',1);" onmouseup="changebg('dpad_up',0);" ontouchstart="changebg('dpad_up',1);" ontouchend="changebg('dpad_up',0);"></div>
                  <div class="grid-item" onmousedown="changebg('dpad_up',1);changebg('dpad_right',1);" onmouseup="changebg('dpad_up',0);changebg('dpad_right',0);" ontouchstart="changebg('dpad_up',1);changebg('dpad_right',1);" ontouchend="changebg('dpad_up',0);changebg('dpad_right',0);"></div>
                  <div id="dpad_left" class="grid-item" onmousedown="changebg('dpad_left',1);" onmouseup="changebg('dpad_left',0);" ontouchstart="changebg('dpad_left',1);" ontouchend="changebg('dpad_left',0);"></div>
                  <div class="grid-item"></div>
                  <div id="dpad_right" class="grid-item" onmousedown="changebg('dpad_right',1);" onmouseup="changebg('dpad_right',0);" ontouchstart="changebg('dpad_right',1);" ontouchend="changebg('dpad_right',0);"></div>
                  <div class="grid-item" onmousedown="changebg('dpad_down',1);changebg('dpad_left',1);" onmouseup="changebg('dpad_down',0);changebg('dpad_left',0);" ontouchstart="changebg('dpad_down',1);changebg('dpad_left',1);" ontouchend="changebg('dpad_down',0);changebg('dpad_left',0);"></div>
                  <div id="dpad_down" class="grid-item" onmousedown="changebg('dpad_down',1);" onmouseup="changebg('dpad_down',0);" ontouchstart="changebg('dpad_down',1);" ontouchend="changebg('dpad_down',0);"></div>
                  <div class="grid-item" onmousedown="changebg('dpad_down',1);changebg('dpad_right',1);" onmouseup="changebg('dpad_down',0);changebg('dpad_right',0);" ontouchstart="changebg('dpad_down',1);changebg('dpad_right',1);" ontouchend="changebg('dpad_down',0);changebg('dpad_right',0);"></div>
            </div>
        </div>

        <div align="center" width="auto" height="auto" class="flex3" id="btn_container">
            <div class="grid-container" style="display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; width:auto;height:auto;">
                  <div class="grid-item" id="enter" style="background-image: url(enter.png); width:140px;height:140px;" onmousedown="changebg('enter',1,'_press');" onmouseup="changebg('enter',1);" ontouchstart="changebg('enter',1,'_press');" ontouchend="changebg('enter',1);"></div>
                  <div class="grid-item" id="btn_gruen" style="background-image: url(btn_gruen.png); width:140px;height:140px;" onmousedown="changebg('btn_gruen',1,'_press');" onmouseup="changebg('btn_gruen',1);" ontouchstart="changebg('btn_guen',1,'_press');" ontouchend="changebg('btn_gruen',1);">A</div>
                  <div class="grid-item" id="esc" style="background-image: url(esc.png); width:140px;height:140px;" onmousedown="changebg('esc',1,'_press');" onmouseup="changebg('esc',1);" ontouchstart="changebg('esc',1,'_press');" ontouchend="changebg('esc',1);"></div>
                  <div class="grid-item" id="btn_rot" style="background-image: url(btn_rot.png); width:140px;height:140px;" onmousedown="changebg('btn_rot',1,'_press');" onmouseup="changebg('btn_rot',1);" ontouchstart="changebg('btn_rot',1,'_press');" ontouchend="changebg('btn_rot',1);">B</div>
                  <div class="grid-item"></div>
                  <div class="grid-item" id="btn_gelb" style="background-image: url(btn_gelb.png); width:140px;height:140px;" onmousedown="changebg('btn_gelb',1,'_press');" onmouseup="changebg('btn_gelb',1);" ontouchstart="changebg('btn_gelb',1,'_press');" ontouchend="changebg('btn_gelb',1);">X</div>
                  <div class="grid-item"></div>
                  <div class="grid-item" id="btn_blau" style="background-image: url(btn_blau.png); width:140px;height:140px;" onmousedown="changebg('btn_blau',1,'_press');" onmouseup="changebg('btn_blau',1);" ontouchstart="changebg('btn_blau',1,'_press');" ontouchend="changebg('btn_blau',1);">Y</div>
                  <div class="grid-item"></div>
            </div>
        </div>
    </div>
  <br><br>



</div>

</body>
Vielleicht blickt ja Jemand durch, oder hat eine bessere Idee.

thx
Mit Zitat antworten
Sponsored Links