Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Trò chơi Đánh Chữ

Tạo Trò chơi Đánh Chữ


Ngày 14 Tháng 2 Năm 2020

Tạo Trò chơi Đánh Chữ

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu cách xây dựng một trò chơi đánh chữ giúp các bạn có thể ôn lại và thực hành một số kiến thức HTML, CSS mà mình đã học. Để hiểu rõ hơn các bạn cùng mình tìm hiểu nhé!

Trò Chơi Đánh Chữ

Đi vào bước thứ nhất các bạn tạo một thư mục có cấu trúc file như sau nhé:

Cấu trúc Thư Mục Trò Chơi Đánh Chữ Javascript

Sau khi đã tạo xong cấu trúc thư mục thì bước tiếp theo là các bạn tải một tập tin mà mình đã chứa sẵn các file đã được nén để ở đường dẫn bên dưới giúp chúng ta có thể thực hiện thẻ người dùng mà không mất công phải xây dựng lại từ đầu.
Tải File Tro_choi_danh_chu

Bây giờ mình sẽ tạo cấu trúc file HTML, thêm các thẻ HTML cần thiết cho trang_chinh.html sau đó liên kết nó với file style.css, ham_danh_chu.js, Font Awesome và Bootstrap4 để làm các thẻ HTML thêm sinh động và dễ hiệu chỉnh. Các bạn lưu ý là đường dẫn style.css lúc nào cũng nằm dưới cùng trong thẻ <head> của một trang HTML bởi vì khi ta chỉnh sửa CSS thì nó sẽ không bị ảnh hưởng bởi các file CSS khác. Để nắm rõ hơn các bạn theo dõ đoạn code dưới đây nhé:

<!doctype html>
<html lang="vi">
<head>
    <title>Trò Chơi Đánh Chữ</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">     </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">     </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">     </script>
    <script src="ham_danh_chu.js"></script>
</body>
</html>

Sau khi đã liên kết các file xong thì việc tiếp theo là mình sẽ thêm các thẻ HTML với các class của Bootstrap4 và cài đặt id cho từng thẻ để các bước sau ta sẽ lấy những giá tri đó để thực hiện các hàm trong javascript. Và để hiểu rõ hơn các bạn xem đoạn code dưới đây nhé :

<div class="tro_choi_danh_chu">
    <div class="noi_dung shadow p-3">
        <header class="text-center">
            <h1><i class="fa fa-gamepad" aria-hidden="true"></i> Trò Chơi Đánh Chữ</h1>
        </header>
        <div class="row">
            <div class="col-md-6 mx-auto">
                <p class="quy_dinh">
                    Các bạn hãy đánh chữ dưới đây với thời gian đối đa <span class="text-success"  id="thoi_gian">10</span> giây:
                </p>
                <h2 class="display-2 mb-2" id="chu_hien_tai">Xin Chào!</h2>
                <input type="text" class="form-control form-control-lg rounded-pill shadow p-4" placeholder="Bắt Đầu Nhập Chữ..." id="chu_duoc_nhap" autofocus>
                <h4 class="mt-2" id="thong_bao"></h4>
                <div class="row mt-4">
                    <div class="col-md-6">
                        <h3>Thời Gian Còn Lại:<br />
                            <span id="giay">0</span>
                        </h3>
                    </div>
                    <div class="col-md-6">
                        <h3>
                            Điểm Của Bạn:<br />
                            <span id="diem">0</span>
                        </h3>
                    </div>
                </div>
                <div class="text-center bg-primary shadow text-white p-2 rounded mb-4">
                    <h4><i class="fa fa-info-circle" aria-hidden="true"></i> Hướng Dẫn</h4>
                    <p>
                      Các bạn nhập mỗi chữ ở trên với thời gian không được vượt quá 10 giây. Để chơi lại thì bạn chỉ cần nhập chữ đang hiển thị hiện tại và điểm sẽ tự động được tính lại.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Chúng ta cùng xem kết quả trang HTMl nhé:

Cấu trúc thẻ cho HHTML trang tạo trò chơi đánh chữ

