Question

我是初学者程序员，试图创建我的第一个项目，结合了html，css和javascript。我已经研究了几个小时的主题，我想找到一个有效的解决方案和解释。我有一个HTML和相应的java和css文件。我正在尝试创建一个记忆游戏。我试图在用户点击它时翻转卡片。我已经阅读了各种解决方案，但没有一个我可以直接申请。我正在寻找一个纯粹的javascript / css解决方案。提前谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css"> <!--making a link to the css stylesheet-->
    <script src="scripts.js" type="text/javascript"></script>
    <meta charset="UTF-8">
    <title>Matching Game</title>
</head>
<body>
    <div class = "title"><h1>Matching Game</h1></div>
    <div class = "infobar">
        <span>
            __stars__
        </span>
        <span>
            __move__
        </span>
        <span>
            __timer__
        </span>
        <span>
            __restart__
        </span>
    </div>
    <div class = "gameboard">
        <div class = "cardrows">
            <div class = "flip1">
                <div id = "card1" class = "card, off" onclick="flip(this.id)">
                    <div class = "cardback">
                        2
                    </div>
                    <div class = "cardfront ">
                        1
                    </div>
                </div>
            </div>
            <div class = "flip2">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip3">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip4">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
        </div>
        <div class = "cardrows">
            <div class = "flip1">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip2">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip3">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip4">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
        </div>
        <div class = "cardrows">
            <div class = "flip1">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip2">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip3">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip4">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
        </div>
        <div class = "cardrows">
            <div class = "flip1">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip2">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip3">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip4">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

* {
    -webkit-box-sizing: border-box; /*few lines of code for compatibility and for correct box resizing*/
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgb(228, 227, 225);
}

.title {
    text-align: center;
    color: black;
}

