Hướng dẫn 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:

let score = 0;
let level = 1;
let time = 10;// Thời gian hiện tại
let fullTime = 10;//Thời gian cho phép toán.
let widthTime = 0;//Chiều dài thanh hiển thị thời gian

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à / =)).

function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

function getRandomOperator() {
    let operators = ["+", "-", "*"];
    let ran = Math.floor(Math.random() * operators.length);
    return operators[ran];
}

function generateCalculation() {
    let number1 = getRandomNumber(1*level, 5*level);
    let number2 = getRandomNumber(1*level, 5*level);
    let op = getRandomOperator();
    let cal = number1 + " " + op + " " + number2;
   
    document.getElementById("calculation").innerHTML = cal;
    document.getElementById("result").innerHTML = getRandomResult();
}

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.

function getRandomResult() {
    let randomResult = Math.random() >= 0.5;//tỉ lệ đúng sai 50:50
    return randomResult ? getResult() : getFakeResult();
}

function getResult() {
    let cal = document.getElementById("calculation").innerHTML;
    return eval(cal);
}

function getFakeResult() {
    let fakeResult = getRandomNumber(getResult() - 10, getResult() + 10);
    return (fakeResult === getResult()) ? getFakeResult() : fakeResult;
}

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.

function check(btn) {
    let result = +document.getElementById("result").innerHTML;
    let check = false;
    switch (btn) {
        case "true":
            if (result == getResult()) check = true;
            break;
        case "false":
            if (result !== getResult()) check = true;
            break;
    }

    check?nextLevel():gameOver();
}
function nextLevel() {
    score += level;
    level++;
    time = fullTime;
    document.getElementById("score").innerHTML = "Score: "+score;
    document.getElementById("level").innerHTML = "Level: "+level;
    document.getElementById("correct").play();
    generateCalculation();
}
function gameOver() {
    document.getElementById("true").style.display = "none";
    document.getElementById("false").style.display = "none";
    document.getElementById("wrong").play();
    alert("Game Over. Your score is "+ score + ". Replay?");
    location.reload();
}

Để 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() {
   let timeDiv = document.getElementById("time");
   let run = setInterval(function () {
       time -=0.1;
       timeDiv.style.width = widthTime * time/fullTime + "px";
       if(time <= 0){
           clearInterval(run);
           gameOver();
       }
   },100);
}

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 =))

function startGame() {
    time = fullTime;
    widthTime = document.getElementById("time").offsetWidth;
    document.getElementById("score").innerHTML = "Score: "+score;
    document.getElementById("level").innerHTML = "Level: "+level;
    generateCalculation();
    countDown();
}

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.