Nhìn chưa được đẹp lắm bây giờ chúng ta sẽ chỉnh file style.css để giúp đưa các thành phần HTML ra giữa trang cũng như thiết lập màu nền cho thẻ <body>. Các bạn xem đoạn code dưới đây để rõ hơn nhé:

body {
    background: #667db6;
    background: -webkit-linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
    background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
}
.tro_choi_danh_chu{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.noi_dung{
    width: 80%;
    background:#fff;
    border-radius: 10px;
    text-align: center;
}

Cùng mình xem kết quả của đoạn code trên nhé:

Cấu trúc thẻ cho HHTML trang tạo trò chơi đánh chữ final

Như vậy chúng ta đã xong phần giao diện cho trò chơi, kế tiếp các bạn vào trong file ham_danh_chu.js thiết lập các biến mặc định trong file javascript dùng để lưu thời gian, điểm số và trạng thái của người chơi(true hoặc false, quyết định người chơi là đi tiếp hay dừng lại). Tiếp theo là tạo ra các biến để lưu các giá trị trong file trang_chinh.html thông qua id. Sau đó tạo ra một mảng(Array) dùng để chứa các từ mà muốn người dùng nhập khi chơi đánh chữ. Cái này các bạn có thể lấy bất kì từ nào mình thích nhé, càng nhiều thì khả năng bị lặp từ càng khó. Nào cùng mình theo dõi đoạn code sau đây để hiểu rõ hơn:

let thoi_gian = 10;
let diem = 0;
let dang_choi;
const chu_duoc_nhap = document.querySelector('#chu_duoc_nhap');
const chu_hien_tai = document.querySelector('#chu_hien_tai');
const diem_hien_thi = document.querySelector('#diem');
const thoi_gian_hien_thi = document.querySelector('#giay');
const thong_bao = document.querySelector('#thong_bao');
const chu = [
    'hat',
    'river',
    'lucky',
    'statue',
    'generate',
    'stubborn',
    'cocktail',
    'runaway',
    'joke',
    'developer',
    'establishment',
    'hero',
    'javascript',
    'nutrition',
    'revolver',
    'echo',
    'siblings',
    'investigate',
    'horrendous',
    'symptom',
    'laughter',
    'magic',
    'master',
    'space',
    'definition'
  ];

Sau khi đã có các giá trị cần thiết các bạn sẽ viết một hàm có tên là hien_thi_chu(chu) với tác dụng sẽ lấy một chữ ngẫu nhiên trong mảng chu, tiếp đến ta cần thêm một hàm tên là chay_ham() dùng để tập hợp các hàm cần có để xử lý trò chơi đánh chữ. Và nó sẽ bắt đầu mỗi khi trình duyệt được load. Để hiểu rõ hơn các bạn xem đoạn code dưới đây nhé:

window.addEventListener('load', chay_ham)

function chay_ham() {
    hien_thi_chu(chu);
 }

 function hien_thi_chu(chu) {
    const chu_ngau_nhien = Math.floor(Math.random()*chu.length);
    chu_hien_tai.innerHTML = chu[chu_ngau_nhien];
}

Ở đây mình có một vài lưu ý ở đoạn code trên và sẽ được giải thích ở bảng dưới đây:

Thuộc TínhÝ Nghĩa
window.addEventListener('load', chay_ham)Hàm chay_ham sẽ được chạy mỗi khi trang được load lại. Nghĩa là ta sẽ bắt đầu trò chơi mỗi khi load lại trang HTML.
Biến chu_ngau_nhienNó sẽ là vị trí index ngẫu nhiên nằm trong mảng chu.
chu_hien_tai.innerHTML = chu[chu_ngau_nhien];Gán chữ ngẫu nhiên trong mảng vào thẻ HTML.

Muốn xem được hiệu ứng này các bạn nhấn F5 hay reload lại trang nhiều lần để xem thay đổi nào chúng ta cùng xem kết quả ở video dưới đây nhé:

Chắc hẳn các bạn sẽ thấy chữ "Xin Chào" xuất hiện rất nhanh rồi mới chuyển sang chữ khác mỗi khi ta reload lại trang là do nội dung mà ta thiết lập mặc định trong thẻ HTML có id ="chu_hien_tai". Để sửa thì các bạn vào trong trang trang_chinh.html và chỉnh lại như đoạn code sau đây:

<h2 class="display-2 mb-2" id="chu_hien_tai"></h2>

Bây giờ chúng ta hãy cùng nhau xem kết quả của đoạn code trên nhé:

Bước trên các bạn có thể làm hay không vì nó không ảnh hưởng đến đoạn code. Bây giờ chúng ta sẽ thiết lập một hàm gọi là dem_nguoc dùng để đếm ngược thời gian từ 10 đến 0 giúp người dùng biết mình còn bao nhiêu thời gian để đánh chữ và cũng dựa vào đây mà ta sẽ cho phép người dùng được chơi tiếp hay dừng lại bằng cách thiết lập thuộc tính true hoặc false cho biến dang_choi. Để chạy được thì mình cần đặt nó trong hàm chay_ham. Các bạn xem đoạn code dưới đây để hiểu hơn nhé:

function chay_ham() {
    hien_thi_chu(chu);
    setInterval(dem_nguoc, 1000);
 }
function dem_nguoc() {
    if(thoi_gian > 0) {
        thoi_gian--;
    } else if(thoi_gian == 0){
        dang_choi = false;
    }
    thoi_gian_hien_thi.innerHTML = thoi_gian;
}

Các bạn lưu ý là dòng code setInterval(dem_nguoc, 1000); là cứ sau một giây thì hàm này sẽ chạy lại một lần. Và hãy cùng mình xem kết quả dưới đây nhé:

Bước tiếp theo là ta sẽ tạo hàm so_sanh_chu để so sánh chữ người dùng nhập với chữ được hiển thị thông qua xét từng từ của hai chuỗi có khớp với nhau không bằng một hàm con có tên so_sanh_tu. Nếu giá trị của hàm trả về true thì người chơi sẽ tiếp tục được đi tiếp, thời gian sẽ trở lại ban đầu là 10 và điểm sẽ được cộng thêm một điểm còn không thì ta sẽ đặt biến dang_choi=false. Muốn chạy được thì mình cần đặt nó vào trong hàm chay_ham. Để nắm rõ hơn các bạn xem đoạn code sau đây nhé:

function chay_ham() {
    hien_thi_chu(chu);
    chu_duoc_nhap.addEventListener('input', so_sanh_chu)
    setInterval(dem_nguoc, 1000);
 }
function so_sanh_chu() {
    if(so_sanh_tu()) {
        dang_choi = true;
        thoi_gian = 10;
        hien_thi_chu(chu);
        chu_duoc_nhap.value = '';
        diem++;
    }
        diem_hien_thi.innerHTML = diem;
   }
function so_sanh_tu() {
    if((chu_duoc_nhap.value) === (chu_hien_tai.innerHTML)) {
        thong_bao.innerHTML = 'Đúng Rồi';
        return true;
    } else {
        thong_bao.innerHTML = '';
        return false;
    }
}

Bây giờ cùng mình xem kết quả nhé:

Bước cuối cùng là mình sẽ gọi một hàm tên là kiem_tra_chu dùng để kiểm tra nếu thời gian bằng 0 và biến dang_choi = false thì sẽ thông báo kết thúc và dừng trò chơi. Cũng như các hàm trên mình cần đặt nó trong hàm chay_ham để có thể chạy được. Để nắm rõ hơn mình cùng xem đoạn code sau đây nhé:

function chay_ham() {
    hien_thi_chu(chu);
    chu_duoc_nhap.addEventListener('input', so_sanh_chu)
    setInterval(dem_nguoc, 1000);
    setInterval(kiem_tra_chu, 50);
 }
function kiem_tra_chu() {
    if(!dang_choi && thoi_gian === 0) {
        thong_bao.innerHTML = 'Trò Chơi Kết Thúc!';
        diem = 0;
    }
     }

Bây giờ cùng mình xem kết quả nhé:

Mình gửi các bạn đường dẫn để tải về những file trong thư mục Tro_Choi_Danh_Chu để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm

Tổng kết:

Qua đây mình giúp các bạn có thể ôn lại và sử dụng những kiến thức mà mình đã học và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!