Vẽ trò chơi giai điệu trong Scratch

Nov 25 2022
Hãy sử dụng Scratch để tạo một trò chơi vẽ giai điệu. Mọi người đều có thể học viết mã với Scratch, được phát triển bởi MIT Media Labs.

Hãy sử dụng Scratch để tạo một trò chơi vẽ giai điệu. Mọi người đều có thể học viết mã với Scratch, được phát triển bởi MIT Media Labs. Khá đơn giản để tạo trò chơi thú vị, hoạt hình, tác phẩm nghệ thuật và những thứ thú vị khác.

Về dự án :

Tạo các tác phẩm nghệ thuật đẹp mắt bằng cách vẽ trên màn hình bằng chuột/ngón trỏcác màu khác nhau. Phần thú vị là mỗi màu được gán một giai điệu/nốt nhạc khác nhau. Khi thiết kế hoàn tất, chỉ cần nhấn phím cách để bắt đầu dòng thời gian. Âm thanh được tạo ra khi thanh tiếp xúc với màu sắc của hình vẽ. Điều này sẽ tạo ra những giai điệu độc đáo với sự kết hợp của các nốt và giai điệu khác nhau.

Ngay cả việc viết nguệch ngoạc sẽ tạo ra một số bản nhạc thú vị và dễ chịu. Điều này sẽ khiến họ tò mò.

Đây là một dự án cho khóa học “Machine learning” do ANMOL SRIVASTAVA giảng dạy . Chúng tôi đã sử dụng phiên bản sửa đổi của scratch — Stretch (http://stretch3.github.io/). Điều này cho phép chúng tôi nhận được nhiều tiện ích mở rộng hơn để chơi cùng.

Chúng tôi đã sử dụng 4 phần mở rộng trong dự án này:

  1. Handpose2Scratch
  2. Cái bút
  3. Âm nhạc
  4. TM2Scratch

Hãy chia trò chơi thành các bước sau: -

  1. Chọn một sprite (bút) và sử dụng chuột để điều khiển chuyển động của nó.
  2. Thêm màu vào canvas khi nhấp chuột.
  3. Thay đổi màu sắc bằng các phím khác nhau.
  4. Tạo các khối và gán các màu sắc khác nhau, âm thanh khác nhau cho chúng.
  5. Thêm điều khiển chuyển động của ngón tay vào sprite (bút) bằng Handpose2Scratch (đối với đầu ra Cuối cùng của chúng tôi)
  6. Thêm các máy có thể dạy cho bút lên và xuống để vẽ bằng ngón trỏ dễ dàng hơn.
Ví dụ về trò chơi vẽ điều khiển bằng chuột

Bước 1: Chọn một sprite (bút) và sử dụng chuột để điều khiển chuyển động của nó.

Chọn bất kỳ sprite (bút chì) nào có thể hoạt hình. Bạn cũng có thể đặt tên cho nó. Chúng tôi đã chọn Bút chì và đặt tên và màu cho nó (màu xanh lam). Đặt nó ở vị trí X=0 và Y=0, nghĩa là nó nằm ở giữa trang.

Mã ban đầu cho bút để đặt vị trí mặc định của nó

Chúng tôi cũng đã thêm các hướng dẫn nhỏ để người dùng nhận thông báo về cách mọi thứ hoạt động khi họ bắt đầu trò chơi như hình trên.

Bước 2: Thêm Màu vào canvas khi nhấp chuột.

Để thêm điều khiển di chuyển chuột trên sprite, chúng tôi đã viết đoạn mã sau.

Khối mã điều khiển pen sprite bằng chuột

Giờ đây, người dùng có thể vẽ bằng cách nhấp vào nút chuột và di chuyển bút bằng con trỏ chuột.

Bước 3: Thay đổi màu sắc bằng các phím khác nhau.

Chúng tôi đã tạo các trang phục khác nhau cho các màu bút chì khác nhau để hiển thị sự thay đổi có thể nhìn thấy khi nhấn một số phím nhất định để thay đổi màu sắc.

Mã hoán đổi màu sắc khi nhấn các phím khác nhau

Bước 4: Tạo các khối và gán các màu khác nhau, âm thanh khác nhau cho chúng.

Chúng tôi đã tạo một khối và nhân đôi nó để tạo một đường và đặt vị trí của nó ở cực bên trái (x=-240) và làm cho nó di chuyển 10 bước một lần theo hướng X. Điều này làm cho nó trông giống như dòng

Mã cho chuyển động của các khối trên canvas. Do lag, một số khối đã di chuyển chậm

Bước 5: Thêm điều khiển chuyển động ngón tay vào sprite(pen).

Thay thế 'con trỏ chuột' bằng 'Chuyển đến x & y' từ các khối chuyển động. Ngoài ra, hãy thêm tiện ích mở rộng Handpose2Scratch.

Kéo 'x của ngón trỏ' & 'y của ngón trỏ' vào chương trình chính và đặt nó vào khoảng trắng.

Điều này làm cho sprite dính vào ngón trỏ và di chuyển trên canvas vô thời hạn.

Bước 6: Thêm máy có thể dạy cho bút lên xuống để vẽ bằng ngón trỏ dễ dàng hơn.

Trong máy có thể dạy được, hãy chọn tùy chọn Dự án hình ảnh:

https://teachablemachine.withgoogle.com/train

Để đào tạo chế độ, chúng tôi đã tạo hai lớp (Pen Up, Pen Down). Các bước rất đơn giản. Tạo một lớp và mô hình bằng máy ảnh web. Đầu ra từ đào tạo trông như thế này:

Đào tạo mô hình Dự án hình ảnh trong TM.

Tiếp theo, chúng tôi đã xuất Mô hình và sao chép URL.

Ngoài ra, hãy thêm tiện ích mở rộng Máy có thể dạy được (TM2Scratch).

Kéo khối URL của mô hình phân loại hình ảnh vào (mã) chương trình chính và thay thế “Chuột xuống?” với khối “hình ảnh is___” .

Thêm liên kết máy có thể dạy được đã đào tạo vào URL mô hình. Đặt dự đoán thành Pen down.

Cập nhật mã thuộc tính bút với TM

Sau khi làm theo mọi thứ, đây là những gì chúng tôi nghĩ ra.

Tải xuống mã cuối cùng tại đây:https://drive.google.com/drive/folders/1w4FAdF74Uw74eZG-Fia1GtEOUkHMYfJU?usp=sharing

Tín dụng

Viết mã: Ishaan Gupta & Anant Patrick

Ý tưởng, Khái niệm hóa, động não và lập kế hoạch: Ishaan Gupta & Vedakshiaggarwal

Tài liệu nội dung: Ishaan Gupta & Vedakshi Aggarwal

Và thế là xong! thật đơn giản phải không nào.

Cảm ơn bạn đã dành thời gian ở đây.❤