Làm cách nào để tạo bảng tic tac toe trong html?
Đầu tiên chúng ta sẽ code HTML sau đó là CSS & cuối cùng là JS, ngoài ra mình cũng có share codepen ink để các bạn dễ dàng hơn
Show HTML 🎈( bước - 1)Trong HTML, chúng tôi đã tạo một div cho vùng chứa & cho lưới trò chơi tic-tac-toe. Ngoài ra, chúng tôi đã sử dụng các div khác nhau cho mỗi hộp trong vùng chứa này
Sau HTML, chúng tôi sẽ thiết kế vùng chứa và lưới và sẽ tạo ra một thiết kế tuyệt vời của Trò chơi Tic-Tac-Toe CSS🎈 ( bước - 2)body {
background-color: white;
}
.grid {
background-color: rgba(0,0,0,.2);
margin: 50px auto;
vertical-align: center;
width: 400px;
height: 400px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template rows: 1fr 1fr 1fr;
grid-gap: 2px;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 17px 50px;
}
.space {
background-color: white;
transition: background-color .5s;
display: flex;
justify-content: center;
align-items: center;
}
.space:hover {
background-color: rgba(0,0,0,0);
transition: background-color .5s;
cursor: pointer;
}
.x, .o {
font-family: 'arial';
font-size: 70px;
position: absolute;
}
.x {
color: tomato;
}
.o {
color: #33DBFF;
}
.header {
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-family: 'Montserrat', sans-serif;
font-size: 35px;
color: tomato;
text-align: center;
margin-top: 50px;
}
.reset {
font-size: 20px;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-family: 'Montserrat', sans-serif;
color: tomato;
background-color: white;
border: 1px solid tomato;
padding: 5px;
transition: border, color, .5s;
}
.reset:hover {
cursor: pointer;
color: #33DBFF;
border: 1px solid #33DBFF;
transition: border, color, .5s;
}
.reset:focus {
outline: none;
}
.wrapper {
display: flex;
justify-content: center;
margin-bottom: 50px;
}
.p1, .p2 {
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
}
.p1 {
color: tomato;
margin-left: 20px;
}
.p2 {
color: #33DBFF;
margin-right: 20px;
}
.flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
Bây giờ chúng ta cũng đã hoàn thành mã hóa CSS, bây giờ hãy chuyển sang javascript. trong javascript, chúng tôi chưa thực hiện đủ mã hóa. chúng tôi đã viết để làm cho các nút hoạt động JavaScript🎈 ( bước - 3) Tất cả phần viết mã đã xong, bây giờ chúng ta hãy xem đầu ra cuối cùng và bên dưới tôi cũng đã đề cập đến liên kết codepen Bấm vào đây để lấy mã . . . . . . |