Question

我正在尝试制作一个非常基本的游戏，并且我有一辆可以与wasd一起移动的火箭飞船。我正在用html div和css伪元素制作这艘飞船。此代码段中的所有内容均在工作，大约从底部开始。（＃base2 :: before）为什么在加载该元素时不显示该元素？

var element;

function moveSelection(evt) {
  element = document.getElementById("base");
  switch (evt.keyCode) {
    case 65:
      element.style.left = (parseInt(element.style.left) - 10) + 'px';
      break;
    case 68:
      element.style.left = (parseInt(element.style.left) + 10) + 'px';
      break;
    case 87:
      element.style.top = (parseInt(element.style.top) - 10) + 'px';
      break;
    case 83:
      element.style.top = (parseInt(element.style.top) + 10) + 'px';
      break;
  }
  element = document.getElementById("base2");
  switch (evt.keyCode) {
    case 65:
      element.style.left = (parseInt(element.style.left) - 10) + 'px';
      break;
    case 68:
      element.style.left = (parseInt(element.style.left) + 10) + 'px';
      break;
    case 87:
      element.style.top = (parseInt(element.style.top) - 10) + 'px';
      break;
    case 83:
      element.style.top = (parseInt(element.style.top) + 10) + 'px';
      break;
  }
}
window.addEventListener('keydown', moveSelection);

#base {
  background: red;
  display: inline-block;
  height: 150px;
  margin-top: 60px;
  position: relative;
  width: 70px;
  margin-left: 45px;
}

#base::before {
  border-bottom: 60px solid darkgrey;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -60px;
  width: 0;
}

#base::after {
  border-bottom: 120px solid #FFA300;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  height: 0;
  margin-top: 30px;
  margin-left: -45px;
  content: "";
  position: absolute;
  z-index: -1;
}

#base2 {
  clip-path: polygon(38% 0, 62% 0, 60% 20%, 70% 45%, 80% 75%, 100% 100%, 0 100%, 20% 75%, 30% 45%, 40% 20%);
  width: 70px;
  height: 25px;
  background: grey;
  margin-top: 210px;
  margin-left: 45px;
}
#base2::before {
  width: 50px;
  height: 50px;
  content: "";
  border-radius: 50%;
  background: black;
  z-index: 2;
}

<div id="base" name="char" style="top: 0; left: 0; position: absolute;"></div>
<div id="base2" name="char" style="top: 0; left: 0; position: absolute;"></div>

它是什么样的：

页面上的某个地方应该有一个黑圈，但是没有。

Answer 1

将display: block添加到您的#base2::before{..}中，您会在火箭底部找到圆圈。

var element;

function moveSelection(evt) {
  element = document.getElementById("base");
  switch (evt.keyCode) {
    case 65:
      element.style.left = (parseInt(element.style.left) - 10) + 'px';
      break;
    case 68:
      element.style.left = (parseInt(element.style.left) + 10) + 'px';
      break;
    case 87:
      element.style.top = (parseInt(element.style.top) - 10) + 'px';
      break;
    case 83:
      element.style.top = (parseInt(element.style.top) + 10) + 'px';
      break;
  }
  element = document.getElementById("base2");
  switch (evt.keyCode) {
    case 65:
      element.style.left = (parseInt(element.style.left) - 10) + 'px';
      break;
    case 68:
      element.style.left = (parseInt(element.style.left) + 10) + 'px';
      break;
    case 87:
      element.style.top = (parseInt(element.style.top) - 10) + 'px';
      break;
    case 83:
      element.style.top = (parseInt(element.style.top) + 10) + 'px';
      break;
  }
}
window.addEventListener('keydown', moveSelection);

#base {
  background: red;
  display: inline-block;
  height: 150px;
  margin-top: 60px;
  position: relative;
  width: 70px;
  margin-left: 45px;
}

#base::before {
  border-bottom: 60px solid darkgrey;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -60px;
  width: 0;
}

#base::after {
  border-bottom: 120px solid #FFA300;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  height: 0;
  margin-top: 30px;
  margin-left: -45px;
  content: "";
  position: absolute;
  z-index: -1;
}

#base2 {
  clip-path: polygon(38% 0, 62% 0, 60% 20%, 70% 45%, 80% 75%, 100% 100%, 0 100%, 20% 75%, 30% 45%, 40% 20%);
  width: 70px;
  height: 25px;
  background: grey;
  margin-top: 210px;
  margin-left: 45px;
}
#base2::before {
  width: 50px;
  height: 50px;
  content: "";
  border-radius: 50%;
  background: black;
  z-index: 2;
  display: block;
}

<div id="base" name="char" style="top: 0; left: 0; position: absolute;"></div>
<div id="base2" name="char" style="top: 0; left: 0; position: absolute;"></div>

Answer 2

您可以使用一个元素简化如下所示的代码，如果要为火箭设置动画，以后可以轻松地处理该元素

.rocket {
  width:180px;
  height:220px;
  display:inline-block;
  background:
    /* Top triangle */
    linear-gradient(to bottom left ,transparent 49%,darkgrey 50%) top 0 left calc(50% + 17.5px)/35px 60px,   
    linear-gradient(to bottom right,transparent 49%,darkgrey 50%) top 0 left calc(50% - 17.5px)/35px 60px,
    /* body of rocket */
    linear-gradient(red,red) bottom/70px calc(100% - 60px),
    /* fins of rocket */
    linear-gradient(to bottom left ,transparent 49%,#FFA300 50%) bottom right/50% 50%,
    linear-gradient(to bottom right,transparent 49%,#FFA300 50%) bottom left /50% 50%;
   background-repeat:no-repeat;
   position:relative;
}
.rocket::after { /* Motor */
  content:"";
  position:absolute;
  width: 70px;
  height: 25px;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  background: grey;
  clip-path: polygon(38% 0, 62% 0, 60% 20%, 70% 45%, 80% 75%, 100% 100%, 0 100%, 20% 75%, 30% 45%, 40% 20%);
}
.rocket::before { /* flames */
  content:"";
  position:absolute;
  background:radial-gradient(orange,red);
  border-radius:50%;
  width:50px;
  height:80px;
  top:100%;
  left:50%;
  transform:translate(-50%,10px);
}

<div class="rocket"></div>

伪元素未出现

2 个答案: