I want to set a background image for this simple game I've created but don't know how to get the image to be centered on the input screen and cover all page height and width. I also want the image to be the background so the game is on top of the image and the image should be the bottom layer.
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] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Here is one way to solve this problem:
Step 1: Create a container for the game
.game-container { width: 100vw; /* Or whatever width you want */ height: 100vh; /* or whatever height you want */ position: relative; }Step 2: Add background image
.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%; }The CSS above will push the container so that the top left corner of the image is in the center of the screen. We want it to be centered, so we need to move it based on its width:
.game-bg { /* Code from earlier here */ transform: translate(-50%, -50%); }Since the parent container has
position:relative, any element withposition:absolutecan be used to position the element relative to its container.You can also modify the
z-indexCSS property to add "depth" to the element.This is a simpler method unless you need the background to be an image tag.
Add a sky-like div and set its height to
(100% - #ground's height). Adding this div will push thescore div all the way to the bottom. To avoid this, useposition:absoluteto positionand then addtop: 0;to reposition it to the top left corner.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; }