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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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:absoluteboleh digunakan untuk meletakkan elemen berbanding bekasnya.Anda juga boleh mengubah suai
z-indexsifat CSS untuk menambah "kedalaman" pada elemen.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; }