Question

在我的代码中有一张Mario的图片，但是他总是位于屏幕的顶部，我无法找到要编辑的参数，以便在刷新页面时更改其即时定位。换句话说，我的代码的哪一部分（我在马里奥图像的html绝对定位标签中猜测它）我是否能够让马里奥出现在屏幕的底部。

＆＃13;

// TIMER
window.onload = function () {
//this is where you can modifies the time amount.
    var minutes= 29 ,
        display = document.querySelector('#time');
    startTimer(minutes, display);
};


function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
            window.alert("GAME OVER ( F5 TO PLAY AGAIN! )");
            
        }
    }, 1000);
}



// MOVEMENT

function leftArrowPressed() {
            var element = document.getElementById("Mario");
            element.style.left = parseInt(element.style.left) - 5 + 'px';
            }

            function rightArrowPressed() {
            var element = document.getElementById("Mario");
            element.style.left = parseInt(element.style.left) + 5 + 'px';

            }

            function upArrowPressed() {
            var element = document.getElementById("Mario");
            element.style.top = parseInt(element.style.top) - 5 + 'px';
            }

            function downArrowPressed() {
            var element = document.getElementById("Mario");
            element.style.top = parseInt(element.style.top) + 5 + 'px';
            }

            function moveSelection(evt) {
                switch (evt.keyCode) {
                    case 37:
                    leftArrowPressed();
                    break;
                    case 39:
                    rightArrowPressed();
                    break;
                    case 38:
                    upArrowPressed();
                    break;
                    case 40:
                    downArrowPressed();
                    break;
                    }
                };

        function docReady()
        {
          
          window.addEventListener('keydown', moveSelection);
        }

＆＃13;

html {
  background-image:url("BACKGROUND.png");
  background-repeat: no-repeat;
  background-size: 1920px 1080px;
  text-align: center;
}

.Title {
  font-family: Bebas Neue;
  text-align: center;
  font-size: 50px;
  color: #52db3d;
  display:inline;
}
.Titlev2 {
  font-family: Bebas Neue;
  text-align: center;
  font-size: 50px;
  color: #000000;
  display:inline;
}
.Titlev3 {
  font-family: Bebas Neue;
  text-align: center;
  font-size: 50px;
  color: #e60000;
  display:inline;
}

#Luigi {
  height:450px;
  width:960px;
  position:absolute;
  right:0px;
  bottom:0px;
}

#Timer {
  font-family:Bebas Neue;
  font-size: 30px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Jeu</title>
<link rel = "stylesheet" type = "text/css" href = "CSS.css">
<script src="JS.js"></script>
</head>
<body onload="docReady()" onkeydown="" onkeyup="">
  <h1 class="Title">Luigi  </h1>
   <h1 class="Titlev2">V.S  </h1>
    <h1 class="Titlev3">Mario</h1>
     <img id="Mario" src="MarioSprite.png" style="position:absolute; left:0; top:0;" height="450" width="960">
     <img id="Luigi" src="LuigiSprite.png">
     <div id="Timer"><h1><span id="time">00:30</span></h1></div>
     <audio autoplay src="Soundtrack.mp3"></audio>
    </body>
</html>

＆＃13;

在刷新页面时，我可以在哪里定义我想要的图像（绝对定位）？

0 个答案: