suchen

Heim  >  Fragen und Antworten  >  Hauptteil

So legen Sie ein Hintergrundbild fest, machen es im Vollbildmodus und platzieren es auf der Rückseite der Seite (HTML, CSS, JavaScript)

Ich möchte ein Hintergrundbild für dieses einfache Spiel festlegen, das ich erstellt habe, weiß aber nicht, wie ich das Bild auf dem Eingabebildschirm zentrieren und die gesamte Seitenhöhe und -breite abdecken kann. Ich möchte auch, dass das Bild der Hintergrund ist, sodass das Spiel oben auf dem Bild liegt und das Bild die unterste Ebene sein sollte. 

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粉384244473P粉384244473245 Tage vor368

Antworte allen(2)Ich werde antworten

  • P粉398117857

    P粉3981178572024-03-23 09:08:21

    这是解决此问题的一种方法：

    第 1 步：为游戏创建容器

    
    ...

    

    .game-container {
    width: 100vw;   /* Or whatever width you want */
    height: 100vh;  /* or whatever height you want */
    position: relative;
}

    第 2 步：添加背景图片

    
    

    

    .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 属性，为元素添加“深度”。

    Antwort
    0
  • P粉790819727

    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;
}

    Antwort
    0

  • StornierenAntwort