0
我是一名初學者程序員，嘗試創建我的第一個項目，它結合了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);
}
JavaScript **，與Java不同=） – Hodrobond
誰會調用flip函數？ – VivekN
@Hodrobond對不起... – bjurecska