Question

我正在使用Tululoo制作HTML5游戏。

我想全屏播放游戏。我用CSS来全屏显示游戏。在Tululoo游戏（div）下面有一个图像，我想显示得分。我给出了X和Y位置的分数，位于图像的顶部。

当我激活全屏时，tululoogame将在页面中间居中。现在我希望将得分图像放置在游戏下方，并将得分放置在图像上的完全相同的点上，就像我在游戏未全屏时和页面左上角时所做的那样。由于屏幕尺寸的不同，我无法给出分数的X和Y位置。

我如何解决这个问题？

这是我的HTML：

<html lang='en'>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var scoreteen = 0;
var scoremutant = 0;
var fullscreenteller = 0;

window.onload = function () {
    document.getElementById('tululoogame').style.display = 'none';
    document.getElementById('scoreteen').style.display = 'none';
    document.getElementById('scoremutant').style.display = 'none';
}

function laatgamezien() {
    document.getElementById('tululoogame').style.display = 'block';
    document.getElementById('play').style.display = 'none';
    document.getElementById('scoreteen').style.display = 'block';
    document.getElementById('scoremutant').style.display = 'block';
}

function launchFullscreen(element) {
laatgamezien(); 
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

function dumpFullscreen() {
  console.log("document.fullscreenElement is: ", document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
  console.log("document.fullscreenEnabled is: ", document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
}

document.addEventListener("fullscreenchange", function(e) {
  console.log("fullscreenchange event! ", e);
});
document.addEventListener("mozfullscreenchange", function(e) {
  console.log("mozfullscreenchange event! ", e);
});
document.addEventListener("webkitfullscreenchange", function(e) {
  console.log("webkitfullscreenchange event! ", e);
});
document.addEventListener("msfullscreenchange", function(e) {
  console.log("msfullscreenchange event! ", e);
});

function puntvoorteen(){
if (NaN === (scoreteen)) {  
    scoreteen = 0;
}
scoreteen++;
tekst = scoreteen;
document.getElementById("scoreteen").innerHTML = tekst;
} 
function puntvoormutant(){
if (NaN === (scoremutant)) {    
    scoremutant = 0;
}
scoremutant++;
tekst = scoremutant;
document.getElementById("scoremutant").innerHTML = tekst;
} 
</script> 
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='pragma' content='no-cache' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width, height=device-height' />
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
<meta charset='utf-8' />
</head>
<body style='background: black; margin: 0; padding: 0; overflow: hidden;'>
<div id="play"> 
    <img src="afbeeldingen/playbutton.png" width="180" height="180" onclick="launchFullscreen(document.documentElement);" />
</div>
<div id='tululoogame'></div>
<img src="afbeeldingen/opzetscore.png" width="1024" height="98" id="scorepicture">
<div id="scoreteen"> </div>
<div id="scoremutant"> </div>
<script type='text/javascript' src='game.js'></script>
</body>
</html>

这是我的CSS：

#scoreteen {
        position:absolute;      
        color:white;
        left: 680px;
        top: 670px;
        font-size: 30px;
}
#scoremutant {
        position:absolute;      
        color:white;
        left: 320px;
        top: 670px;
        font-size: 30px;
}

#play {
 position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 } 

#tululoogame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  /*height: 100vh;
  width: 100vw;*/
 }

 #scorepicture {

 }

还有一些截图： Game not in fullscreen Game in fullscreen

CSS将div放在图像全屏上

0 个答案: