Chào mọi người, chắc ai đó trong các bạn có biết về game Freaking Math, hay tên đại loại kiểu vậy của trò chơi chọn true false cho phép tính đơn giản rồi nhỉ ? Một trò chơi đơn giản để rèn luyện khả năng tính nhẩm.

Mình viết bài này là để hướng dẫn mọi người làm một game tương tự như vậy đơn giản trong khoảng 30 phút với chỉ Javascripts (làm game Easy Math với Javascript).
Mọi người có thể sử dụng Nodepad++, SublimeText, Webstorm… để code được bài này.

HTML

Trước tiên cũng cần một chút HTML để có cái mà xử lý trong js nhé mọi người, chúng ta cùng tạo 1 file index.html với nội dung:

CSS

Chúng ta cần viết css cho một vài class để nhìn chúng đỡ “xấu xí”

Tốt rồi, giờ giao diện của chúng ta như sau:

làm game Easy Math với Javascript

Javascript

Chúng ta cùng đến với phần chính, JavaScript:

Đầu tiên chúng ta sẽ khai báo các biến chúng ta cần dùng trong bài này:

Game về các phép toán, chúng ta cần một function để tạo ra các phép toán, phải rồi, function random phép toán, chúng ta đặt tên cho nó là generateCalculation. ở đây chúng ta sử dụng thư viện Math của JS để tạo ra những số ngẫu nhiên thông qua câu lệnh Math.random().

Biến operators sẽ lưu lại các toán tử mà bạn muốn sử dụng trong trò chơi, để tăng độ khó bạn có thể sử dụng cả * và / =)).

Bên trên chúng ta thấy có 1 function getRandomResult để lấy 1 kết quả ngẫu nhiên hiển thị lên màn hình, chúng ta sẽ thiết kế 1 function getRandomResult với tỉ lệ đúng sai 50:50, có thêm 2 function phụ nữa là getResult để tạo kết quả đúng với việc dùng hàm eval để tính toán dãy phép tính được sinh ra ở trên và getFakeResult để tạo kết quả sai với sai số là 10.

Sau đó chúng ta gán sự kiện cho 2 button True, False của chúng ta để kiểm tra xem người chơi chọn đáp án có đúng hay không. Nếu như người chơi chọn đúng(check = true) thì chúng ta sẽ chuyển sang level tiếp theo, tăng điểm và reset thời gian. nếu người chơi chọn sai, chúng ta sẽ hiển thị thông báo trò chơi kết thúc kèm số điểm người chơi đạt được.

Để trò chơi thêm phần thú vị, chúng ta có thể thêm phần đếm ngược thời cho mỗi câu hỏi bằng cách sử dụng setInterval.

Function countDown sẽ đếm ngược sau khi người chơi chọn đáp án cho phép toán đầu tiên và tự động reset cho mỗi phép toán mới, người chơi có 10s để chọn đáp án cho các phép toán tiếp theo.

Cuối cùng là đoạn code khiến game của chúng ta sẽ chạy được =))

TADA… vậy là chúng ta đã hoàn thành các bước làm game Easy Math với Javascript rồi. Bạn chỉ việc chạy index.html trên 1 trình duyệt web nào đó để có thể chơi game nhé! hãy gửi cho bạn bè cùng chơi để xem ai tính nhẩm giỏi hơn nào=))))

Link Demo: easymath.netlify.app

Author: Dư Thanh Hoàng

Xem thêm các tài liệu, hướng dẫn học lập trình khác tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.