Tạo trò chơi ghép hình bằng cách cắt nhỏ và trộn ngẫu nhiên hình ảnh với JavaScript

Nếu bạn muốn tổ chức mini game dạng “ghép hình đoán ảnh” trên Facebook hoặc Fanpage, thì cách đơn giản và hiệu quả nhất là cắt nhỏ hình ảnh → trộn thứ tự hiển thị → tạo đáp án. Bài viết này sẽ hướng dẫn bạn làm điều đó một cách dễ dàng bằng JavaScript.

1. Dùng công cụ online để cắt nhỏ hình ảnh

Đầu tiên, bạn cần chia ảnh lớn thành nhiều phần nhỏ. Công cụ miễn phí trực tuyến Pine Tools hỗ trợ việc này rất tiện lợi.

Đến công cụ cắt ảnh

Bạn chọn ảnh gốc, cắt thành lưới (ví dụ 5×5), sau đó tải về tất cả các ảnh đã được chia nhỏ.

2. Chuẩn bị thư mục chứa ảnh và tạo HTML

Sau khi tải về, bạn tạo một thư mục tên ghep-hinh (ví dụ trên Desktop), chứa tất cả ảnh đã chia nhỏ. Sau đó tạo file index.html với nội dung sau:

Xem demo Tải về mẫu

<style type="text/css">
div {
    display: inline-block;
    position: relative;
}
div span {
    position: absolute;
    font-family: Roboto;
    font-size: 32px;
    color: #fff;
    top: 5px;
    left: 5px;
    text-shadow: -1px -1px 2px rgb(255 255 255 / 10%), 2px 2px 3px rgb(0 0 0 / 90%);
}
</style>

<script type="text/javascript">
var imgArr = [];
for (var i = 1; i <= 25; i++) {
    imgArr.push(i);
}
shuffle(imgArr);

for (var i = 0; i < imgArr.length; i++) {
    document.write('<div><img src="a (' + imgArr[i] + ').jpg"><span>' + (i + 1) + '</span></div>');
    if ((i + 1) % 5 == 0) document.write('<br>');
}
document.write('<br><br>');
for (var i = 1; i <= 25; i++) {
    for (var j = 0; j < imgArr.length; j++) {
        if (i == imgArr[j]) {
            document.write((j + 1) + ', ');
            break;
        }
    }
}
function shuffle(a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a;
}
</script>

3. Kết quả và ứng dụng thực tế

• Hình ảnh hiển thị sẽ được sắp xếp ngẫu nhiên, mỗi mảnh có đánh số thứ tự
• Bên dưới là đáp án tương ứng: mảnh ảnh số bao nhiêu ở vị trí thứ mấy
• Rất phù hợp để bạn đăng lên Fanpage kèm câu hỏi như: “Hình ảnh này là gì?” hoặc “Tìm số thứ tự đúng”

Kết luận

Chỉ với một công cụ cắt ảnh online và vài dòng JavaScript, bạn đã có thể tạo trò chơi tương tác ghép hình thú vị cho cộng đồng. Đây là một thủ thuật đơn giản, không cần backend, dễ chỉnh sửa, dễ triển khai – đặc biệt hiệu quả khi tổ chức mini-game nhanh gọn trên mạng xã hội.