在javascript游戏的css中添加jpg图像答案

【问题标题】：adding an jpg image in the css in a javascript game在javascript游戏的css中添加jpg图像
【发布时间】：2021-02-03 22:28:12
【问题描述】：

我目前有一个飞翔的小鸟游戏的开头，css 生成了一个小红球。我想用从互联网上获取的 jpg 图像替换球，我也可以从 css 中设置样式和控制/动画，就像我对球所做的那样。

图片来源：“https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg”

我尝试了各种方法将其放入 CSS 和 HTML 中，但不完全理解它们是如何联系在一起的。

如果我在 html 中添加图像（如我所做的那样），我可以不使用 CSS 设置它的样式吗？

现在，我想：

在屏幕上渲染图像（就像我所做的那样）
将其设置为与红球相同的规格（例如 20 x 20 等，包括起始位置、定位等）

目前，CSS 中的 TOP POSITION 似乎有效（当应用于图像时）但宽度和高度无效。我不得不将图像的宽度和高度硬编码到HTML。

请提供有关最佳实践和解决方案的任何解释。

完整的当前代码在这里：

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";
});

【问题讨论】：

标签： javascript html css image

【解决方案1】：

您必须将您的样式添加到 img 标签。您还必须添加一个 display:block 否则，图像将不会采用您指定的宽度和高度。

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

}

如果您想了解如何选择组件以及哪个组件更强大，您可以阅读 CSS Batman 指南：http://batificity.com/

对于您的问题，您还可以使用对象拟合。像这样：

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>

完整的对象匹配规范在这里：https://developer.mozilla.org/fr/docs/Web/CSS/object-fit

【讨论】：

【解决方案2】：

您有很多方法可以解决您的问题。我认为最好的方法是根本不使用 IMG 对象，而是使用更改其背景属性的 DIV。这使您可以更轻松地使用精灵表，因为您可以在背景图像中设置 x 和 y 的偏移量。这还允许您通过更改 background-image 属性更轻松地更改正在使用的图像。

或者，您可以继续使用 IMG 对象，只需卸载该 HTML 并将其替换为具有不同 src 参数的新 IMG 对象。根据我的经验，JQuery 使这更容易管理，但使用直接 JS 也可以相当容易地完成。以下是我在 JQuery 中的做法（因为我只是更好地记住了这个语法）：

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

至于编辑宽度/高度，归结为事后手动设置偏移量并单独保留宽度/高度（假设您尚未在图像上强制尺寸）或手动放置/定位，只需每次替换图像时手动设置宽度/高度。

【讨论】：