Trò chơi Kéo thả là một hoạt động giáo dục vui nhộn cho các bạn nhỏ. Khi chơi, việc tìm và kéo thả các hình khối giúp tăng cường khả năng nhận biết các loại hình dạng của trẻ.

Trò chơi kéo thả

Trong các bài viết trước, các bạn đã tìm hiểu về cách thiết kế trò chơi “Tìm quy luật và điền vào chỗ còn thiếu” với ActivePresenter 8. Trò chơi này yêu cầu các bạn nhỏ nhận biết quy luật của các dãy đối tượng khác nhau. Hôm nay, chúng ta sẽ học cách thiết kế một trò chơi nhận biết đối tượng khác, đó là trò chơi Kéo thả. 

Các bạn nhỏ chắc hẳn đã rất quen thuộc với trò chơi Kéo thả. Người chơi chỉ cần quan sát các đối tượng có hình dạng tương đồng và ghép chúng lại với nhau. Việc này tăng cường khả năng nhận diện hình dạng, kích cỡ, không gian và vị trí một cách trực quan của trẻ. Chúng ta có thể dễ dàng tạo trò chơi bằng cách in các tài liệu có sẵn trên mạng. Nhưng giờ đây, bạn hoàn toàn có thể biến các tài liệu giấy đó thành các hình khối tương tác. Hãy cùng nhau thiết kế trò chơi tương tác Kéo thả với ActivePresenter 8 qua các bước:

  1. Cách chơi 
  2. Chuẩn bị cho trò chơi
  3. Bố cục của trò chơi  
  4. Cách tạo trò chơi

Bạn có thể bấm vào đây để tải về trò chơi mẫu.

Cách Chơi Trò Chơi Kéo thả

Trò chơi Kéo thả rất dễ chơi. Nhiệm vụ của người chơi là quan sát và nhận biết các đối tượng có hình dạng tương đồng. Tiếp theo, kéo những hình có màu vào các hình không màu tương ứng. Nếu kéo sai, đối tượng được kéo sẽ quay về vị trí ban đầu và người chơi không được điểm nào. Ngược lại, nếu kéo đúng thì người chơi sẽ được 10 điểm cho mỗi lượt. Hành động kéo-thả giúp người chơi xây một ngôi nhà, một cái thuyền hoặc hoàn thành bức tranh bị khuyết. Sau khi hoàn thành một slide, trò chơi sẽ tự động chuyển đến slide tiếp theo.

Bây giờ, chúng ta hãy cùng thiết kế trò chơi này.

Chuẩn Bị Tài Nguyên Cho Trò Chơi Kéo thả

Bước đầu tiên để tạo bất kỳ trò chơi nào là chuẩn bị tài nguyên. Trò chơi Kéo thả cần một số ảnh nền sống động. Ví dụ: hình nền đồng cỏ phía sau ngôi nhà hoặc đại dương và con thuyền. Bạn thu thập lượng hình nền tùy ý. Còn về hình dạng, chúng đã có sẵn trong ứng dụng. Đi đến tab Thêm > Hình dạng để chọn những hình bạn cần.

Bố Cục Của Trò Chơi

Bố cục của trò chơi kéo thả

Trò chơi Kéo thả gồm có 6 slide được chia làm 3 phần như sau:

Bạn có thể thêm nhiều slide nội dung hơn thế. Sau đây, hãy cùng tạo trò chơi bằng cách tạo lần lượt các slide như trên. 

Cách Tạo Trò Chơi Kéo Thả

1. Tạo Slide Mở Đầu

Slide mở đầu của trò chơi Kéo thả có 3 phần: tên trò chơi, luật chơi và nút Bắt đầu. Ngoài ra, bạn có thể trang trí cho slide thêm sinh động như hình minh họa dưới đây:

slide mở đầu của trò chơi kéo thả

1.1. Trang Trí Slide 

Làm theo hướng dẫn dưới đây để tạo phần trang trí slide:

  • Thêm và chỉnh sửa, căn chỉnh ảnh nền cho slide (khung Thuộc tính > tab Thuộc tính của slide > Ảnh nền > chọn một ảnh nền từ bài giảng hoặc từ máy tính của bạn).
  • Thêm một hình dạng vào slide (tab Thêm > Hình dạng > nhấp chuột để chọn hình).
  • Sao chép và dán hình vừa thêm (nhấn tổ hợp phím CTRL+CCTRL+V) và kéo đến vị trí bạn muốn.
  • Chỉnh sửa màu sắc, đường viền để nhận dạng đối tượng di chuyển và đối tượng đích (chọn đối tượng > khung Thuộc tính > tab Kiểu & Hiệu ứng > Tô/Đường/Đổ bóng).
  • Thêm hiệu ứng xuất hiện và biến mất cho các đối tượng (tab Hoạt hình > Hiệu ứng xuất hiện/Hiệu ứng biến mất > chọn hiệu ứng trong danh sách).
  • Thêm đường chuyển động cho các đối tượng  (chọn đối tượng di chuyển > tab Hoạt hình > Nhấn mạnh & Đường chuyển động > nhấp nút > chọn đường di chuyển). 
  • Thay đổi hướng di chuyển bằng cách kéo đầu mũi tên màu đỏ của đường chuyển động.
  • Tạo thêm các cặp đối tượng như trên (nhấn tổ hợp phím CTRL+G > CTRL+C > CTRL+V).
  • Thay đổi hình dạng của các đối tượng mới tạo (tab Định dạng > Thay đổi hình dạng).
  • Căn chỉnh lại tất cả các đối tượng để slide nhìn cân đối và đẹp mắt (tab Định dạng > Căn chỉnh).

