Je souhaite définir une image d'arrière-plan pour ce jeu simple que j'ai créé, mais je ne sais pas comment centrer l'image sur l'écran de saisie et couvrir toute la hauteur et la largeur de la page. Je veux également que l'image soit l'arrière-plan afin que le jeu soit au-dessus de l'image et que l'image soit le calque inférieur.
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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Voici une façon de résoudre ce problème :
Étape 1 : Créer un conteneur pour le jeu
.game-container { width: 100vw; /* Or whatever width you want */ height: 100vh; /* or whatever height you want */ position: relative; }Étape 2 : Ajouter une image d'arrière-plan
.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%; }Le CSS ci-dessus poussera le conteneur de sorte que le coin supérieur gauche de l'image soit au centre de l'écran. Nous voulons qu'il soit centré, nous devons donc le déplacer en fonction de sa largeur :
.game-bg { /* Code from earlier here */ transform: translate(-50%, -50%); }Les éléments dont le conteneur parent a
position:relative，因此任何具有position:absolutepeuvent être utilisés pour positionner l'élément par rapport à son conteneur.Vous pouvez également modifier
z-indexles propriétés CSS pour ajouter de la « profondeur » aux éléments.C'est une méthode plus simple, sauf si vous avez besoin que l'arrière-plan soit une balise d'image.
Ajoutez un div en forme de ciel et réglez sa hauteur sur
（100% - #ground 的高度）。添加此 div 会将分数 div 一直推到底部。为了避免这种情况，请使用position:absolute定位，然后添加top: 0;Repositionnez-le dans le coin supérieur gauche.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; }