<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<link rel="stylesheet" type="text/css" href="game.css">
<script src="https://cdn.jsdelivr.net/npm/...="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/...="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/...="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/...="anonymous"></script>
<style>
video { max-width: 100%; display: block; margin: 10px auto; }
</style>
</head>
<body>
<div id="gameField">
<div id="gameover">
<center>
<h1>Game Over</h1>
<h4>press 'F5' to restart</h4>
</center>
</div>
<div id="pause">
<center>
<h1>Pause</h1>
<h4>press 'F5' to resume</h4>
</center>
</div>
<table id="nextTable" border=0>
<tr><td id="00"></td><td id="01"></td><td id="02"></td><td id="03"></td></tr>
<tr><td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td></tr>
<tr><td id="20"></td><td id="21"></td><td id="22"></td><td id="23"></td></tr>
<tr><td id="30"></td><td id="31"></td><td id="32"></td><td id="33"></td></tr>
</table>
<div id="scoreField">
<p class="sub">LEVEL</p>
<p id="level">1</p>
<p class="sub">SCORE</p>
<p id="score">0</p>
<p class="sub">NEXT</p>
<p><br><br><br></p>
<p class="sub">HELP</p>
<p id="help">← ↓ →</p>
<p id="help"> ↑ </p>
<p id="help">P to pause</p>
<p class="sub" id="about" onclick="info()">ABOUT</p>
<div id="comboField"><i></i></div>
</div>
<div id="videoField">
<article class="panel is-info">
<p class="panel-heading">
camera1
</p>
<div class="panel-block">
<video class="video1"></canvas>
</div>
</article>
</div>
<div id="videoField">
<article class="panel is-info">
<p class="panel-heading">
camera2
</p>
<div class="panel-block">
<canvas class="video2" width="480px" height="480px"></canvas>
</div>
</article>
</div>
<div class="loading">
<div class="spinner"></div>
</div>
<div style="visibility: hidden" class="control4">
</div>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="camera.js"></script>
</body>
</html>
I'm going to make a game that works on the web. It's a code that tries to put a camera image on the web like it's broadcasting. I want the game screen and the camera screen to fit in one screen. Game screen / Camera1 / Camera2 / Score field I'd like to place it like this. Then you don't have to scroll down to the scroll bar. You can see everything, but the problem is... The "loading" and "control4" sections below. If you insert this part of the code, the game screen goes down. If this code is deleted, the camera will not be able to write. Please tell me why and what to do.~~T
html javascript css
If you look at the HTML code, the loading and control4 classes have a style set to visibility: hidden, so the elements are not visible in the browser. It is not possible to determine where the elements with these two classes are located on the screen, but they may cause the game screen to go down.
Instead of changing the style for the control4 class, try changing the style of the loading class as follows..loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
By applying the above style, the element in the loading class is located in the center of the screen, which prevents it from going down the game screen. You should also change the style for the control4 class so that the game screen does not go down.
Additionally, there are two duplicate id="videoFields". The id is a unique identifier within the document and should not be used in duplicate. You need to modify this part, too.
© 2024 OneMinuteCode. All rights reserved.