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>
这是解决此问题的一种方法：
第 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-indexCSS 属性，为元素添加“深度”。这是一个更简单的方法，除非您需要背景是图像标签。
添加一个类似天空的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; }