cari

Rumah  >  Soal Jawab  >  teks badan

Cara menetapkan imej latar belakang, menjadikannya skrin penuh dan tetapkannya ke bahagian belakang halaman (HTML, CSS, JavaScript)

Saya ingin menetapkan imej latar belakang untuk permainan mudah yang saya cipta ini tetapi tidak tahu bagaimana untuk mendapatkan imej untuk dipusatkan pada skrin input dan meliputi semua ketinggian dan lebar halaman. Saya juga mahu imej menjadi latar belakang supaya permainan berada di atas imej dan imej harus menjadi lapisan asas. 

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粉384244473317 hari yang lalu431

membalas semua(2)saya akan balas

  • P粉398117857

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

    Berikut adalah satu cara untuk menyelesaikan masalah ini:

    Langkah 1: Buat bekas untuk permainan

    
    ...

    

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

    Langkah 2: Tambahkan imej latar belakang

    
    

    

    .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 di atas akan menolak bekas supaya penjuru kiri sebelah atas imej berada di tengah-tengah skrin. Kami mahu ia dipusatkan, jadi kami perlu mengalihkannya berdasarkan lebarnya: 

    .game-bg {
    /* Code from earlier here */

    transform: translate(-50%, -50%);
}

    Elemen yang bekas induknya mempunyai position:relative，因此任何具有 position:absolute boleh digunakan untuk meletakkan elemen berbanding bekasnya.

    Anda juga boleh mengubah suai z-index sifat CSS untuk menambah "kedalaman" pada elemen.

    balas
    0
  • P粉790819727

    P粉7908197272024-03-23 00:07:44

    Ini adalah kaedah yang lebih mudah melainkan anda memerlukan latar belakang untuk menjadi tag imej.

    Tambahkan div seperti langit dan tetapkan ketinggiannya kepada （100% - #ground 的高度）。添加此 div 会将

    分数 div 一直推到底部。为了避免这种情况，请使用 position:absolute 定位

    ，然后添加 top: 0;Ubah kedudukannya ke penjuru kiri sebelah atas. 

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

    balas
    0

  • Batalbalas