1.2. Thêm Tên Trò Chơi Và Luật Chơi

Sau khi các đối tượng biến mất, tên trò chơi và luật chơi hiện ra. Bạn tạo và chỉnh sửa hai mục này theo các bước sau:

  • Thêm 2 chú thích văn bản cho hai nội dung trên (tab Thêm > Chú thích văn bản).
  • Thay đổi nội dung, phông chữ, cỡ chữ, màu sắc cho các chú thích (tab Trang đầu > Phông chữ).
  • Thêm hiệu ứng xuất hiện cho các đối tượng (tab Hoạt hình > Hiệu ứng xuất hiện/Hiệu ứng biến mất > chọn hiệu ứng trong danh sách).
  • Thêm đường chuyển động cho Tên trò chơi (cách làm giống như trên). Thêm chuyển động sẽ làm slide sống động hơn.

1.3. Thêm Nút Bắt Đầu

Khi người chơi nhấp vào nút này, trình chiếu sẽ chuyển đến slide tiếp theo để người cho có thể bắt đầu chơi. Do đó, bạn cần thêm một sự kiện – hành động cho nút Bắt đầu. Các bước thực hiện như sau:

  • Thêm nút (tab Thêm > Nút).
  • Nhấp vào nút để đổi tên.
  • Đổi phông chữ, cỡ chữ, màu sắc cho nút (tab Trang đầu > Phông chữ).
  • Thêm hiệu ứng xuất hiện cho các đối tượng (tab Hoạt hình > Hiệu ứng xuất hiện/Hiệu ứng biến mất > chọn hiệu ứng trong danh sách).
  • Thêm hành động cho sự kiện Khi nhấp chuột của nút (chọn nút > khung Thuộc tính > tab Tương tác > Sự kiện – Hành động > thêm hành động Khi nhấp chuột > Lên trước: 1 slide).

Sau khi hoàn thành hết các bước trên, bạn có thể điều chỉnh khoảng thời gian xuất hiện của các đối tượng trên slide như ý muốn:

2. Tạo Slide Nội Dung

Sau khi bấm nút Bắt đầu, trình chiếu sẽ chuyển đến slide nội dung. Do vậy, bạn cần tạo ra 4 slide nội dung bằng cách:

  • Thêm 4 slide mới (vào tab Trang đầu hoặc Thêm > nhấp vào mũi tên ở nút Slide mới > chọn Blank). 
  • Cài đặt hình nền cho slide (khung Thuộc tính > tab Thuộc tính của slide > Ảnh nền > chọn một ảnh nền từ bài giảng hoặc từ máy tính của bạn).

Tiếp theo, bạn cần tạo các nguồn kéo, đích thả và một ô ghi điểm ở mỗi slide nội dung. Sau đó, sử dụng các sự kiện – hành động để tạo tương tác cho trò chơi. Như vậy, các bước tạo slide nội dung sẽ lần lượt là:

2.1. Chuyển Đổi Hình Dạng Bình Thường Thành Nguồn Kéo

Slide nội dung đầu tiên yêu cầu người chơi ghép các nguồn kéo và đích thả với nhau để xây một căn nhà. Để làm việc đó, bạn cần sử dụng các hình dạng để tạo các bộ phận của căn nhà. Ví dụ, ngôi nhà được xây bằng 4 hình là: tam giác, chữ nhật, chữ nhật bo tròn góc và lục giác. Những hình dạng này lần lượt đại diện cho mái nhà, tường nhà, cửa chính và cửa sổ. Bạn tiến hành theo các bước: 

  • Vẽ 4 hình dạng (tab Thêm > Hình dạng).
  • Chỉnh sửa thuộc tính bên ngoài của chúng (khung Thuộc tính > tab Kiểu & Hiệu ứng > Tô/Đường/Đổ bóng).
  • Đặt tên cho từng hình để nhận diện các phần của căn nhà (chọn 1 hình dạng > khung Thuộc tính > tab Tương tác > Thông tin chung > Tên).
  • Chuyển đổi các hình dạng trên thành nguồn kéo (chọn tất cả các đối tượng > khung Thuộc tính > tab Tương tác > Kéo – Thả > chọn Nguồn kéo).
