Problem z ustawieniem obrazów w odpowiednim miejscu

Odpowiedz Nowy wątek
2018-09-10 15:33
0

Witam
Mam problem z tym, że obrazy (pola do klikania), powinny się automatycznie skalować, ale nigdy nie zmieniać położenia w zależności od rozdzielczości. Drugi problem albo nie to z szybkością działania skryptu, czy jest sens i da się jakoś przyśpieszyć tą stronę ? Przy okazji powiedzcie co sądzicie o użytym skrypcie, z JavaScriptem mam do czynienia dopiero od miesiąca, więc troszkę to tak średnio może być. Osobiście troszkę mi przeszkadza ta mnogość funkcji takich samych tylko dla innego obrazka (położenie obrazka).

https://github.com/domus12/Projekt-Gra

https://cdn.rawgit.com/domus12/Projekt-Gra/0a3cf75b/Game.html

Pozostało 580 znaków

2018-09-11 15:39
0

Ktoś coś mógłby pomóc z tym pozycjonowaniem?

Pozostało 580 znaków

2018-09-12 00:16
0

Pierwsze co mi przyszło do głowy to CSS: transform: scale. Samą skalę możesz obliczyć JSem.
Innym rozwiązaniem może może być pozycjonowanie nie przez px a przez %?

BTW. Znaczniki takie jak <hN>, <img> itd. umieszcza się w <body> a nie w <head>

Wiem o tym, tylko pojawił się problem że gdy znaczniki były razem z tymi pobieranymi przez JS pobierało wszystko i coś nic nie działało. Skalowanie CSS niestety nie działa z różnymi rozdzielczościami. Jest jednak możliwość zintegrowanie skalowania z Media Queries, tylko jak to solidnie połączyć i czy można liczyć na skuteczność? Z tymi wartościami procentowymi to troszkę dużo zmian by było, więc może dało by się jakoś inaczej. - domus12 2018-09-12 15:42

Pozostało 580 znaków

2018-09-13 08:49
0

Co to znaczy, ze skalowanie CSS nie działa z różnymi rozdzielczościami? Spójrz na mój przykład napisany tak na szybko:

<!doctype html>
<html>
    <head>
        <style>
        #mainBox {
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: top left;
            width: 1000px;
            height: 500px;
        }
        </style>
    </head>
    <body>
        <div id="mainBox">
            <div style="position:absolute;top:100px;left:200px;width:12px;height:12px;background:pink;"></div>
        </div>
 
        <script type="text/javascript">
        var baseWidth = 1000;
        var baseHeight = 500;
 
        function scaleMainBox() {
            var scale = window.innerWidth / baseWidth;
            document.getElementById("mainBox").style.transform = "scale("+scale+")";
        }
        scaleMainBox();
        window.addEventListener("resize", scaleMainBox);
        </script>
    </body>
</html>

Najpierw robisz sobie mainBox o określonych stałych wymiarach (im większe tym lepiej) a później to skalujesz bazując na wielkości okna przeglądarki.

Co do problemu wybierania, zobacz sobie querySelector. Ogólnie działa to tak, że pewnej grupie obiektów nadajesz pewną klasę class="foo" i dzięki temu możesz wybrać tylko te interesujące Cię elementy. Oczywiście każdy obiekt może posiadać więcej niż jedną klasę (class="foo bar").

Widzę, że masz kilka scen. Może lepiej byłoby zrobić w mainBox kilka divów .scene z osobnymi id a w JS możesz ustawiać .css.display = "none"; żeby schować scenę lub .css.display = "block";, żeby scenę pokazać.

Możesz skalować całość albo osobno szerokość i wysokość, żeby zawsze zajmowało 100% okna przeglądarki (scale(xscale, yscale)). - arczinosek 2018-09-13 08:51

Pozostało 580 znaków

2018-09-13 18:17
0

Dzięki za pomoc, wczoraj jednak pozmieniałem wszystkie wartości na %, nawet nie zajęło to tyle czasu, jednak jest nadal problem z tymi "toporkami z plusem" - add.jpg, mógłbyś spojrzeć na najnowszą wersję:
https://github.com/domus12/Projekt-Gra
https://cdn.rawgit.com/domus12/Projekt-Gra/9290b62e/Game.html

Jak włożyć do tego kodu teraz teraz ten mainBox ?

Znam queryselector, ale ciągle były z tym problemy i wydaje mi się że nie ma to większego sensu by każdą część elementów znakować divem o innym id, ale czy to przyśpieszy?

