ạo hiệu ứng trò chơi pacman với HTML và CSS - Học CSS3 căn bản & nâng cao
Những thế hệ 8x, 9x chắc hẳn không ai không biết đến trò chơi Pacman nổi tiếng. Cứ mỗi dịp hè về, ở xóm lại tụ tập quanh các quán game. Ngày nay, với công nghệ phát triển gần như trò chơi này đã rơi vào quên lãng. Hôm nay, Zaidap.com sẽ hướng dẫn các bạn tạo lại hình ảnh Pacman quen thuộc như ...
Những thế hệ 8x, 9x chắc hẳn không ai không biết đến trò chơi Pacman nổi tiếng. Cứ mỗi dịp hè về, ở xóm lại tụ tập quanh các quán game. Ngày nay, với công nghệ phát triển gần như trò chơi này đã rơi vào quên lãng. Hôm nay, Zaidap.com sẽ hướng dẫn các bạn tạo lại hình ảnh Pacman quen thuộc như hình bên dưới
1. Phần HTML
Bố cục cho hiệu ứng này khá phức tạp, nhưng cũng không quá khó để thực hiện.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pacman</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="pacman.css">
<script src="main.js"></script>
</head>
<body>
<div class="main">
<div>
<div class="pacman1">
</div>
<div class="pacman2">
</div>
</div>
<span class="dot d1"></span>
<span class="dot d2"></span>
<span class="dot d3"></span>
<span class="dot d4"></span>
<span class="dot d5"></span>
<span class="dot d6"></span>
</div>
</body>
</html>Các thẻ div sẽ được để vẽ pacman, còn các thẻ span sẽ dùng để vẽ các pacdot.
2. Phần CSS
Trước hết hãy xem qua toàn bộ mã nguồn:
.main {
position: relative;
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.main > div {
position: relative;
top: -50px;
left: 0;
animation: move 10s ease-in-out infinite;
}
.pacman1 {
position: absolute;
border-radius: 50px;
border: 50px solid darkcyan;
border-right: 50px solid transparent;
animation: eat1 0.8s ease infinite;
}
.pacman2 {
position: absolute;
border-radius: 50px;
border: 50px solid darkcyan;
border-right: 50px solid transparent;
animation: eat2 0.8s ease infinite;
}
.dot {
position: relative;
left: 100px;
margin: 20px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: darkcyan;
animation: hide 10s ease-in infinite;
}
.d1 {
animation-delay: 1s;
}
.d2 {
animation-delay: 2s;
}
.d3 {
animation-delay: 3s;
}
.d4 {
animation-delay: 4s;
}
.d5 {
animation-delay: 5s;
}
.d6 {
animation-delay: 6s;
}
@keyframes hide {
20%, 40%, 80%, 100% {
opacity: 0;
}
}
@keyframes move {
0% {
left: 0px;
}
100% {
left: 400px;
}
}
@keyframes eat1 {
0% {
transform: rotate(-45deg);
}
25% {
transform: rotate(0);
}
50% {
transform: rotate(-45deg);
}
75% {
transform: rotate(0);
}
100% {
transform: rotate(-45deg);
}
}
@keyframes eat2 {
0% {
transform: rotate(45deg);
}
25% {
transform: rotate(0);
}
50% {
transform: rotate(45deg);
}
75% {
transform: rotate(0);
}
100% {
transform: rotate(45deg);
}
}
Bước 1: tạo định dạng cho lớp main
.main {
position: relative;
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
}Bạn có thể tùy thích thay đổi giá trị của thuộc tính min-height .
Bước 2: tạo định dạng cho thẻ div
.main > div {
position: relative;
top: -50px;
left: 0;
animation: move 10s ease-in-out infinite;
}Thẻ div này nhiệm vụ chính là bao đóng hai nữa pacman, chúng ta sẽ tao hiệu ứng di chuyển cho thẻ này.
Bước 3: tạo định dạng cho pacman1
.pacman1 {
position: absolute;
border-radius: 50px;
border: 50px solid darkcyan;
border-right: 50px solid transparent;
animation: eat1 0.8s ease infinite;
}Đây là cách tạo nửa trên của pacman.
Bước 4: tạo định dạng cho pacman2
.pacman2 {
position: absolute;
border-radius: 50px;
border: 50px solid darkcyan;
border-right: 50px solid transparent;
animation: eat2 0.8s ease infinite;
}Đây là cách tạo nửa dưới của pacman.
Bước 5: tạo định dạng cho dot
.dot {
position: relative;
left: 100px;
margin: 20px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: darkcyan;
animation: hide 10s ease-in infinite;
}Về cơ bản là phần này sẽ tạo các box và sẽ tô màu và bo tròn góc.
Bước 6: tạo hiệu ứng ăn
@keyframes eat1 {
0% {
transform: rotate(-45deg);
}
25% {
transform: rotate(0);
}
50% {
transform: rotate(-45deg);
}
75% {
transform: rotate(0);
}
100% {
transform: rotate(-45deg);
}
}
@keyframes eat2 {
0% {
transform: rotate(45deg);
}
25% {
transform: rotate(0);
}
50% {
transform: rotate(45deg);
}
75% {
transform: rotate(0);
}
100% {
transform: rotate(45deg);
}
}Hai nửa của pacman sẽ được di chuyển ngược hướng nhau với góc 45 độ.
Bước 7: tạo hiệu ứng ẩn
@keyframes hide {
20%, 40%, 80%, 100% {
opacity: 0;
}
}pacdot sẽ biến mất sau khi bị ăn.
Bước 8: tạo khoảng thời gian trễ cho các pacdot
.d1 {
animation-delay: 1s;
}
.d2 {
animation-delay: 2s;
}
.d3 {
animation-delay: 3s;
}
.d4 {
animation-delay: 4s;
}
.d5 {
animation-delay: 5s;
}
.d6 {
animation-delay: 6s;
}Việc canh chỉnh những giá trị này tùy thuộc vào thời gian của hiệu ứng.
Bước 9: tạo hiệu ứng di chuyển
@keyframes move {
0% {
left: 0px;
}
100% {
left: 400px;
}
}Tạo bước di chuyển cho thẻ div chính.
3. Lời Kết
Qua bài viết này, các bạn đã có một trải nghiệm thú vị để nhớ về trò chơi của tuổi thơ. Bạn có nghĩ rằng viết trò chơi này thật đơn giản.
Cảm ơn mọi người, hẹn gặp lại trong bài viết tiếp theo.
Chuyên đề học lập trình web: Học phần HTML / CSS
Đây là chương thứ nhất trong chuyên đề tự học lập trình web với PHP. Trong chương này chúng ta sẽ học HTML và CSS trước.
Các bạn hãy sub kênh để ủng hộ mình nhé. Link chuyên đê tại đây.