Thiết lập nguồn kéo trong trò chơi kéo thả

Sau thao tác này, các hình dạng bình thường sẽ trở thành các nguồn kéo có đường viền nét đứt màu xanh lá cây. 

2.2 Tạo Các Đích Thả Bằng Khu Vực Thả

Có 3 bước để tạo các khu vực thả cho trò chơi Kéo thả. Các bước này được mô tả chi tiết dưới đây.

2.2.1. Tạo Đích Thả Bằng Khu Vực Thả

Trong bước này, chúng ta sẽ tạo các đích thả tương ứng với các nguồn kéo ở trên bằng Khu vực thả qua các thao tác:

  • Thêm một khu vực thả (tab Thêm > Khu vực thả).
  • Xóa các phần mặc định không cần thiết như nguồn kéo và các tin nhắn phản hồi.
  • Thêm 3 bản sao của khu vực thả đó (nhấn tổ hợp phím CTRL+CCTRL+V).
  • Thay đổi hình dạng của các khu vực thả để chúng trông giống với nguồn kéo tương ứng (chọn một khu vực thả > tab Định dạng > Thay đổi hình dạng).
  • Đặt tên cho các khu vực thả tương ứng với các bộ phận của căn nhà. 
  • Chỉnh sửa kiểu và màu sắc theo ý muốn (chọn tất cả các khu vực thả > khung Thuộc tính > tab Kiểu & Hiệu ứng > Tô/Đường/Đổ bóng).
2.2.2. Thiết Lập Danh Sách Chấp Nhận Và Nguồn Kéo Đúng Cho Khu Vực Thả

Trong bước này bạn sẽ phải xác định các Giá trị chấp nhận và Giá trị đúng cho các đối tượng khu vực thả. Giá trị chấp nhận quy định các nguồn kéo mà khu vực thả có thể chấp nhận. Chúng có thể không phải là những giá trị đúng. Còn Giá trị đúng là đáp án chính xác, giúp người chơi xây được một ngôi nhà đúng. 

Để cài đặt danh sách các giá trị trên, chọn một khu vực thả > khung Thuộc tính > tab Tương tác > Kéo – Thả > chọn Danh sách chấp nhận.

Ví dụ, bạn vừa chọn đích thả là mái nhà. Trong hộp hội thoại vừa xuất hiện, bạn chỉ đánh dấu vào các ô ở cột Chấp nhận và cột Đúng tương ứng với nguồn kéo mái nhà.  Việc này quy định 1 đích thả mái nhà chỉ chấp nhận 1 nguồn kéo duy nhất là mái nhà. 

Sau khi nhấp vào nút OK, một mũi tên màu cam (đường kết nối kéo-thả) xuất hiện trên Canvas. Mũi tên này xác định cặp nguồn kéo – khu vực thả đúng.

Như vậy, bạn đã tạo xong các đích thả tương ứng với các nguồn kéo. 

2.2.3. Tùy Chỉnh Thuộc Tính Cho Đích Thả Khớp Với Nguồn Kéo

Khi người chơi kéo đúng nguồn kéo vào đích thả, các chấm ở viền đích thả biến mất. Thay vào đó, chỉ có khối màu đặc không đường viền giống như nguồn kéo xuất hiện.  Sự thay đổi trạng thái này có thể thiết lập dễ dàng với tính năng Trạng thái đối tượng của ActivePresenter. Hãy làm theo các bước sau:

  • Chọn một đích thả.
  • Mở khung Trạng thái đối tượng (tab Khung nhìn > Trạng thái đối tượng).
  • Nhấp nút để chỉnh sửa trạng thái.
  • Nhấp nút để tạo một trạng thái mới.
  • Chọn Chấp nhận thả từ danh sách trạng thái có sẵn. Nó thể hiện trạng thái của đích thả khi chấp nhận một nguồn kéo đúng. 
  • Chỉnh sửa trạng thái Chấp nhận thả cho khớp với thuộc tính của nguồn kéo (khung Thuộc tính > tab Kiểu & Hiệu ứng > > Tô liên tục > Màu sắc > chọn màu trong danh sách). 
  • Chọn Không đường viền cho trạng thái Chấp nhận thả (khung Thuộc tính > tab Kiểu & Hiệu ứng > Đường > Không có đường viền).

2.3. Tạo Ô Ghi Điểm Có Sử Dụng Biến

Trò chơi Kéo thả sẽ hấp dẫn hơn nếu người chơi được cộng điểm cho mỗi lần kéo đúng. Vì vậy, bạn nên tạo một ô ghi điểm. Tuy nhiên, trước khi tạo ô ghi điểm này, bạn cần một biến có giá trị bằng số. Để tạo biến, bạn vào tab Trang đầu > Biến. Khi hộp hội thoại Biến xuất hiện, nhấp vào nút để thêm biến mới. 