Co do tego ostatniego, czy te display = none przyśpieszą działanie witryny? Nie znałem czegoś takiego i widziałeś, jak to obszedłem, przez zastosowanie stringów z kodem.

Jeszcze na koniec jak, to jest z tym rawgit, czy on zawsze tak zwalnia działanie strony, czy to tylko moja strona, jest taka wolna, ale chyba nie bo z komputera plik html chodzi bardzo szybko.

edytowany 1x, ostatnio: domus12, 2018-09-13 18:25

Pozostało 580 znaków

2018-09-13 21:45
0

Może zainteresuj się jednostką CSS: vw
https://www.w3schools.com/css[...]t.asp?filename=trycss_unit_vw


Pozostało 580 znaków

2018-09-13 21:55
0
  1. Działa Ci to wolno prawdopodobnie dlatego, że niektóre pliki są bardzo wielkie (przede wszystkim muzyka). Cały projekt to prawie 80 MB a wszystko musi być ściągnięte... Co do rawgit, nie wiem jak to działa, ale tak wielkie pliki na pewno nie pomagają ;)
  2. querySelector rzeczywiście nie jest zbyt wygodny. Może lepiej skorzystać z dobroci jQuery?
  3. Dobrą praktyką jest trzymać pliki css / js / obrazy w katalogu /assets. Dużo łatwiej wtedy połapać się w projekcie...
  4. Kod:
    setInterval(function(){ wood += w  }, 8000)
    setInterval(function(){ document.querySelector('h3').innerHTML = Math.round(wood) }, 000)

    proponuję zamienić na:

    setInterval(function() {
    wood = Math.round(wood + w);
    document.querySelector('h3').innerHTML = wood;
    });
  5. Pomysł z display przede wszystkim pomoże Ci uporządkować kod JS. Każdą scenę możesz sobie napisać w czystym HTML a później tylko decydować, którą z nich wyświetlić.

Ogólnie wszystko rozwiązałbym mniej-więcej w tym stylu:

<!doctype html>
<html>
    <head>
        <style>
        #mainBox {
            position: absolute;
            top: 0;
            left: 0;
            width: 1000px;
            height: 500px;
            transform-origin: top left;
        }
        .scene {
            display: none;
        }
        </style>
    </head>
    <body>
        <div id="mainBox">
            <div class="scene" id="mainScene" style="display:block;">
                <h1>Scene 1</h1>
 
                <button type="button" onClick="changeScene('scene3')">Go to scene 3</button>
            </div>
            <div class="scene" id="secondScene">
                <h1>Scene 2</h1>
 
                <button type="button" onClick="changeScene('scene1')">Go to scene 1</button>
            </div>
            <div class="scene" id="thirdScene">
                <h1>Scene 3</h1>
 
                <button type="button" onClick="changeScene('scene2')">Go to scene 2</button>
            </div>
        </div>
        <script>
        var Scenes = {
            "scene1": document.getElementById("mainScene"),
            "scene2": document.getElementById("secondScene"),
            "scene3": document.getElementById("thirdScene")
        };
 
        var active = Scenes["scene1"];
 
        function changeScene(sceneName) {
            active.style.display = "none";
            active = Scenes[sceneName];
            active.style.display = "block";
        }
        </script>
    </body>
</html>

Nie testowałem, ale chyba sobie poradzisz :)

Pozostało 580 znaków

2018-09-14 15:49
0

Nie zbyt to ogarniam, jakoś to dla mnie za trudne jak na razie. Dobra, ale mając ten kod co już mam, jak dokończyć to skalowanie ? Tylko te elementy dodawane czyli np. add.png itp. nie działa ich skalowanie, jak to poprawić ?

Pozostało 580 znaków

2018-09-14 19:58
0

Nie działa Ci bo w const build1 = '<div><img src="arrow.png" ..'; i później w podmiana1() zmieniasz <div id="mainBox"> na <div>. No i to samo z kolejnymi numerkami build

Nie mam tam żadnego <div id="mainBox">, wszystko oparte jest na jednym divie. Wartości są zapisane w % i dodatkowo jest też img w CSS. - domus12 2018-09-15 09:07

Pozostało 580 znaków

2018-09-17 22:17
0

Mam jeszcze jedno pytanie co zrobić by od elementu <form> był odpowiedni margines do tekstu, tak żeby na telefonach <form> nie nachodził się ze zwykłym tekstem ??

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0