--------------- <> -----------------
--- KHOA HỌC - CÔNG NGHỆ - GIÁO DỤC - VIỆC LÀM ---
--- Học để đi cùng bà con trên thế giới ---

Tìm kiếm trong Blog

Lập trình Scratch (18) - Hệ thống menu

Bài trước: Lập trình Scratch (17) - Lồng tiếng cho nhân vật
-----
18. Hệ thống menu

Menu là danh sách các lựa chọn.

Ví dụ, khi bạn vào quán ăn, bạn sẽ thấy một danh sách các món ăn; bạn muốn ăn món gì thì chỉ việc chỉ tay (hoặc bấm, hoặc chạm) vào menu để lựa chọn.

Trong phần mềm, menu cũng có chức năng tương tự.

Menu là một tập hợp các nút bấm, biểu tượng hoặc chữ viết. Mỗi lựa chọn trong menu sẽ có một "nhiệm vụ" riêng, ví dụ:

- Nút Bắt đầu: Dẫn bạn vào màn hình chơi game

- Nút Cài đặt: Dẫn bạn đến chỗ chỉnh âm thanh, ánh sáng

- Nút Hướng dẫn: Dẫn bạn đến trang đọc luật chơi

Trong bài học này, chúng ta cùng trải nghiệm để tạo ra hệ thống menu.

Chúng ta cùng làm theo từng bước:

[Bước 1] Thêm 2 phông nền (backdrop)

- Phông nền 1: chọn hình khu rừng - Forest (hoặc tùy bạn chọn). Đặt tên phông nền là "Menu". Muốn đặt tên cho phông nền, thì bạn bấm vào mục Backdrops > điền tên vào mục Costume. 

Xem hình minh họa.

- Phông nền 2: chọn hình đồng cỏ - Savanna. Đặt tên là "TroChoi"

- Sau khi thêm 2 phông nền, chúng ta sẽ có tổng cộng là 3 phông nền, có tên lần lượt là backdrop1, Menu và TroChoi.

[Bước 2] Tạo 3 nhân vật (sprite)

- Nhân vật 1 là chú mèo, hoặc bạn có thể chọn nhân vật khác tùy thích

- Nhân vật 2: bạn bấm vào vùng chọn nhân vật (Choose a Sprite), gõ vào ô tìm kiếm là Button, chọn Button 2. 

Đổi tên nút này thành Play. 

Nhập chữ cho bề mặt nút là PLAY. 

Đổi màu chữ để nhìn cho rõ. 

Xem hình minh họa.


- Nhân vật 3: bạn bấm vào vùng chọn nhân vật (Choose a Sprite), gõ vào ô tìm kiếm là Home, chọn Home Button. 

Đổi tên nút này thành Home.

[Bước 3] Lập trình

Bạn lập trình từng bước, sau mỗi bước, chạy thử để xem kết quả có như mong đợi không, nếu không, hãy kiểm tra xem việc lập trình đã đúng chưa?

Lập trình cho nút Play

Chọn nút Play, lập trình theo hướng dẫn sau:

Scratch Blocks

Giải thích ý nghĩa

when green flag clicked

Bắt đầu thực hiện khi nhấn vào lá cờ xanh

switch backdrop to [Menu]

Hiển thị phông nền Menu

show

Hiển thị nút Play lên phông nền


Sau các bước ở trên, khi chạy chương trình, chúng ta đã có phông nền là Menu, trên phông nền có một nút Play. Chúng ta sẽ lập trình tiếp.

Lập trình cho phông nền và chuyển cảnh

- Bấm chuột vào mục Backdrops (khung phía dưới, bên phải màn hình)

- Chọn mục Code (phía trên, bên trái) để bắt đầu lập trình cho phông nền Menu

- Tạo biến music: vào mục Variables > bấm vào mục Make a Variable để tạo một biến mới, đặt tên là music

- Tiếp tục lập trình theo hướng dẫn trong bảng sau:

Scratch Blocks

Giải thích ý nghĩa

when backdrop switches to [Menu]

Kích hoạt chuỗi lệnh khi phông nền chuyển sang Menu

set [music] to [1]

Thiết lập giá trị biến "music" thành 1 để bắt đầu điều kiện cho việc phát nhạc

repeat until <(music) = [0]>

Vòng lặp liên tục thực hiện các lệnh bên trong cho đến khi biến "music" bị chuyển về giá trị 0

    play sound [Bossa Nova] until done

Phát bản nhạc "Bossa Nova" và lặp lại từ đầu mỗi khi nhạc kết thúc (tạo nhạc nền). Trước đó, bạn phải vào mục Sound để tìm và nạp đoạn nhạc tên là Bossa Nova

Tạo thêm một khối lập trình mới

(lưu ý: bạn vẫn đang lập trình cho Backdrops)

when backdrop switches to [TroChoi]

Kích hoạt chuỗi lệnh khi phông nền chuyển sang TroChoi

set [music] to [1]

Thiết lập giá trị biến "music" thành 1 để bắt đầu điều kiện cho việc phát nhạc

repeat until <(music) = [0]>

Vòng lặp liên tục thực hiện các lệnh bên trong cho đến khi biến "music" bị chuyển về giá trị 0

    play sound [Video Game 1] until done

Phát bản nhạc "Video Game 1" liên tục, làm nhạc nền cho màn hình TroChoi. Trước đó, bạn phải vào mục Sound để tìm và nạp đoạn nhạc tên là Video Game 1

Tạo thêm một khối lập trình mới

(lưu ý: bạn vẫn đang lập trình cho Backdrops)

when [space] key pressed

Bắt đầu thực hiện lệnh khi người dùng nhấn “phím cách” (Space) trên bàn phím

stop all sounds

Ngắt tất cả các bản nhạc đang phát

set [music] to [0]

Gán giá trị 0 cho biến "music" để thoát khỏi vòng lặp phát nhạc hiện tại

switch backdrop to [next backdrop]

Chuyển sang phông nền kế tiếp trong danh sách



Lập trình cho nút Play (tiếp)

Chọn nút Play, lập trình theo hướng dẫn sau:

Scratch Blocks

Giải thích ý nghĩa

when this sprite clicked

Kích hoạt các lệnh bên dưới khi người dùng bấm chuột vào nút Play

play sound [Pop] until done

Phát âm thanh "Pop" (tiếng bấm nút)

set [music] to [0]

Thiết lập giá trị của biến "music" bằng 0, để thoát khỏi vòng lặp phát nhạc hiện tại

stop all sounds

Tắt tất cả các âm thanh đang phát

broadcast [play]

Gửi đi một thông điệp tên là "play" để các nhân vật khác hoặc sân khấu nhận biết và hành động. Cách làm: bạn thêm khối lệnh “broadcast[message1]” > bấm chuột vào “message1” > chọn “new message” > nhập tên mới là “play”

hide

Làm nút Play biến mất khỏi màn hình sân khấu

Tạo thêm một khối lập trình mới

(lưu ý: bạn vẫn đang lập trình cho nút Play)

when I receive [home]

Lệnh này sẽ chạy khi nhân vật (nút Play) nhận được thông điệp "home" từ một nơi khác gửi tới. Cách làm: bạn thêm khối lệnh “when I receive [play hoặc message1]” > bấm chuột vào “play hoặc message1” > chọn “new message” > nhập tên mới là “home”

wait [0.1] seconds

Tạm dừng chương trình trong một khoảng thời gian rất ngắn (0.1 giây)

switch backdrop to [Menu]

Chuyển sang phông nền Menu

show

Hiển thị nút Play lên phông nền


Lập trình cho nút Home

Chọn nút Home và lập trình theo hướng dẫn sau:

Scratch Blocks

Giải thích ý nghĩa

when green flag clicked

Chạy đoạn mã bên dưới, khi người dùng nhấn vào biểu tượng lá cờ xanh

hide

Ẩn nút Home, khi trò chơi bắt đầu

Tạo thêm một khối lập trình mới

(lưu ý: bạn vẫn đang lập trình cho nút Home)

when this sprite clicked

Kích hoạt các lệnh bên dưới khi người dùng bấm chuột trực tiếp vào nút này

start sound [pop]

Bắt đầu phát âm thanh "pop" (thường dùng làm hiệu ứng tiếng bấm nút)

broadcast [home]

Gửi một thông điệp có tên là "home" đến tất cả các nhân vật khác trong chương trình

set [music] to [0]

Thiết lập giá trị của biến "music" bằng 0, thường dùng để dừng vòng lặp nhạc nền

stop all sounds

Tắt ngay lập tức tất cả các âm thanh đang phát.

hide

Ẩn nhân vật này đi sau khi đã thực hiện các lệnh trên.

Tạo thêm một khối lập trình mới

(lưu ý: bạn vẫn đang lập trình cho nút Home)

when I receive [play]

Kích hoạt đoạn mã khi nhân vật nhận được thông điệp có tên là "play" từ một lệnh broadcast khác

wait [0.1] seconds

Tạm dừng trong một khoảng thời gian cực ngắn (0.1 giây) trước khi thực hiện lệnh tiếp theo

switch backdrop to [TroChoi]

Thay đổi phông nền sang hình ảnh có tên là "TroChoi"

show

Hiển thị nút Home lên màn hình


Lập trình cho chú Mèo

Chọn nhân vật chú mèo, và lập trình theo nội dung sau:

Scratch Blocks

Giải thích ý nghĩa

when I receive [home]

Kích hoạt đoạn mã khi nhân vật nhận được thông điệp "home"

hide

Ẩn nhân vật khỏi màn hình khi trở về màn hình chính (Menu)

when I receive [play]

Kích hoạt đoạn mã khi nhân vật nhận được thông điệp "play" để bắt đầu trò chơi

show

Hiển thị nhân vật trên sân khấu

say [Hello!] for [2] seconds

Hiển thị bong bóng lời thoại với chữ "Hello!" trong vòng 2 giây

when [right arrow] key pressed

Kích hoạt các lệnh khi người chơi nhấn phím mũi tên sang phải trên bàn phím

point in direction [90]

Quay mặt nhân vật sang hướng bên phải (90 độ)

move [20] steps

Di chuyển nhân vật về phía trước 20 bước

next costume

Thay đổi sang trang phục kế tiếp để tạo hiệu ứng hoạt hình (ví dụ: đang bước đi)

when [left arrow] key pressed

Kích hoạt các lệnh khi người chơi nhấn phím mũi tên sang trái trên bàn phím

set rotation style [left-right]

Thiết lập kiểu xoay chỉ trái-phải để nhân vật không bị lộn ngược khi quay đầu

point in direction [-90]

Quay mặt nhân vật sang hướng bên trái (-90 độ)

move [20] steps

Di chuyển nhân vật về phía trước 20 bước.

next costume

Thay đổi sang trang phục kế tiếp để tạo hiệu ứng bước đi khi lùi lại hoặc quay trái


Chúc mừng bạn, bạn đã tạo được một game “quá đơn giản”. Nhưng dù sao đây cũng là thành quả của chính bản thân bạn.

Bạn có thể tự nghĩ ra kịch bản của trò chơi và lập trình thêm.

Hẹn các bạn ở các bài học tiếp theo.

-----

Menu

In this section we handle

- backdrops

- buttons

- background music

Backdrops

For this project we select two backdrops

- Forest for the home screen

- Savanna for the play screen

The home screen has a play button. The play screen has a home button. 

The home screen

When the program starts we

- switch to the Forest background

- show the Play button

We could add more buttons for options, high-score, etc. 

The play button

When the play button is clicked we

- play a pop sound

- set the boolean variable music to zero (to stop the music loop)

- stop all sounds

- broadcast the message play

- hide the play button

-----
Bài sau:

Robotics (1) - Chương trình đầu tiên

1. Chương trình đầu tiên

1.1 Cài đặt Robosim

Robosim là một nền tảng giả lập robot, giúp bạn học lập trình và tư duy logic cực kỳ hiệu quả mà không cần phải mua robot thật.

Trước khi cài đặt phần mềm, bạn cần kiểm tra xem cấu hình máy tính của bạn có đủ mạnh không?

Đây là cấu hình để máy có thể mở được phần mềm và chạy các bài tập đơn giản:

- Hệ điều hành: Windows 10 (64-bit)

- CPU: Intel Core i3 hoặc tương đương

- RAM: 4GB

- Card đồ họa (GPU): Intel HD Graphics 620 hoặc đời cao hơn

- Dung lượng ổ cứng trống: Khoảng 2GB - 5GB

- Có kết nối Internet để đăng nhập tài khoản và lưu tiến trình

Làm sao để kiểm tra được cấu hình máy tính?

- Mở cửa sổ Run, gõ lệnh dxdiag

Tải và cài đặt phần mềm Robosim

- Vào trang web sau để tải phần mềm:

https://robosim.stemtown.com/

- Sau khi tải về máy, thực hiện cài đặt như một chương trình thông thường.

- Sau khi cài đặt thành công, chạy phần mềm Robosim lần đầu, bạn cần tạo tài khoản trên hệ thống Robosim.

- Bấm vào Register để tạo tài khoản mới

- Sau khi đã có tài khoản, bạn đăng nhập vào phần mềm để sử dụng


- Để bắt đầu làm quen với Robosim, chúng ta cùng làm một bài tập đơn giản

1.2 Viết chương trình đầu tiên

Lập trình cho robot di chuyển theo 1 đường thẳng.

Các bước thực hiện:

- Từ giao diện của Robosim, bấm vào mục Training

- Chọn mục Teaching and training

- Chọn Blank space để tạo ra một bản đồ trống

Tạo robot

- Tạo một robot: trong mục Robot, chọn 1 robot mà bạn thích, ví dụ Explore Type I, robot sẽ xuất hiện trên màn hình chính (ở giữa)


Lập trình điều khiển robot

