我想為我創建的這個簡單遊戲設定背景圖像，但不知道如何使圖像居中於輸入畫面並覆蓋所有頁面的高度和寬度。我還希望圖像成為背景，這樣遊戲就可以在圖像之上，圖像應該是底層。
let character = document.getElementById('character');
let characterBottom = parseInt(window.getComputedStyle(character).getPropertyValue('bottom'));
let characterRight = parseInt(window.getComputedStyle(character).getPropertyValue('right'));
let characterWidth = parseInt(window.getComputedStyle(character).getPropertyValue('width'));
let ground = document.getElementById('ground');
let groundBottom = parseInt(window.getComputedStyle(ground).getPropertyValue('bottom'));
let groundHeight = parseInt(window.getComputedStyle(ground).getPropertyValue('height'));
let isJumping = false;
let upTime;
let downTime;
let displayScore = document.getElementById('score');
let score = 0;
function jump(){
if(isJumping) return;
upTime = setInterval(() => {
if(characterBottom >= groundHeight + 250){
clearInterval(upTime);
downTime = setInterval(() => {
if(characterBottom <= groundHeight + 10){
clearInterval(downTime);
isJumping = false;
}
characterBottom -= 10;
character.style.bottom = characterBottom + 'px';
}, 20);
}
characterBottom += 10;
character.style.bottom = characterBottom + 'px';
isJumping = true;
}, 20);
}
function showScore(){
score++;
displayScore.innerText = score;
}
setInterval(showScore, 100);
function generateObstacle(){
let obstacles = document.querySelector('.obstacles');
let obstacle = document.createElement('div');
obstacle.setAttribute('class', 'obstacle');
obstacles.appendChild(obstacle);
let randomTimeout = Math.floor(Math.random() * 1000) + 1000;
let obstacleRight = -30;
let obstacleBottom = 100;
let obstacleWidth = 30;
let obstacleHeight = Math.floor(Math.random() * 50) +50;
obstacle.style.backgroundColor = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
function moveObstacle(){
obstacleRight += 5;
obstacle.style.right = obstacleRight + 'px';
obstacle.style.bottom = obstacleBottom + 'px';
obstacle.style.width = obstacleWidth + 'px';
obstacle.style.height = obstacleHeight + 'px';
if(characterRight >= obstacleRight - characterWidth && characterRight <= obstacleRight + obstacleWidth && characterBottom <= obstacleBottom + obstacleHeight){
alert('Game Over! Your score is: ' +score);
clearInterval(obstacleInterval);
clearTimeout(obstacleTimeout);
location.reload();
}
}
let obstacleInterval = setInterval(moveObstacle, 20);
let obstacleTimeout = setTimeout(generateObstacle, randomTimeout);
}
generateObstacle();
function control(e){
if (e.key == 'ArrowUp' || e.key == ' '){
jump();
}
}
document.addEventListener('keydown', control);
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
#ground{
width: 100%;
height: 100px;
background-color: purple;
position: absolute;
bottom: 0;
}
#character{
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: absolute;
bottom: 100px;
right: calc(100% - 100px);
}
.obstacle{
width: 30px;
height: 100px;
background-color: black;
position: absolute;
bottom: 100px;
right: 0;
}
h2{
font-family: sans-serif;
margin-top: 10px;
margin-left: 10px
<html lang="en"?
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<title>Space Jump</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="bg.jpg" id="bg">
</body>
</html>
<div id="ground"></div>
<div id="character"></div>
<div class="obstacles"></div>
<h2>Score: <span id="score">0</h2>
<script src="script.js"></script>
</body>
</html>
P粉3981178572024-03-23 09:08:21
這是解決此問題的一種方法：
...
.game-container {
width: 100vw; /* Or whatever width you want */
height: 100vh; /* or whatever height you want */
position: relative;
}
.game-bg {
/* Push the top border of the image 50% of the way down */
top: 50%;
/* Push the left border of the image 50% to the right */
left: 50%;
}
上面的CSS將推動容器，使映像的左上角位於螢幕的中心。我們想讓它居中，所以我們需要根據它的寬度移動它：
.game-bg {
/* Code from earlier here */
transform: translate(-50%, -50%);
}
由於父容器具有 position:relative，因此任何具有 position:absolute 的元素都可用於相對於其容器定位元素。
您也可以修改 z-index CSS 屬性，為元素新增「深度」。
P粉7908197272024-03-23 00:07:44
這是一個更簡單的方法，除非您需要背景是圖片標籤。
新增一個類似天空的div，並將其高度設定為（100% - #ground 的高度）。新增此 div 會將 分數 div 一直推到底部。為了避免這種情況，請使用 position:absolute 定位 ，然後加上 top: 0; 將其重新定位到左上角。
Score: 0
#sky {
background-image: url("bg.jpg");
height: calc(100% - 100px);
}
h2 {
font-family: sans-serif;
margin-top: 10px;
margin-left: 10px;
position: absolute;
top: 0;
}