CSS3

Tạo hiệu ứng trò chơi pacman với HTML và CSS

Posted on 06/03/201916/11/2022 by admin

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, kiso 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

pacman JPG

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:

Bài viết này được đăng tại [kiso.vn]

.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.

Danh sách file tải về

Tên file tải về	Pass giải nén
Tạo hiệu ứng trò chơi pacman	kiso.vn hoặc gameportable.net

CSS3

Tạo hiệu ứng trò chơi pacman với HTML và CSS

1. Phần HTML

2. Phần CSS

3. Lời Kết

Bài viết liên quan

[CSF-2] Một số thiết lập CSF, LFD

[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)

Sử dụng SSH Key với Gitlab và Github

Directory traversal vulnerabilities (phần 4)

Directory traversal vulnerabilities (phần 3)

Directory traversal vulnerabilities (phần 2)

Trả lời

Thông tin chung

Danh sách dịch vụ

Dịch vụ quản trị

Hướng dẫn sử dụng