- Sau khi đã có robot, chúng ta sẽ chọn mục Programming để lập trình cho robot

- Sau khi bấm vào mục Programming, sẽ xuất hiện các khối lệnh lập trình. Bạn nào đã làm quen với lập trình Scratch sẽ thấy các khối lệnh này khá quen thuộc.


- Để lập trình, bạn sẽ kéo các khối lệnh từ cửa sổ bên trái ra khung cửa sổ chính (ở giữa)

- Thực hiện theo hướng dẫn ở bảng sau:

Robosim Blocks

Giải thích ý nghĩa

RCU [task1]

Khối sự kiện khởi đầu. Nó ra lệnh cho bộ điều khiển robot bắt đầu thực thi các lệnh nằm bên trong nhiệm vụ có tên là "task1"

    move [forward] at speed [50] for [5] secs

Robot đi thẳng về phía trước với tốc độ 50% công suất động cơ trong khoảng thời gian 5 giây

    stop moving

Ngắt điện vào động cơ, khiến robot dừng lại hoàn toàn ngay sau khi kết thúc 5 giây di chuyển

Kết quả sẽ được đoạn mã như sau:


Thực thi chương trình

- Sau khi lập trình xong, bạn bấm vào mục Simulation (nút thứ 3 từ trái sang - thanh công cụ phía trên màn hình)

- Bấm vào nút Start debugging để thực thi chương trình

- Sau khi chạy chương trình xong, bấm nút Stop debugging để dừng chương trình

Lưu lại bản thiết kế robot và mã nguồn

Để lưu lại bản thiết kế của robot, bạn chọn mục Build Robot > chọn Save the robot … > nhập tên (ví dụ Robot01 > bấm nút Save. Chương trình RoboSim sẽ lưu tập tin thiết kế robot với phần mở rộng là “.rsr” (ví dụ Robot01.rsr). Sau này, bạn có thể mở lại bản thiết kế robot này để sử dụng.

Để lưu lại mã nguồn, bạn chọn mục Programming > chọn Save the program … > nhập tên (ví dụ DiThang (đi thẳng) > bấm nút Save. Chương trình RoboSim sẽ lưu tập tin mã nguồn với phần mở rộng là “.rspx” (ví dụ DiThang.rspx). Sau này, bạn có thể mở lại tập tin mã nguồn này để sử dụng.

Chúc mừng bạn, vậy là bạn đã tạo được một robot, lập trình và chạy chương trình.

1.3 Bài tập và câu hỏi

Bài tập

Bài tập 1a. Cài đặt Robosim, tạo tài khoản trên hệ thống Robosim.

Bài tập 1b. Viết chương trình đầu tiên (làm theo hướng dẫn trong bài học)

Bài tập 1c. Viết chương trình cho robot đi lùi theo một đường thẳng

Bài tập 1d. Viết chương trình cho robot đi sang trái theo một đường thẳng

Bài tập 1e. Viết chương trình cho robot đi sang phải theo một đường thẳng

Câu hỏi

Câu 1.1: Sau khi đã thiết kế xong một mẫu robot, việc lưu tập tin dưới định dạng đuôi ".rsr" có ý nghĩa gì? 

A. Để robot có thể tự động chạy mà không cần lập trình

B. Để lưu lại mã nguồn (các khối lệnh) của robot

C. Để có thể mở lại và sử dụng đúng bản thiết kế robot đó cho các lần sau

D. Để xuất bản thiết kế robot lên trang web robosim.stemtown.com

Câu 1.2: Mục đích chính của khối lệnh RCU [task1] xuất hiện ở đầu mỗi chương trình trong Robosim là gì? 

A. Để robot bắt đầu di chuyển về phía trước với tốc độ 50%

B. Để xác định điểm bắt đầu và đặt tên cho nhiệm vụ mà robot sẽ thực hiện

C. Để kết nối robot với hệ thống internet và lưu tiến trình

D. Để dừng tất cả các hoạt động hiện tại của robot

Câu 1.3: Khi bạn muốn kiểm tra xem các khối lệnh mình vừa kéo thả có điều khiển robot chạy đúng như ý muốn hay không, bạn phải thực hiện quy trình nào? 

A. Vào mục Build Robot và chọn Save

B. Vào mục Programming và chọn Save the program

C. Vào mục Simulation và chọn Start debugging

D. Mở cửa sổ Run và gõ lệnh dxdiag

Học thuộc một số từ tiếng Anh và nghĩa của chúng

- RCU

- Build

- Programming

- Simulation

- Start

- Debugging

- Task

- Motor

- Move

- Stop

Mời bạn thực hiện các thử thách tiếp theo ở bài học sau.

-----

Bài sau: