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

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

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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 [free tuts .net]

.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	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Cách sử dụng thẻ script html ...