Giáo Án Bài 22 (Lớp 4)

Bom Hẹn Giờ (Bộ Đếm Thời Gian Tự Động)

Hôm nay chúng ta sẽ tìm hiểu cách sử dụng bộ đếm thời gian tự động trong JavaScript để kích hoạt hành động lặp đi lặp lại sau mỗi giây, tựa như một chiếc đồng hồ đếm ngược.

🎯 Mục tiêu bài học

Hiểu cách sử dụng hàm setInterval() để tạo vòng lặp thời gian tự động.
Sử dụng hàm clearInterval() để dừng bộ đếm thời gian khi đạt điều kiện.
Biết cách sử dụng hàm setTimeout() để chạy một hành động duy nhất sau khoảng trễ.
Áp dụng CSS thiết lập kích thước chữ lớn và màu sắc thay đổi cảnh báo khẩn cấp.
Ánh xạ bộ đếm thời gian JavaScript sang vòng lặp liên tục kết hợp khối đợi trong Scratch.

⏱️ Thời lượng & Phân bổ

Vòng Lặp Thời Gian & Liên Hệ Scratch: 25 phút
Dừng Bộ Đếm & Thời Gian Chờ: 15 phút
Lập Trình Hàm Đếm Ngược Giây: 20 phút
CSS Thiết Kế Số Điện Tử Cỡ Lớn: 15 phút
Dự án Đồng Hồ Đếm Ngược: 45 phút

25 Phút Hoạt động 1: Vòng Lặp Thời Gian & Liên Hệ Scratch

"Trong các trò chơi, chúng ta thường thấy hệ thống đếm ngược thời gian chơi, hoặc cứ sau 2 giây lại có một chướng ngại vật xuất hiện.
Để làm điều này, JavaScript cung cấp cho chúng ta một phép thuật gọi là **setInterval()** cho phép tự động lặp lại một hành động nào đó sau mỗi khoảng thời gian đều đặn!"

Sự so sánh trực quan với Scratch:

Trong Scratch, để làm đếm ngược hoặc thay đổi nhân vật theo chu kỳ, các em dùng vòng lặp:

🔄 Khối [liên tục] kết hợp khối [đợi 1 giây] (forever + wait 1 seconds)

Trong JavaScript, ta viết câu lệnh setInterval(tên_hàm, số_mili_giây) (1000 mili-giây = 1 giây):

// Gọi hàm demNguoc chạy tự động lặp đi lặp lại sau mỗi 1 giây (1000ms)
let boDem = setInterval(demNguoc, 1000);

15 Phút Hoạt động 2: Dừng Bộ Đếm & Thời Gian Chờ

Khi đồng hồ đếm ngược về đến 0, hoặc khi người dùng đã gỡ bom thành công, chúng ta cần phải dừng chiếc đồng hồ lặp đó lại bằng lệnh clearInterval(tên_bộ_đếm).
Bên cạnh đó, nếu chỉ muốn chạy một hành động duy nhất sau một khoảng thời gian chờ (không lặp lại), ta dùng lệnh setTimeout().

Cú pháp dừng và chờ đợi:

// Dừng bộ đếm thời gian lặp
clearInterval(boDem);

// Chạy hàm noBom đúng 1 lần duy nhất sau 3 giây (3000ms) chờ đợi
setTimeout(noBom, 3000);

20 Phút Hoạt động 3: Lập Trình Hàm Đếm Ngược Giây

Học sinh tìm hiểu cách viết biến số giây và viết logic giảm số giây đi 1 đơn vị, cập nhật kết quả lên màn hình và kiểm tra điều kiện kết thúc bằng if.

Ví dụ logic đếm ngược:

let giay = 10;
let boDem;

function demNguoc() {
    giay = giay - 1; // Giảm giây đi 1
    document.getElementById('dong-ho').innerHTML = giay;
    
    if (giay == 0) {
        clearInterval(boDem); // Dừng đếm
        alert('BÙM! 💥');
    }
}

15 Phút Hoạt động 4: CSS Thiết Kế Số Điện Tử Cỡ Lớn

Để số giây đếm ngược trông khẩn cấp và rõ ràng giống như một quả bom hẹn giờ thực thụ, ta sử dụng các thuộc tính CSS phóng to chữ và tạo phông chữ kiểu điện tử.

CSS số đếm ngược:

#dong-ho {
    font-size: 80px;            /* Phóng to số giây */
    font-family: 'Courier New', monospace; /* Kiểu chữ máy tính cổ điển */
    color: #e74c3c;             /* Màu đỏ khẩn cấp */
    text-align: center;
    background-color: #2d3436;  /* Màu nền đen tối */
    padding: 20px;
    border-radius: 10px;
}

🎁 Dự án Thực hành: Đồng Hồ Đếm Ngược

Mô tả: Tạo trang web "Đồng hồ gỡ bom lượng tử" hiển thị số giây đếm ngược từ 10 về 0. Người chơi bấm nút "Kích Hoạt" để đồng hồ bắt đầu chạy. Nếu bấm nút "Gỡ Bom" kịp thời trước khi về 0, người chơi sẽ thắng. Ngược lại, trang web sẽ đổi màu nền sang đỏ và hiển thị chữ "BÙM! 💥".

Các bước lập trình chi tiết:

Khởi tạo thư mục dự án bai22-1, tạo file index.html và style.css.
Trong index.html, tạo tiêu đề <h1>: ĐỒNG HỒ GỠ BOM LƯỢNG TỬ.
Tạo thẻ hiển thị số giây đếm ngược: <h1 id="dong-ho" style="font-size: 80px;">10</h1>.
Tạo 2 nút bấm:
<button onclick="khoiDong()">Kích Hoạt 🚀</button> và
<button onclick="goBom()">Gỡ Bom 🛡️</button>.

Viết mã JavaScript trong thẻ <script> ở cuối body:

let giay = 10;
let boDem;

function khoiDong() {
    // Chỉ kích hoạt nếu bộ đếm chưa chạy
    if (!boDem) {
        boDem = setInterval(demNguoc, 1000);
    }
}

function demNguoc() {
    giay = giay - 1;
    document.getElementById('dong-ho').innerHTML = giay;
    
    if (giay == 0) {
        clearInterval(boDem);
        document.body.style.backgroundColor = 'red';
        document.getElementById('dong-ho').innerHTML = 'BÙM! 💥';
    }
}

function goBom() {
    clearInterval(boDem);
    alert('Chúc mừng em đã gỡ bom thành công và cứu thế giới! 🏆');
}

Trong style.css, định dạng căn giữa toàn bộ trang web, thiết lập giao diện bảng đếm ngược to và đổi màu sắc cảnh báo khẩn cấp.