Cara membauat tabung ukuran
Kita buat file index.html
<!DOCTYPE html>
<html>
<head>
<title>///</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="win" id="win"></p>
<div class="container">
<div class="game">
<div class="wood">
<div class="w-1"></div>
<div class="w-2"></div>
<div class="w-3">
<div class="line-wood" id="wood_line"></div>
</div>
<div class="w-2"></div>
<div class="w-1"></div>
</div>
<div class="number-attack">
<p class="num">-100</p>
<p class="num">-90</p>
<p class="num">-80</p>
<p class="num">-70</p>
<p class="num">-60</p>
<p class="num">-50</p>
<p class="num">-40</p>
<p class="num">-30</p>
<p class="num">-20</p>
<p class="num">-10</p>
<p class="num">-0</p>
</div>
</div>
<!--game-->
</div>
<!--container-->
<div class="btn-con">
<button class="btn-1" id="btn_1" onclick="wood_lines_show()"></button>
<button class="btn-2" id="btn_2" onclick="show_wood()"></button>
</div>
<script src="tabung.js"></script>
</body>
</html>
Sekarang kita lanjut ke Css nya style.css
* {
margin:0;
padding:0;
box-sizing:border-box;
user-select:none;
}
.win {
text-align:center;
position:absolute;
left:0;
right:0;
top:80px;
color:rgb(120, 139, 19);
font-size:24px;
}
.container {
display:flex;
justify-content:center;
margin:120px 0;
}
.game {
display:flex;
}
.wood {
display:flex;
flex-direction:column;
align-items:center;
}
.w-1 {
padding:4px 28px;
background-color:rgb(139, 69, 19);
}
.w-2 {
padding:2px 24px;
background-color:rgb(119, 49, 0);
}
.w-3 {
display:flex;
flex-direction:column;
justify-content:end;
height:148px;
width:40px;
border-left:solid 4px rgb(119, 49, 0);
border-right:solid 4px rgb(119, 49, 0);
background-color:rgb(149, 79, 29);
}
.line-wood {
height:148px;
width:32.3px;
background-color:rgb(120, 139, 19);
}
.number-attack {
position:relative;
top:10px;
left:-6px;
}
.num {
font-size:12px;
color:rgb(120, 139, 19);
}
.btn-con {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.btn-1 {
padding:16px 22px;
border:solid 4px rgb(119, 49, 0);
background-color:rgb(139, 69, 19);
border-radius:10px;
box-shadow:0 3px rgb(119, 49, 0);
}
.btn-1:active {
box-shadow:0 1.5px rgb(119, 49, 0);
transform:translateY(1.5px);
}
.btn-2 {
padding:16px 22px;
border:solid 4px rgb(100, 139, 19);
background-color:rgb(110, 149, 29);
border-radius:10px;
box-shadow:0 3px rgb(100, 139, 19);
display:none;
}
.btn-2:active {
box-shadow:0 1.5px rgb(100, 139, 19);
transform:translateY(1.5px);
}
.wood-ani {
animation:ani 1s infinite linear;
}
@keyframes ani {
0% {
height:148px;
background-color:rgb(120, 139, 19);
}
25% {
height:74px;
background-color:rgb(179, 140, 19);
}
50% {
height:0;
background-color:rgb(170, 40, 19);
}
75% {
height:74px;
background-color:rgb(179, 140, 19);
}
100% {
height:148px;
background-color:rgb(120, 139, 19);
}
}
kita lanjut ke javascrip nya tabung.js
function wood_lines_show() {
const btn_1 = document.getElementById("btn_1");
const btn_2 = document.getElementById("btn_2");
const wood_line = document.getElementById("wood_line");
setTimeout(() => (btn_2.style.display = "block"), 400);
setTimeout(() => {
btn_1.style.display = "none";
}, 200);
wood_line.classList.add("wood-ani");
}
function show_wood() {
const wood_line = document.getElementById("wood_line");
const win = document.getElementById("win");
}
Sekarang kalian bisa jalanken di broser. sekian dan terimakasih semoga ber manfaat
Comments