CODEWITHSUNDEEP
javascripthtmlcssimage
Compoot
Compoot

Reputation: 2387

adding an jpg image in the css in a javascript game

I currently have the beginning's of a flappy bird game and the css generates a small red ball. I want to replace the ball with a jpg image taken from the internet, which I can also style and control/animate from the css, as I would do with the ball.

Image source: "https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg"

I've tried various things to put it in the CSS and in the HTML, but do not fully understand how it all ties together.

If I add the image (as I have done) in the html, can I not style it using the CSS?

For now, I want to:

  1. Render the image on the screen (as I have done)
  2. Style it to the same specs as the red ball (e.g. 20 x 20 etc, with starting positions, positioning etc)

Currently the TOP POSITION in the CSS seems to work (when applied to the image) but not the width and height. I had to hard code the width and the height of the image in to the HTML.

Any explanations as to best practices and a solution please.

Full current code here:

https://repl.it/@iamapersonthing/flappybirds

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>FlappyBird</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

 
   
    <div id="game">


     


      <div id="block"></div>
      <div id="hole"></div>
      <div id="character">
        <img src="https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg">
      </div>
</div>


    <script src="script.js"></script>
  </body>
</html>

CSS

*{
  padding:0;
  margin:0;
  
}

#game{
  width:400px;
  height:500px;
  border: 1px solid greenyellow;
  margin:auto;
  overflow:hidden;
}

#block{
  width:50px;
  height:500px;
  background-color:greenyellow;
  position: relative;
  left:400px;
  animation:block 2s infinite linear;
}

@keyframes block{
  0%{left:400px}
  100%{left:-50px}
}

#hole{
  width:50px;
  height:150px;
  background-color:red;
  position: relative;
  left:400px;
  top:-500px;
  animation:block 2s infinite linear;

}

#character{
width:20px;
height:20px;
background-color:red;
position: absolute;
top:100px;
border-radius:50%;

}

JavaScript

var block = document.getElementById("block");
var hole = document.getElementById("hole");
hole.addEventListener('animationiteration',() => {
  var random = -((Math.random()*300)+150);
  hole.style.top=random +"px";
});

Upvotes: 0

Views: 416

Answers (2)

SyrslyTwitch
SyrslyTwitch

Reputation: 29

You have many ways to possibly solve your issue. The best way in my opinion is to not use a IMG object at all and instead use a DIV that changes its background properties. This allows you to use a sprite sheet more easily because you can set the offsets for x and y in a background image. This also allows you to more easily change the image being used by changing the background-image property.

Alternatively, you can continue using IMG objects and just unload that HTML and replace it with a new IMG object with a different src parameter. JQuery makes this a lot easier to manage in my experience, but it can be done fairly easily using straight JS as well. Here's how I'd do this in JQuery (because I simply remember this syntax better):

$('#character').html('<img src="new image address">');

As far as editing the width/height, it comes down to just manually setting the offset afterwards and leaving the width/height alone (assuming you aren't already forcing dimensions onto the image) or for manual placement/positioning, just manually setting the width/height every time you replace the image.

Upvotes: 1

yannickvdthoren
yannickvdthoren

Reputation: 121

You have to add you style to the img tag. You'll have to add a display:block as well otherwise, the image will not take the width and height you specified.

#character img{
width:20px;
height:20px;
background-color:red;
position: absolute;
top:100px;
border-radius:50%;

}

If you want a guide on how to select your components and which one is stronger, you can read that CSS Batman guide : http://batificity.com/

For your problem, you can also use an object-fit. Like so :

var block = document.getElementById("block");
var hole = document.getElementById("hole");
hole.addEventListener('animationiteration',() => {
  var random = -((Math.random()*300)+150);
  hole.style.top=random +"px";
});
*{
  padding:0;
  margin:0;
  
}

#game{
  width:400px;
  height:500px;
  border: 1px solid greenyellow;
  margin:auto;
  overflow:hidden;
}

#block{
  width:50px;
  height:500px;
  background-color:greenyellow;
  position: relative;
  left:400px;
  animation:block 2s infinite linear;
}

@keyframes block{
  0%{left:400px}
  100%{left:-50px}
}

#hole{
  width:50px;
  height:150px;
  background-color:red;
  position: relative;
  left:400px;
  top:-500px;
  animation:block 2s infinite linear;

}

#character{
display:block;
width:20px;
height:20px;
background-color:red;
position: absolute;
top:100px;
border-radius:50%;
}
#character img{
width: 100%;
height: 100%;
object-fit: cover; 
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>FlappyBird</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="game">

      <div id="block"></div>
      <div id="hole"></div>
      <div id="character">
        <img src="https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg">
      </div>
</div>


    <script src="script.js"></script>
  </body>
</html>

Full object-fit specification here : https://developer.mozilla.org/fr/docs/Web/CSS/object-fit

Upvotes: 2

Related Questions