HTML、CSS 和 JavaScript 游戏中的背景图像未显示

Question

在一个简单的 HTML,CSS 和 JavaScript 游戏中，我替换了（在 CSS 中）

background-color:green;

和

background-image: url(flappybird.png);

我也试过：（和单引号）

background-image: url("flappybird.png");

但图像未显示在页面上。 我尝试添加分号和语音标记。

我还尝试将 z-index=10000000 添加到字符中，但这没有帮助。

谁能告诉我我做错了什么。 我可以确认图像被正确命名为 flappybird.png 并且位于根文件夹中。

 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>

下面的评论建议调整大小和添加背景大小的选项：封面； 这在一定程度上有效，但不能解决让图像符合我们想要的规格的问题。 在此处调整宽度和高度，不会调整大小 - 它只是显示或覆盖图像。

如果我要使用图像，它也应该调整大小，并且我注意到在这种情况下宽度和高度不能按预期工作。 是否也可以在任何答案中解决。

因此，如果我调整宽度和高度，下面的代码会显示图像，但没有正确调整大小，我无法弄清楚。

#character{
    width:60px;
    height:50px;
    /*background-color:green;*/

    background-image: url(flappybird.png);
    position:relative;
    top:320px;
    background-size: cover;
    /*animation: jump 300ms */

Answer 1

这是你想要达到的目标吗？ 我添加了一个小边框以显示已解决的宽度问题。

#character {
  width: 50px;
  border: 1px solid black;
  height: 50px;
  background-color: green;
  background: url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fatomix.vg%2Fwp-content%2Fuploads%2F2014%2F05%2FFlappy-Bird.png&f=1&nofb=1")
    center no-repeat;
  background-size: contain;
  position: relative;
  top: 50%;
  border-radius: 20px;
  /*animation: jump 300ms */
}

更新：

background-size: contain; 规则告诉背景将其大小调整为容器，而不拉伸它，您可以在此处阅读有关此规则值的更多信息。 如果容器比 img 大，它可能会重复，所以明智的做法是使用background-repeat: no-repeat;来控制它。 , 或使用background: <url> <position> <repeat>; 更多关于这里。

关于顶部从px到%的更改，这纯粹是在尝试解决您的问题时进行的实验。 您可以添加原始值。

HTML、CSS 和 JavaScript 游戏中的背景图像未显示

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-02-05 13:19:15

HTML、CSS 和 JavaScript 游戏中的背景图像未显示

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-02-05 13:19:15

解决方案1
1 已采纳 2021-02-05 13:19:15