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

Đập Chuột Chũi (Trò Chơi Clicker Tính Điểm)

Hôm nay chúng ta sẽ bắt đầu tự xây dựng một trò chơi tính điểm clicker cổ điển và làm quen với phương thức lắng nghe sự kiện click chuột chuyên nghiệp addEventListener.

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

Hiểu nguyên lý xây dựng trò chơi clicker tăng điểm số bằng biến đếm.
Sử dụng phương thức .addEventListener('click', ...) để lắng nghe sự kiện click chuột tách biệt khỏi HTML.
Thành thạo toán tử tăng giá trị biến đếm score++ (hoặc score = score + 1).
Định dạng con trỏ chuột tương tác và hiệu ứng di chuột nổi bật cho nhân vật game.
Ánh xạ việc cộng điểm và bắt sự kiện click chuột sang khối lệnh tương ứng trong Scratch.

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

Trò Chơi Clicker & Liên Hệ Scratch: 25 phút
Sự Kiện Lắng Nghe addEventListener: 15 phút
Lập Trình Tăng Điểm Số (score++): 20 phút
CSS Thiết Kế Nhân Vật Game: 15 phút
Dự án Đập Chuột Chũi: 45 phút

25 Phút Hoạt động 1: Trò Chơi Clicker & Liên Hệ Scratch

"Hôm nay chúng ta sẽ tự tay làm một trò chơi game đập chuột chũi. Cứ mỗi lần chuột chũi thò đầu lên và các em click chuột trúng nó, điểm số của chúng ta sẽ được cộng thêm 1 điểm.
Trong lập trình, việc cộng điểm số này dựa trên một biến đếm số thay đổi liên tục!"

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

Trong Scratch, các em tạo một biến số tên là 'Điểm' và thay đổi giá trị của nó khi nhấp vào nhân vật:

⭐ thay đổi [Điểm] một lượng [1] (change [score] by [1])

Trong JavaScript, ta tạo biến và cộng thêm 1 đơn vị bằng toán tử tăng ++:

let score = 0; // Biến điểm ban đầu bằng 0
score++;       // Tăng điểm thêm 1 (tương đương score = score + 1)

15 Phút Hoạt động 2: Sự Kiện Lắng Nghe addEventListener

Trước đây, ta dùng thuộc tính onclick="..." viết ngay trong thẻ HTML. Cách này làm code HTML bị rối khi game phức tạp.
Hôm nay, ta sẽ học cách kết nối sự kiện click chuột một cách chuyên nghiệp bằng phương thức .addEventListener('click', tên_hàm) viết hoàn toàn trong thẻ script.

Cú pháp addEventListener:

// Tìm thẻ ảnh chuột chũi và bắt đầu lắng nghe sự kiện click chuột
document.getElementById('anh-chuot').addEventListener('click', dapChuot);

Lưu ý: Khi đưa tên hàm vào addEventListener, ta **không** viết cặp dấu ngoặc đơn () sau tên hàm.

20 Phút Hoạt động 3: Lập Trình Tăng Điểm Số (score++)

Học sinh tìm hiểu cách viết hàm xử lý khi đập chuột: tăng biến điểm, hiển thị số điểm mới lên màn hình để thông báo cho người chơi biết.

Ví dụ hàm xử lý đập chuột:

let score = 0;

function dapChuot() {
    score++; // Cộng thêm 1 điểm
    // Cập nhật điểm lên thẻ h2
    document.getElementById('hien-diem').innerHTML = 'Điểm số: ' + score;
}

15 Phút Hoạt động 4: CSS Thiết Kế Nhân Vật Game

Để chuột chũi trông giống một nhân vật game có thể click được, ta sử dụng CSS để chỉnh kích thước hợp lý, thêm con trỏ bàn tay chỉ và hiệu ứng phóng to nhẹ khi di chuột qua.

CSS hiệu ứng chuột chũi:

#anh-chuot {
    width: 120px;
    cursor: pointer; /* Biến con trỏ chuột thành hình bàn tay chỉ */
    transition: transform 0.2s; /* Tạo hiệu ứng phóng to mượt mà */
}

#anh-chuot:hover {
    transform: scale(1.1); /* Phóng to nhẹ 1.1 lần khi rê chuột qua */
}

🎁 Dự án Thực hành: Đập Chuột Chũi Candy

Mô tả: Tạo một trang web hiển thị điểm số ban đầu bằng 0 và một ảnh chú chuột chũi ngộ nghĩnh. Mỗi lần người chơi click chuột trúng chú chuột chũi, điểm số sẽ tự động tăng thêm 1 điểm.

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

Khởi tạo thư mục dự án bai23-1, thư mục con assets chứa ảnh chuột chũi (mole.png), tạo file index.html và style.css.
Trong index.html, thiết lập tiêu đề <h1>: ĐẬP CHUỘT CHŨI CANDY.
Tạo thẻ hiển thị điểm số: <h2 id="hien-diem">Điểm số: 0</h2>.
Tạo thẻ ảnh chú chuột chũi: <img id="anh-chuot" src="mole.png" style="width: 120px;">.
Trong style.css, định dạng căn giữa trang web, thiết kế màu sắc giao diện tươi vui và cấu hình thuộc tính cursor: pointer; kèm hiệu ứng phóng to khi hover cho ảnh chuột chũi.

Viết mã JavaScript kết nối sự kiện trong thẻ <script> ở cuối body:

let score = 0; // Biến lưu điểm

function dapChuot() {
    score++; // Tăng điểm
    document.getElementById('hien-diem').innerHTML = 'Điểm số: ' + score; // Cập nhật chữ
}

// Đăng ký sự kiện click chuột chuyên nghiệp bằng addEventListener
document.getElementById('anh-chuot').addEventListener('click', dapChuot);