Сохранить границы от перемещения - PullRequest
Новая
       13

Сохранить границы от перемещения

0 голосов
/ 05 ноября 2019

Я создал игру с холстом и добавил рамку на CSS, которая вокруг всего холста, 700px 505px, но когда игра запускается, граница сразу же перемещается к нижней части страницы и остается там. Я пытался поиграть со свойством position, но оно продолжается. Любое предложение о том, как остановить это?

Спасибо. 

body {
    width: 700px;
    height: 505px;
    background-image: url("./images/cave.jpg");
    background-size: 700px 505px;
    background-repeat: no-repeat;
    background-position: center;
    }

.game-over {
    position: absolute;
    top: 100px;
}

#canvas {
  margin-left: 315px;

}

.border {
  border: 2px solid black;
  width: 700px;
  height: 505px;
  margin-left: 315px;
  margin-top: -129px;
  background-position: center;
}

.waves {
    background: url(./images/ondas.png) 0% 80%;
    background-size: 50vw auto;
    animation: moves 6s infinite linear;
    min-height: 35vh;
    margin: 0;
    position: relative;
    display: flex;
    height: 224px;
    width: 700px;
    top: -230px;
    opacity: 0.85;
}

@keyframes moves {
  to {
    background-position: -100vw 80%;
  }
}

#startBtn {
        position: absolute;
        top: 250px;
        left: 230px;
        width: 240px;
        height: 50px;
}

#startBtn {
    box-shadow: 0px 0px 0px 2px #9fb4f2;
    background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
    background-color:#7892c2;
    border-radius:10px;
    border:1px solid #4e6096;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:19px;
    padding:12px 37px;
    text-decoration:none;
    text-shadow:0px 1px 0px #283966;
}
#startBtn:hover {
    background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
    background-color:#476e9e;
}

#img {
  margin-top: 60px;
  margin-left: 40px;
}


#tryAgain {
  position: absolute;
  top: 10px;
  margin-left: 50px;
  left: 230px;
  width: 180px;
  height: 50px;
}

.elements {
  margin-left: 315px;  
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Escape the Cave</title>
    <link rel="stylesheet" href="./jogo.css">
  </head>
  <body>
  <div class="elements">
    <div id="gameOver" class="game-over" style="display: none;">
        <button type="button" id="tryAgain" onclick="begin()">Try Again</button>

    </div>
 <div class="waves" style="display: none;">

   </div>

  <button type="button" id="startBtn" onclick="begin()">Play the game!</button> 
  <div id="img">
  <img src="./images/Logo.png">
</div>

  </div>

  <div class="border" style="display: block;"></div>
     <canvas id="canvas" width="700" height="500"></canvas>
      <script src="./jogo.js"></script>
      <script src="./sound.js"></script>

  </body>
</html>
...