0
私は初心者のプログラマーで、html、css、およびjavascriptを組み合わせた最初のプロジェクトを作成しようとしています。私は何時間も話題を研究しており、効果的な解決法と説明を探したいと思います。私はhtmlと対応するjavaとcssファイルを持っています。私はメモリゲームを作ろうとしています。私はユーザーがそれをクリックすると、カードを反転しようとしています。私は様々な解決策を読んだが、まっすぐに適用することはできません。私は純粋なjavascript/cssソリューションを探しています。前もって感謝します。ユーザーがクリックしたときにdivをアニメーション表示しようとしています。
<!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);
}
-SeanはJavaScript **、=）フリップ関数を呼び出します – Hodrobond
？ – VivekN
@Hodrobondうん、申し訳ありません... – bjurecska