Problem z ustawieniem obrazów w odpowiednim miejscu

domus12

2018-09-10T15:33:28+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 9

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

domus12

2018-09-11T15:39:52+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 9

0

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

arczinosek

2018-09-12T00:16:35+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Warszawa
Postów: 86

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>

arczinosek

2018-09-13T08:49:57+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Warszawa
Postów: 86

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:

Kopiuj

<!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ć.

domus12

2018-09-13T18:17:23+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 9

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.

Freja Draco

2018-09-13T21:45:47+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 3394

0

Może zainteresuj się jednostką CSS: vw
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw

arczinosek

2018-09-13T21:55:22+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Warszawa
Postów: 86

0

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ą ;)
querySelector rzeczywiście nie jest zbyt wygodny. Może lepiej skorzystać z dobroci jQuery?
Dobrą praktyką jest trzymać pliki css / js / obrazy w katalogu /assets. Dużo łatwiej wtedy połapać się w projekcie...
Kod:

Kopiuj

setInterval(function(){ wood += w  }, 8000)
setInterval(function(){ document.querySelector('h3').innerHTML = Math.round(wood) }, 000)

proponuję zamienić na:

Kopiuj

setInterval(function() {
    wood = Math.round(wood + w);
    document.querySelector('h3').innerHTML = wood;
});

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:

Kopiuj

<!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 :)

domus12

2018-09-14T15:49:55+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 9

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ć ?

arczinosek

2018-09-14T19:58:24+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Warszawa
Postów: 86

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

domus12

2018-09-17T22:17:23+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 9

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 ??