Tạo biến trong trò chơi kéo thả

Đặt tên cho biến, ví dụ là “Điểm”. Sau đó chọn SỐ ở danh sách Loại. Tiếp theo, để tạo ô ghi điểm cho trò chơi, bạn cần:

  • Thêm một hình dạng (tab Thêm > Hình dạng).
  • Nhấp vào trong hình dạng để nhập tên bạn muốn, ví dụ “Điểm”.
  • Chỉnh sửa thuộc tính của hình dạng và văn bản trong đó. 
  • Liên kết biến vừa tạo với ô ghi điểm (nhấp vào ô ghi điểm để chỉnh sửa văn bản trong ô > tab Trang đầu > Tham chiếu > chọn biến “Điểm” vừa tạo.
  • Cài đặt để ô ghi điểm này xuất hiện ở nhiều slide tiếp theo (nhấp chuột phải vào ô ghi điểm > Hiển thị qua nhiều slide > Lớp trên cùng).

2.4. Thêm Tương Tác Cho Trò Chơi Kéo Thả

Để tạo tương tác cho trò chơi Kéo thả, bạn cần thêm sự kiện – hành động cho các đối tượng. Theo luật chơi, với mỗi lượt người chơi kéo đúng, âm thanh đúng sẽ phát ra. Đích thả được tô màu, và họ được 10 điểm. Vì vậy, trong sự kiện Khi thực hiện đúng của một đích thả, hãy thêm các hành động:

  • Phát âm thanh > chọn Correct 1 trong danh sách.
  • Chỉnh sửa biến. Cài đặt như hình minh họa dưới đây:
  • Ẩn đối tượng > chọn nguồn kéo mà bạn muốn ẩn.
  • Phát âm thanh (Chặn) và đặt một điều kiện phù hợp để tránh slide bị chuyển tiếp quá nhanh. Nói cách khác, âm thanh này sẽ được phát ra khi người chơi đạt được điểm tối đa và hoàn thành slide. Ví dụ, trong slide vừa tạo, người chơi thao tác kéo-thả 4 lần. Điểm tối đa có thể đạt được là 40. Vì vậy, điều kiện sẽ là “NẾU Điểm bằng với 40”.

Khi người chơi kéo sai, âm thanh sai sẽ vang lên. Để tạo tương tác đó, trong hành động Khi thực hiện sai của mỗi đích thả, hãy thêm một hành động Phát âm thanh > chọn Incorrect 1 từ trong danh sách. 

Khi thực hiện xong, tất cả các sự kiện – hành động của một đích thả sẽ hiển thị như sau:

Bạn hoàn toàn có thể sao chép các sự kiện – hành động  từ đối tượng này sang đối tượng khác, sau đó chỉnh sửa cho phù hợp. Việc này giúp bạn tiết kiệm thời gian và công sức tạo trò chơi. 

3. Tạo Slide Kết thúc

Slide này thông báo cho người chơi rằng trò chơi đã kết thúc. Bạn có thể thiết kế nó như sau:

  • Thêm ảnh nền cho slide (khung Thuộc tính > tab Thuộc tính của slide Ảnh nền > chọn một ảnh nền từ bài giảng hoặc từ máy tính của bạn).
  • Thêm văn bản, nhập tin nhắn kết thúc và chỉnh sửa cho đẹp mắt.
Slide kết thúc của trò chơi kéo thả

4. Xem Trước Và Xuất Bản Trò Chơi Kéo Thả

Bước cuối cùng trước khi hoàn thành trò chơi là kiểm tra lại những gì bạn vừa thiết lập.

Để xem trước trò chơi, bạn hãy nhấp vào nút Xem trước HTML5 hoặc nhấn phím F5.

Để xuất bản trò chơi, bạn vào tab Xuất > chọn HTML5, gói SCORM, hoặc xAPI. Sau đó, bạn có thể chia sẻ trò chơi này với mọi người. 

Lời kết

Trên đây, chúng ta đã tìm hiểu các tạo trò chơi Kéo thả bằng phần mềm ActivePresenter 8. Phần mềm cung cấp cho bạn tất cả các tài nguyên cần thiết và các hành động tương tác cho trò chơi. Hãy theo dõi trang Tin tức và kênh YouTube của chúng tôi để biết thêm chi tiết về tính năng của phần mềm. Cám ơn các bạn đã theo dõi. 

Các bài viết khác:

Thiết kế trò chơi Đánh máy với phần mềm ActivePresenter 8.

Thiết kế Game học từ vựng tiếng Anh với ActivePresenter 8. 

Thiết kế trò chơi Gỡ bom với phần mềm ActivePresenter 8.