NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
7cezar97
Člen
Avatar
7cezar97:24.12.2019 14:31

Ahoj dělam hru pomocí canvasu a udělal jsem, že když hrač zmáčkne f11 tak se odstraní header a footer a canvas vyplní celou obrazovku, ale problém je ,že canvas přečnívá .

Zkusil jsem: index.html

<!doctype html>
<html lang="cs">

<head>
    <title>Mouse Life</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body onload="startGame()">
    <header id="header">Mouse Life</header>
    <!-- Game canves -->
    <canvas id="MouseLife">
        Enable Canvas or your browser doesn't support canvas!
    </canvas>
    <footer id="footer">&copy; Tomáš Kuča IT2 2019</footer>
    <noscript>
        For full functionality of this site it is necessary to enable JavaScript.
        Here are the <a href="https://www.enable-javascript.com/">
        instructions how to enable JavaScript in your web browser</a>.
    </noscript>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src="hra.js"></script>
</body>

</html>

hra.js

console.log('Js is working');

/* Create canvas */
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

/*
Detect Fullscren
and hide footer and header
*/
(function(w, s, d) {
    var timer;

    function detect_full_screen() {
      // This clearInterval is for IE.
      clearInterval(timer);

      var d_width = d.documentElement.clientWidth || 0;
      var d_height = d.documentElement.clientHeight || 0;
      var w_width = w.innerWidth || 0; /* Inner, instead of outer, for IE9 */
      var w_height = w.outerHeight || 0;
      var s_width = s.width || 0;
      var s_height = s.height || 0;

      if ((w_width === s_width && w_height === s_height) || (d_width === s_width && d_height === s_height)) {
        console.log('Game is on FullScreen')
        // hide footer and header
        document.getElementById('footer').style.display = 'none';
        document.getElementById('header').style.display = 'none';
        ctx.canvas.width  = window.innerWidth;
        ctx.canvas.height = window.innerHeight;
        mouse_life()
      }
      else {
        console.log('Game is not on FullScreen')
        document.getElementById('footer').style.display = 'block';
        document.getElementById('header').style.display = 'block';
        ctx.canvas.width  = window.innerWidth;
        ctx.canvas.height = window.innerHeight;
        mouse_life()
      }

    }

    detect_full_screen();

    function bridge() {
      // Clear as window resize fires.
      clearInterval(timer);
      timer = setInterval(detect_full_screen, 100);
    }

    if (w.addEventListener) {
      w.addEventListener('resize', bridge, false);
    }
    else if (w.attachEvent) {
      w.attachEvent('onresize', bridge);
    }
    else {
      w.onresize = bridge;
    }
  })(this, this.screen, this.document);




function mouse_life() {
    ctx.fillRect(10,10,100,100);
}

style.css

html {
    position: relative;
    min-height: 100%;
}

header {
    height: 2em;
    background-color: #ff9900;
    border-bottom: 5px solid #c15b00;
    color: #00151d;
    font-size: 2em;
    font-weight: bold;
    width: 100%;
}

body {
    background-color: #00151d;
}
footer {
    height: 2em;
    background-color: #ff9900;
    border-top: 5px solid #c15b00;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow:hidden;
}

canvas {
    border: 5px solid #858585;
    background-color: #00151d;

}

html, body {
    width:  100%;
    height: 100%;
    margin: 0;
  }

Chci docílit: Chcu aby hra vždy vyplňovala celé okno.

 
Odpovědět
24.12.2019 14:31
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:24.12.2019 16:00

html, body {margin:0; padding:0;}
To by melo eliminovat problemy v ruznych prohlizecich. Jeden pocita paddin do width a dalsi zas nee. Treba to pomuze.

Jo, kazdopadne bych dodrzoval v css jistou hierarchii. Ty to mas castecne v poslednich radcich, v mem css bys tag html nasel pro zmenu uplne nahore, protoze v html strome je html uplne nejhornejsi tag.

 
Nahoru Odpovědět
24.12.2019 16:00
Avatar
7cezar97
Člen
Avatar
Odpovídá na Peter Mlich
7cezar97:24.12.2019 21:57

Diky za tip ale nefunguje
šířka
body,header,footer 1903 px
canvas je 1920 px
výška - debug window
body 683.5
canvas 668
moje obrazovka 1920x1080px
použivam firefox 68.3.0 esr

 
Nahoru Odpovědět
24.12.2019 21:57
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:25.12.2019 11:42

Ok, znova rikam, ze to funguje.

<html>
<body>
<canvas>
        Enable Canvas or your browser doesn't support canvas!
</canvas>
</body>
<html>
<style>
html, body, canvas
{width:100%; height:100%; margin:0; padding:0;}
canvas { border:0px solid #f00;}
/*kdyz si das 1px, tak naskoci scrollbary, protoze canvas
 pretece sirku 100% + 2px okraj, coz by se dalo resit pres overflow */
</style>

FF 71.0 64bit w10

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
25.12.2019 11:42
Avatar
7cezar97
Člen
Avatar
7cezar97:30.12.2019 19:31

Děkuji ti za odpověd, tohle řešení funguje.

 
Nahoru Odpovědět
30.12.2019 19:31
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 5 zpráv z 5.