.gameboard {
    width: 530px;
    height: 530px;
    background-color: #92bbce;
    box-shadow: 0 0 11px 5px #00BCD4;
    position: fixed;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.cardrows {
    width: 524px;
    height: 125px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 6px;
    margin-bottom: 6px;
    background-color: transparent;
    position: relative;
}

.infobar {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


.cardback, .cardfront, .flip1, .flip2, .flip3, .flip4 {
    width: 125px;
    height: 125px;
}

.cardback, .cardfront {
/* hide back during swap */
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;

    transition: transform 1s;
    transform-style: preserve-3d;
}

.cardfront {
/* front placed above back element */
    z-index: 2;
    transform: rotateY(0deg);

    background-color: #108DC0;
}

.cardback {
/* back hidden at start */
    transform: rotateY(180deg);
}

.card {
    position: relative;
}

.flip1, .flip2, .flip3, .flip4 {
/*container keeps perspective */
    perspective: 1000px;
    position: absolute;
}

.flip1 {
    left: 3px;
}

.flip2 {
    left: 134px;
}

.flip3 {
    left: 265px;
}

.flip4 {
    left: 396px;
}

.on {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );

    transform: rotateY( 180deg );
}

.off {
    -webkit-transform: rotateY( 0deg );
    -moz-transform: rotateY( 0deg );
    -o-transform: rotateY( 0deg );

    transform: rotateY( 0deg );

}

的java：

function flip(el) {
    console.log("flip called");
    var elem = document.getElementById(el);
    console.log(elem);
    elem.className = "on";
    console.log(elem);
}

Answer 1

如果你只是试图让卡片翻转，那你就非常接近了！

我刚刚添加了这两个css样式

transition: 1.0s;
transform-style: preserve-3d;

到.on和.off类（他们需要知道动画运行多长时间！）

function flip(el) {
  console.log("flip called");
  var elem = document.getElementById(el);
  console.log(elem);
  elem.className = "on";
  console.log(elem);
}

* {
  -webkit-box-sizing: border-box;
  /*few lines of code for compatibility and for correct box resizing*/
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgb(228, 227, 225);
}

.title {
  text-align: center;
  color: black;
}

.gameboard {
  width: 530px;
  height: 530px;
  background-color: #92bbce;
  box-shadow: 0 0 11px 5px #00BCD4;
  position: fixed;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.cardrows {
  width: 524px;
  height: 125px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 6px;
  margin-bottom: 6px;
  background-color: transparent;
  position: relative;
}

.infobar {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.cardback,
.cardfront,
.flip1,
.flip2,
.flip3,
.flip4 {
  width: 125px;
  height: 125px;
}

.cardback,
.cardfront {
  /* hide back during swap */
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.cardfront {
  /* front placed above back element */
  z-index: 2;
  transform: rotateY(0deg);
  background-color: #108DC0;
}

.cardback {
  /* back hidden at start */
  transform: rotateY(180deg);
}

.card {
  position: relative;
}

.flip1,
.flip2,
.flip3,
.flip4 {
  /*container keeps perspective */
  perspective: 1000px;
  position: absolute;
}

.flip1 {
  left: 3px;
}

.flip2 {
  left: 134px;
}

.flip3 {
  left: 265px;
}

.flip4 {
  left: 396px;
}

.on {
  transition: 1.0s;
  transform-style: preserve-3d;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.off {
  transition: 1.0s;
  transform-style: preserve-3d;
  -webkit-transform: rotateY( 0deg);
  -moz-transform: rotateY( 0deg);
  -o-transform: rotateY( 0deg);
  transform: rotateY( 0deg);
}

<div class="title">
  <h1>Matching Game</h1>
</div>
<div class="infobar">
  <span>
            __stars__
        </span>
  <span>
            __move__
        </span>
  <span>
            __timer__
        </span>
  <span>
            __restart__
        </span>
</div>
<div class="gameboard">
  <div class="cardrows">
    <div class="flip1">
      <div id="card1" class="card, off" onclick="flip(this.id)">
        <div class="cardback">
          2
        </div>
        <div class="cardfront ">
          1
        </div>
      </div>
    </div>
    <div class="flip2">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
    <div class="flip3">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
    <div class="flip4">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
  </div>
  <div class="cardrows">
    <div class="flip1">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
    <div class="flip2">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
    <div class="flip3">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
    <div class="flip4">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
  </div>
  <div class="cardrows">
    <div class="flip1">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
    <div class="flip2">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
    <div class="flip3">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
    <div class="flip4">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
  </div>
  <div class="cardrows">
    <div class="flip1">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
    <div class="flip2">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
    <div class="flip3">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
    <div class="flip4">
      <div class="card">
        <div class="cardback">

        </div>
        <div class="cardfront">

        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

我希望这会有所帮助：

https://codepen.io/anon/pen/KqwGPq

＆＃13;

function flip(el) {
  console.log("flip called");
  var elem = document.getElementById(el);
  console.log(elem);
  elem.className = "on";
  console.log(elem);
}

＆＃13;

* {
  -webkit-box-sizing: border-box;
  /*few lines of code for compatibility and for correct box resizing*/
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgb(228, 227, 225);
}

.title {
  text-align: center;
  color: black;
}

.gameboard {
  width: 530px;
  height: 530px;
  background-color: #92bbce;
  box-shadow: 0 0 11px 5px #00BCD4;
  position: fixed;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.cardrows {
  width: 524px;
  height: 125px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 6px;
  margin-bottom: 6px;
  background-color: transparent;
  position: relative;
}

.infobar {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


.cardback,
.cardfront,
.flip1,
.flip2,
.flip3,
.flip4 {
  width: 125px;
  height: 125px;
}

.cardback,
.cardfront {
  /* hide back during swap */
  backface-visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;

  transition: transform 1s;
  transform-style: preserve-3d;
}

.cardfront {
  /* front placed above back element */
  z-index: 2;
  transform: rotateY(0deg);

  background-color: #108DC0;
}

.cardback {
  /* back hidden at start */
  transform: rotateY(180deg);
}

.card {
  position: relative;
  
}

.flip1,
.flip2,
.flip3,
.flip4 {
  /*container keeps perspective */
  perspective: 1000px;
  position: absolute;
}

.flip1 {
  left: 3px;
}

.flip2 {
  left: 134px;
}

.flip3 {
  left: 265px;
}

.flip4 {
  left: 396px;
}

.on {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transition: 0.25s ease;
  transform: rotateY( 180deg);
}

.off {
  -webkit-transform: rotateY( 0deg);
  -moz-transform: rotateY( 0deg);
  -o-transform: rotateY( 0deg);
   transition: 0.25s ease;
  transform: rotateY( 0deg);
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css"> <!--making a link to the css stylesheet-->
    <script src="scripts.js" type="text/javascript"></script>
    <meta charset="UTF-8">
    <title>Matching Game</title>
</head>
<body>
    <div class = "title"><h1>Matching Game</h1></div>
    <div class = "infobar">
        <span>
            __stars__
        </span>
        <span>
            __move__
        </span>
        <span>
            __timer__
        </span>
        <span>
            __restart__
        </span>
    </div>
    <div class = "gameboard">
        <div class = "cardrows">
            <div class = "flip1">
                <div id = "card1" class = "card, off" onclick="flip(this.id)">
                    <div class = "cardback">
                        2
                    </div>
                    <div class = "cardfront ">
                        1
                    </div>
                </div>
            </div>
            <div class = "flip2">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip3">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip4">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
        </div>
        <div class = "cardrows">
            <div class = "flip1">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip2">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip3">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip4">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
        </div>
        <div class = "cardrows">
            <div class = "flip1">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip2">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip3">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip4">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
        </div>
        <div class = "cardrows">
            <div class = "flip1">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip2">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip3">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
            <div class = "flip4">
                <div class = "card">
                    <div class = "cardback">

                    </div>
                    <div class = "cardfront">

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

＆＃13;

我唯一改变的是在.on和.off类中添加两行CSS：

transition: 0.25s ease;

（您可以在此处详细了解如何使用转化：https://www.w3schools.com/css/css3_transitions.asp和此处：https://developer.mozilla.org/en-US/docs/Web/CSS/transition?v=example）

您可以将0.25更改为其他内容，例如1或0.5等。

玩得开心！

-Sean

尝试在用户点击它时为div设置动画。

2 个答案: