HTML · CSS
HTML 전혀 모르는데요 
<!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>

웹에 돌릴 게임을 만들려고하는데요,

게임방송 하듯이 게임하면서 웹페이지에 캠 화면 출려하게 할려고 하는합니다.

전체 화면의 구성이 게임화면 / 카메라1 / 카메라2 / 점수영역 이렇게 일렬로 구성하려하는데요,

4개가 딱 화면에 다 들어가게끔 구성해놨고, 스크롤바 없이 다 볼 수 있게끔 하고 싶습니다.

아래에 있는 "loading" 클래스랑 "control4" 클래스가 카메라를 키기 위해서 필요한데,

저 코드가 없으면 4개 화면이 일렬로 쭉 다 나오는데, 그렇게 되면 카메라를 못 읽고,

저 코드를 넣으면 게임화면이 밑으로 내려가버립니다. 

왜 이렇게 되는건지 어떻게 해결해야되는지 알려주세요.ㅜ

그리고 div의 순서들은 제 멋대로 구성이 되는건지 도통 어떻게 배치를 해야되는건지 모르겠네요.

제가 코드를 쓴건 게임화면 , 점수영역, 카메라 1, 카메라 2 순인데, 화면에 나오는건

게임화면 , 카메라1, 카메라2, 점수영역 이 순서대로 나오는데 왜 이러는 걸까요?

뭐 하나가 밑으로 내려가야하는 상황에서 왜 게임화면이 밑으로 내려가는 건지도 모르겠습니다.

어렵네요 HTML..

0
1
736
댓글 1