Diskuze: Canvas fullscreen

Naučíme tě pracovat na home-office.

Zjistit více...

Aktivity

7cezar97

Člen

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

Peter Mlich

Člen

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

7cezar97

Člen

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

Peter Mlich

Člen

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č

Nahoru Odpovědět

25.12.2019 11:42

7cezar97

Člen

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.