In a simple HTML,CSS and JavaScript game, I replaced (in the CSS)
background-color:green;
with
background-image: url(flappybird.png);
and I also tried: (and with single quotations)
background-image: url("flappybird.png");
but the image is not being displayed on the page. I have tried adding the semi colon and also speech marks.
I also tried adding z-index=10000000 to character, but that didn't help.
Can anyone tell me what I am doing wrong. I can confirm that the image is named correctly flappybird.png and is in the root folder.
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
function jump(){
if(character.classlist!="animate"){
character.classList.add("animate");
}
setTimeout(function(){
character.classList.remove("animate");
},500);
}
//right movement
function right() {
var leftVal = parseInt(window.getComputedStyle(character).getPropertyValue("left"))
character.style.left = (leftVal + 30) + "px";
}
//left movement
function left() {
var leftVal = parseInt(window.getComputedStyle(character).getPropertyValue("left"))
character.style.left = (leftVal - 30) + "px";
}
var checkDead =setInterval(function(){
var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
var enemyLeft = parseInt(window.getComputedStyle(enemy).getPropertyValue("left"));
//ADD VARIABLE TO FIND CHARACTER RIGHT -if it collides with enemy left, you are out
//remove the condition that the enemy has to be in the first 30 pixels of the game (left side)
var characterRight =parseInt(window.getComputedStyle(character).getPropertyValue("right"));
if(
characterTop==enemyLeft //have tried characterRight==enemyLeft didn't work
)
{
enemy.style.animation="none"; //remove the animation
enemy.style.display="none";
alert("Game Over");
}
},10);
//left
addEventListener("keydown", function(e) {
if(e.keyCode == 37) left()
})
//jump (up)
addEventListener("keydown", function(e) {
if (e.keyCode === 38) {
jump()
}
})
//right
addEventListener("keydown", function(e) {
if (e.keyCode === 39) {
right()
}
})*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:4px solid #171918;
}
#character{
width:30px;
height:120px;
/*background-color:green;*/
background-image: url(flappybird.png);
position:relative;
top:320px;
border-radius:20px;
/*animation: jump 300ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
le
ft:440px;
animation: moveenemy 1s infinite linear;
}
@keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
@keyframes jump{
0%{top:380px;}
30%{top:50px;}
50%{top:40px;}
100%{top:380px;}
}
/* adding sky*/
#sky{
width:500px;
height:340px;
background-color:skyblue;
position:absolute;
top:118px;
}
/* adding ground */
#ground{
width:500px;
height:170px;
background-color:bisque;
position:absolute;
top:450px;
}<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<div id="game">
<div id="sky"></div>
<div id="ground"></div>
<div id="enemy"></div>
<div id="character"></div>
</div>
<script src="script.js"></script>
</body>
</html>A comment below suggests the option to resize and add background-size: cover; This works to some extent but does not solve the problem of getting the image to fit the specifications we want. Resizing the width and height here, doesn't resize - it just uncovers or covers the image.
If I was to use an image, it should also resize, and I note the width and height don't work as expected in this situation. Could that also be addressed in any answers.
The below code thus uncovers the image if I adjust the width and height, but does not resize correctly, which I cannot figure out.
#character{
width:60px;
height:50px;
/*background-color:green;*/
background-image: url(flappybird.png);
position:relative;
top:320px;
background-size: cover;
/*animation: jump 300ms */
