Bạn đã bao giờ muốn tạo một trò chơi xúc xắc đơn giản nhưng hấp dẫn với hiệu ứng 3D để thử vận may hoặc làm dự án cá nhân chưa? Trong bài viết này, mình sẽ chia sẻ một đoạn code đầy đủ để tạo ra nó bằng HTML, CSS và JavaScript. Không chỉ dừng lại ở việc cung cấp code, mình còn hướng dẫn bạn từng bước để setup và hiểu rõ cách hoạt động của từng phần code. Đây là một dự án nhỏ thú vị, dễ thực hiện và cực kỳ phù hợp cho người mới học lập trình web!
Các bước thực hiện
Bước 1: Cấu Trúc HTML – Xây Dựng Khung Cơ Bản
Đầu tiên, chúng ta cần một cấu trúc HTML để hiển thị viên xúc xắc, nút bấm và kết quả. Dưới đây là đoạn code HTML:
<div id="mainContainer"> <div id="title">Reo Xúc Xắc 3D</div> <button id="rollButton">Roll Dice</button> <div id="diceContainer"> <div id="dice" class="show-1"> <div class="face face1">1</div> <div class="face face2">2</div> <div class="face face3">3</div> <div class="face face4">4</div> <div class="face face5">5</div> <div class="face face6">6</div> </div> </div> <div id="resultText"></div> </div>Hướng Dẫn Setup Phần HTML:
- Tạo file HTML: Tạo một file mới, ví dụ index.html, và dán đoạn code trên vào phần
<body>. - Giải thích code:
<div id="mainContainer">: Đây là khối chứa chính, giúp căn giữa mọi thứ.<div id="title">: Tiêu đề của ứng dụng, hiển thị dòng chữ “Reo Xúc Xắc 3D”.<button id="rollButton">: Nút nhấn để bắt đầu lăn xúc xắc.<div id="diceContainer">và<div id="dice">: Vùng chứa viên xúc xắc với 6 mặt (class face1 đến face6). Mặt ban đầu được hiển thị là mặt 1 (show-1).<div id="resultText">: Nơi hiển thị kết quả sau khi lăn xúc xắc.
Lưu ý:
Bạn cần đảm bảo file HTML được lưu với đuôi .html và mở bằng trình duyệt để kiểm tra. Lúc này, bạn chỉ thấy giao diện tĩnh, chưa có hiệu ứng hay tính năng lăn xúc xắc. Chúng ta sẽ thêm CSS và JS để hoàn thiện.
Bước 2: CSS – Tạo Giao Diện và Hiệu Ứng 3D
Tiếp theo, chúng ta dùng CSS để định dạng giao diện và tạo hiệu ứng 3D cho xúc xắc. Dán đoạn code này vào trong thẻ <style> trong file HTML hoặc tạo file style.css riêng và liên kết bằng <link>.
#mainContainer { width: 300px; margin: 50px auto; text-align: center; font-family: Arial, sans-serif; }
#title { font-size: 1.5rem; margin-bottom: 20px; color: #333; }
#rollButton { padding: 12px 20px; font-size: 1rem; background-color: #2196f3; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: 0.3s; text-transform: uppercase; }
#rollButton:hover { background-color: #0b7dda; }
#diceContainer { perspective: 800px; width: 100px; height: 100px; margin: 30px auto; position: relative; }
#dice { width: 100px; height: 100px; position: absolute; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
.face { position: absolute; width: 100px; height: 100px; background: #fff; border: 2px solid #ccc; border-radius: 5px; font-size: 2rem; display: flex; justify-content: center; align-items: center; }
.face1 { transform: rotateY(0deg) translateZ(50px); } .face2 { transform: rotateY(90deg) translateZ(50px); } .face3 { transform: rotateY(180deg) translateZ(50px); } .face4 { transform: rotateY(-90deg) translateZ(50px); } .face5 { transform: rotateX(90deg) translateZ(50px); } .face6 { transform: rotateX(-90deg) translateZ(50px); } .show-1 { transform: rotateX(0deg) rotateY(0deg); } .show-2 { transform: rotateX(0deg) rotateY(-90deg); } .show-3 { transform: rotateX(0deg) rotateY(-180deg); } .show-4 { transform: rotateX(0deg) rotateY(90deg); } .show-5 { transform: rotateX(-90deg) rotateY(0deg); } .show-6 { transform: rotateX(90deg) rotateY(0deg); } #resultText { margin-top: 20px; font-weight: bold; font-size: 1.2rem; color: #555; }Hướng Dẫn Setup Phần CSS:
- Thêm CSS vào file: Nếu bạn thêm vào
<style>trong<head>của index.html, chỉ cần dán code trên. Nếu dùng file riêng, thêm dòng<link rel="stylesheet" href="style.css">vào<head>. - Giải thích code:
#mainContainer: Căn giữa nội dung, giới hạn chiều rộng 300px.#rollButton: Tạo nút bấm đẹp mắt với hiệu ứng hover (đổi màu khi rê chuột).#diceContainer: Sử dụng perspective: 800px để tạo hiệu ứng 3D.#dice: Kích thước 100x100px, thêm transform-style: preserve-3d để giữ cấu trúc 3D khi xoay, và transition để tạo animation mượt mà trong 1.5 giây..face: Định dạng mỗi mặt của xúc xắc (kích thước, viền, căn giữa số)..face1đến.face6: Đặt vị trí 6 mặt trong không gian 3D bằng cách xoay (rotate) và dịch chuyển (translateZ)..show-1đến.show-6: Các lớp để hiển thị mặt cụ thể khi xúc xắc dừng lại.
Kiểm tra:
Mở file HTML trên trình duyệt, bạn sẽ thấy nút bấm và viên xúc xắc xuất hiện đẹp mắt với hiệu ứng 3D tĩnh.
Bước 3: JavaScript – Thêm Logic Random và Animation
Cuối cùng, chúng ta dùng JavaScript để xử lý logic lăn xúc xắc và gọi API random. Dán đoạn code này vào trong thẻ <script> ở cuối <body>:
const rollButton = document.getElementById('rollButton'); const dice = document.getElementById('dice'); const resultText = document.getElementById('resultText'); rollButton.addEventListener('click', function() { dice.className = ''; setTimeout(() => { dice.style.transform = `rotateX(${360*4 + Math.random()*360}deg) rotateY(${360*4 + Math.random()*360}deg)`; }, 100); fetch('https://rolz.org/api/?1d6.json') .then(response => response.json()) .then(data => { const rollResult = data.result; setTimeout(() => { dice.removeAttribute('style'); dice.classList.add(`show-${rollResult}`); resultText.textContent = 'Kết quả: ' + rollResult; }, 1500); }) .catch(error => { resultText.textContent = 'Lỗi gọi API: ' + error; });
});Hướng Dẫn Setup Phần JavaScript:
- Thêm JS vào file: Dán code trên vào
<script>trong file HTML. - Giải thích code:
const rollButton, dice, resultText: Lấy các phần tử HTML bằng ID để thao tác.rollButton.addEventListener('click', ...): Gắn sự kiện click cho nút “Roll Dice”.dice.className = '': Xóa lớp show-x cũ để chuẩn bị lăn.setTimeout(...): Sau 100ms, xoay xúc xắc ngẫu nhiên với rotateX và rotateY để tạo hiệu ứng lăn (dùngMath.random()để thêm độ linh hoạt).fetch('https://rolz.org/api/?1d6.json'): Gọi API để lấy số ngẫu nhiên từ 1 đến 6.- t
hen(data => ...): Khi nhận được kết quả, sau 1.5 giây, xóa style xoay ngẫu nhiên và thêm lớp show-x tương ứng với kết quả. Đồng thời hiển thị kết quả ở#resultText. catch(error => ...): Xử lý lỗi nếu API không hoạt động.
Kiểm tra:
Nhấn nút “Roll Dice” trên trình duyệt, bạn sẽ thấy xúc xắc xoay ngẫu nhiên rồi dừng lại ở một mặt cụ thể, cùng với kết quả hiển thị bên dưới.
Demo
Kết Luận
Vậy là bạn đã hoàn thành một viên xúc xắc random với hiệu ứng 3D đẹp mắt! Dự án này không chỉ giúp bạn hiểu cách kết hợp HTML, CSS và JavaScript mà còn làm quen với các khái niệm như animation 3D, gọi API và xử lý sự kiện. Bạn có thể tùy chỉnh thêm bằng cách thay đổi màu sắc, kích thước hoặc thậm chí thêm âm thanh khi lăn xúc xắc.
Hãy thử áp dụng code này vào dự án của bạn và chia sẻ kết quả nhé!. Chúc bạn học lập trình vui vẻ và thành công!
