Anda di halaman 1dari 56

MEDIA MENGAJAR

INFORMATIKA
UNTUK SMP/MTs KELAS VII
Bab MENGENAL DAN MENGGUNAKAN
4 PEMROGRAMAN VISUAL

Sumber: commons.wikimedia.org
PETA KONSEP Pemrograman
Visual

Konsep Menggunakan
Pemograman Visual Aplikasi

Konsep Menyiapkan Lingkungan Kerja


Membuat
Perangkat Blok Kode
Program
Pemograman Menu bar
Visual
Tab bar

Script Area
Sprite and
Stage Pane
Stage
A Konsep Pemograman Visual
 Pemrograman adalah proses untuk menerjemahkan logika berpikir menjadi langkah-
langkah atau proses yang dapat dijalankan oleh komputer.
 Proses pemrograman membutuhkan kemampuan menganalisis persoalan,
menerjemahkannya menjadi langkah-langkah penyelesaian, dan menuliskannya dalam
bentuk kode-kode atau perintah menggunakan bahasa pemrograman tertentu.
 Setelah persoalan dianalisis dan ditemukan solusi, akan dibuat langkah-langkah
penyelesaian dalam bentuk algoritme pemrograman yang ditulis dalam bentuk
flowchart atau pseudocode, yang selanjutnya akan diterjemahkan menggunakan
bahasa pemrograman.
 Bahasa pemrograman adalah bahasa yang dimengerti oleh komputer dan
memungkinkan kita sebagai pengguna memerintahkan komputer untuk melakukan
proses menggunakan bahasa tersebut. Contohnya, bahasa pemrograman C/C++, Java,
Phyton, Ruby, SOL, Perl, PHP dan masih banyak lagi.
 Compiler merupakan penerjemah yang mengubah program yang ditulis oleh programmer
menjadi bahasa mesin yang dimengerti oleh komputer. Proses menerjemahkan program
dikenal dengan istilah compiling.
 Compiler juga berfungsi sebagai aplikasi program editor tempat programmer menuliskan,
mengelola, memeriksa, dan mengoreksi kode-kode program yang ditulis.
 Aplikasi compiler dikenal dengan nama perangkat lunak pemrograman (programming
software).
 Pemrograman visual (visual programming) atau pemrograman blok (block programming)
merupakan cara pemrograman yang lebih mudah dipelajari dan dilakukan dengan cara
melakukan drag and drop bagian-bagian program dalam bentuk blok kode saja tanpa
harus menuliskan kode-kode program sebagaimana pada pemrograman konvensional.
 Telah tersedia banyak perangkat lunak yang dapat digunakan sebagai aplikasi
pemrograman visual, di antaranya Scratch, Ardublok, mBlok, dan MiniBloq yang tersedia
dalam versi online dan versi desktop.
B Mengenal Aplikasi Pemrograman Visual Scratch
 Scratch merupakan salah satu aplikasi pemrograman visual terbaik yang awalnya
dikembangkan oleh MIT (Massachusetts Institute of Technology). Saat ini aplikasi
tersebut dikembangkan bersama oleh Google dan tim dari MIT.

Sumber: dokumen penerbit


Tampilan Scratch versi online. Untuk memulai program, klik Start Creating.
1. Men-download dan Menginstal Scratch
 Jika ingin menggunakan Scratch versi
dekstop, kita dapat mendownload installer
aplikasi tersebut di link: https://scratch
mit.edu/download.
 Ada dua pilihan installer yang digunakan,
yaitu untuk Windows dan Mac OS.
 Pilihlah installer yang sesuai dengan sistem
operasi di komputermu, kemudian klik
tombol Download. Kotak dialog untuk
Sumber: dokumen penerbit
memilih direktori penyimpanan akan
Link untuk men-download installer Scratch.
ditampilkan. Pilih direktori penyimpanan dan
ikuti langkah langkah yang diminta. Tunggu
sampai proses download selesai.
Langkah-langkah untuk dengan menginstal aplikasi Scratch di komputer adalah
sebagai berikut.
1) Jalankan File Explorer yang 3) Klik file installer tersebut sehingga proses
terdapat pada komputermu. instalasi akan dijalankan.

Sumber: dokumen penerbit Sumber: dokumen penerbit


Membuka direktori penyimpanan dan Proses instalasi Scratch sedang dijalankan
menampilkan file installer Scratch.
4) Tunggu sampai proses instalasi selesai.
2) Bukalah direktori tempat installer Setelah proses instalasi selesai, Scratch
yang telah di-download ditempatkan. secara otomatis akan dijalankan.
2. Mengenal Lingkungan Kerja Scratch
 Jendela Scratch dibagi menjadi beberapa bagian yang disebut dengan pane.
 Bagian atas jendela Scratch terdapat menu bar yang mempunyai tombol untuk
memilih bahasa, serta terdapat menu File, Edit, dan Tutorial.
 Bagian bawah terdapat tab bar yang terdiri atas tab Code, Costumes, dan Sounds,
tombol Go dan Stop, serta tiga tombol pengaturan jendela.
 Bagian utama jendela dibagi menjadi beberapa pane, yaitu paling kiri disebut palet
blok (block palette). Bagian tengah disebut script area, dan bagian paling kanan
terdapat stage. Di bawah stage terdapat sprite pane dan stage pane.
 Tampilan jendela Scratch dan bagian-bagiannya secara lebih jelas dapat dilihat
pada slide berikutnya.
Tombol
Go
Menu bar
Tab bar Pengatur
Jendela

Tombol
Stop
Stage

Stage Pane

Sumber: dokumen penerbit Script area Sprite Pane

Tampilan jendela Scratch.


a. Menu Bar
 Menu bar terdiri atas beberapa bagian, yaitu tombol untuk memilih bahasa yang
digunakan, serta menu File, Edit, dan Tutorial.
 Menu File mempunyai perintah New untuk memulai proyek, perintah Load from
your computer untuk membuka proyek yang sudah pernah dikerjakan, dan
perintah Save to your computer untuk menyimpan proyek yang sedang
dikerjakan.
 Menu Edit mempunyai perintah Restore dan Turn on Turbo Mode.
 Menu Tutorial digunakan untuk mengakses berbagai tutorial yang tersedia.

b. Tombol Go dan Stop


 Tombol Go (simbol bendera) digunakan untuk menjalankan blok kode yang ada di
script area, sedangkan tombol Stop (simbol segi enam) digunakan untuk
menghentikan blok kode yang sedang dijalankan.
c. Tombol Pengaturan Jendela
 Tombol pengaturan jendela terdiri atas tiga
tombol dengan tiga bentuk tampilan yang
berbeda.
 Mulai dari kiri, tombol pertama digunakan
untuk menampilkan bagian script area yang
lebih besar.
 Tombol kedua digunakan untuk menampilkan
bagian stage yang lebih besar.
 Tombol ketiga digunakan untuk menampilkan
bagian stage dengan mode full screen.
Tampilan ketiga banyak digunakan ketika ingin Block palette
melihat hasil blok kode ketika dijalankan. merupakan tempat
blok kode berada.
Sumber: dokumen penerbit
d. Tab Code atau Block e. Tab Backdrops
Palette
 Tab Code atau block palette (palet  Tab Backdrops ditempatkan di tab bar dan
blok) terdiri atas blok-blok kode akan muncul jika kita memilih backdrop
yang dapat di-drag dan yang ada di stage pane.
ditempatkan di script area.  Tab Backdrops digunakan untuk
 Untuk membuat block palette tidak menampilkan paint editor yang digunakan
terlalu besar dan mudah dalam mengatur gambar dari backdrop.
mengelola blok kode yang ada, blok
kode dibagi menjadi beberapa

Sumber: dokumen penerbit


kelompok.
 Masing-masing kelompok blok kode
dapat diakses secara cepat dengan
cara mengeklik tombol yang
terdapat di bagian kiri dari block
palette. Tab backdrops.
f. Tab Costumes
 Tab Costumes ditempatkan di block
palette dan akan muncul jika kita
memilih sprite yang ada di sprite pane
atau mengeklik di sprite pane.
 Tab Costumes digunakan untuk
menampilkan paint editor yang dapat
digunakan untuk mengatur komposisi
dari sprite.
 Kita dapat mengatur ukuran, warna,
menggambar ulang, dan pengaturan
lainnya dari sprite yang dipilih. Sumber: dokumen penerbit

Tab Costumes digunakan untuk mengatur


komposisi dari sprite.
g. Tab Sounds
 Sprite yang digunakan dalam program dapat disertai
dengan suara untuk menggambarkan kejadian yang
berbeda-beda.
 Tab Sounds digunakan untuk mengatur atau
memodifikasi suara yang ada dengan melakukan
berbagai pengaturan, seperti mengatur kecepatan
suara saat dibunyikan, memberikan efek tertentu,
mengatur volume, menjalankan suara dari arah
terbalik dan sebagainya.
 Selain menggunakan suara yang sudah tersedia, kita
juga dapat menambahkan suara dan hasil rekaman Sumber: dokumen penerbit
atau menggunakan file suara dari tempat lain. Mengatur suara yang digunakan
 Sampai saat ini Scratch hanya dapat menerima suara dalam aplikasi Scratch.
dalam format .mp3 dan .wav.
h. Script Area
 Script area adalah bagian jendela yang
digunakan untuk menyusun atau
menempatkan blok kode.
 Blok kode ditempatkan di area ini dengan
cara drag and drop blok kode yang dipilih.
 Ketika dijalankan, Scratch akan
mengeksekusi semua blok kode yang
ditempatkan di area ini.  

Sumber: dokumen penerbit

Script area, yaitu tempat untuk menyusun blok kode


i. Stage
 Stage adalah bagian jendela yang digunakan untuk menunjukkan tampilan dari program,
seperti tampilan backdrop dan sprite, gerakan yang dimiliki sprite dan interaksi dengan
sprite yang lain.
 Setiap titik pada stage diberi koordinat arah sumbu x dan y.
 Koordinat dalam arah sumbu x (sumbu datar) dimulai dari 240 sampai dengan 240,
sedangkan koordinat dalam arah sumbu y (sumbu vertikal) dimulai dari  180 sampai 180.

Lokasi sprite pada stage


dengan tampilan (a) default
dan (b) setelah diubah
ukuran sumbu dan arahnya.

(a) (b)
Sumber: dokumen penerbit
j. Sprite dan Stage Pane
 Sprite pane digunakan untuk menampilkan daftar
sprite yang dimiliki oleh proyek yang sedang
dikerjakan, yang ditampilkan dalam bentuk ikon
thumbnail.
 Sprite pane memiliki tombol yang dapat
digunakan untuk menambahkan sprite dari daftar
yang disediakan Scratch, menggambar sendiri,
membiarkan Scratch memilih sendiri atau
menggunakan file gambar yang ada di komputer. Sumber: dokumen penerbit
 Pada bagian atas sprite pane terdapat informasi
Sprite dan stage pane untuk memilih
tentang sprite yang dipilih. karakter sprite dan backdrop.
 Stage pane digunakan untuk menampilkan daftar
backdrop (latar) yang digunakan di stage dan
memiliki tombol untuk menambahkan backdrop.
C Menggunakan Aplikasi Pemrograman Visual Scratch
 Scratch dilengkapi dengan berbagai fitur yang memungkinkan pengguna membuat
berbagai karya dengan cara yang mudah, seperti cerita, animasi, game, dan musik.
Fitur-fitur yang disediakan sudah cukup memfasilitasi ide-ide penggunanya untuk
menghasilkan karya yang hebat.
 Berikutnya akan dijelaskan bagaimana menggunakan fitur-fitur yang ada untuk
menghasilkan game sederhana, sehingga dapat mengenali dengan lebih baik dan
terbiasa menggunakan fitur-fitur tersebut, serta dapat melihat kemampuan yang
dimiliki oleh Scratch.
 Membuat produk yang hebat tidak dapat dilakukan dengan mudah, membutuhkan
komitmen, ketekunan, dan kerja keras.
1. Mengenal Berbagai Jenis Blok Kode
 Pemrograman blok adalah proses membuat program yang dilakukan dengan
menggunakan blok-blok kode yang disusun menjadi rangkaian proses yang akan
dijalankan oleh komputer.
 Berbeda dengan pemrograman konvensional yang dilakukan dengan menuliskan
kode-kode program, pemrograman blok dilakukan dengan memilih blok kode dan
menempatkannya dengan susunan blok yang sesuai.
 Di lingkungan kerja Scratch, pembuatan program dilakukan dengan cara memilih
blok kode di block palette, kemudian men-drag and drop blok tersebut ke bagian
script area.
a. Blok Motion
 Blok Motion digunakan untuk
menyimpan blok kode yang
mengatur gerakan sprite.
 Blok kode akan memerintahkan
sprite untuk melakukan gerakan,
seperti pindah dengan jumlah
langkah tertentu, berputar dengan
satuan derajat tertentu, berpindah
secara acak, bergerak ke koordinat
tertentu, berpindah dengan arah
derajat tertentu, dan berpindah
dengan satuan koordinat sumbu x (1) (2)
atau y. Sumber: dokumen penerbit

Blok kode pada blok Motion.


b. Blok Looks
 Blok Looks digunakan untuk menyimpan blok kode yang mengatur tampilan
program Pengaturan tersebut dapat berupa pengaturan backdrop dan sprite dalam
hal ukuran, warna, dan lain-lain.

Sumber: dokumen penerbit


(1) (2)
Blok kode pada blok Looks
c. Blok Sound d. Blok Events
 Blok Sound digunakan untuk menyimpan  Blok Events digunakan untuk menyimpan
blok kode yang mengatur suara yang blok kode merespons kejadian-kejadian
digunakan, seperti menjalankan dan yang ada. Contohnya, perintah untuk
menghentikan suara, mengatur pitch merespons aksi dari pointer mouse, jika
suara, mengatur volume, dan lainnya. tombol tertentu di keyboard ditekan,
dan sebagainya.

Sumber: dokumen penerbit


Sumber: dokumen penerbit

Blok kode pada Blok kode pada


blok Sound. blok Events.
e. Blok Control
 Blok Control digunakan untuk menyimpan blok kode yang berupa pengecekan
kondisi, perulangan, dan sebagainya. Blok ini biasanya digunakan untuk membuat
sprite dapat berjalan, berpindah ke posisi tertentu, dan lain-lain.

Sumber: dokumen penerbit

Blok kode pada


(1) (2) blok Control.
f. Blok Sensing g. Blok Operators
 Blok Sensing digunakan untuk  Blok Operators digunakan untuk
menyimpan blok kode untuk men-trigger menyimpan blok kode dalam menjalankan
dijalankannya blok kode yang lain, seperti operasi tertentu atau sebagai operator
pengaturan jika sprite menyentuh objek dalam mengecek kondisi tertentu.
lain, warna lain, atau berada pada posisi
dengan jarak tertentu, dan sebagainya.

Sumber: dokumen penerbit


Sumber: dokumen penerbit

Blok kode pada


blok Sensing.
(2)

Blok kode pada


(1) blok Operators.
h. Blok Variables
 Blok Variables adalah blok yang
digunakan untuk menyimpan blok
kode untuk variabel-variabel.
 Beberapa blok kode yang ada,
seperti mengatur nilai variabel,
mengubah nilai variabel, dan
menampilkan/ menyembunyikan
nilai variabel. Pada bagian ini, kita
juga dapat menambahkan variabel
sendiri.
Blok kode pada
blok Variables.
Sumber: dokumen penerbit
2. Membuat Program
 Sebelum membuat game, kita perlu mengatur skenario bagaimana game tersebut
akan bekerja dan aturan-aturan yang berlaku. Pembuatan game dilakukan dengan
beberapa tahapan, seperti menyiapkan latar belakang stage atau biasa disebut
backdrop, mengatur tampilan sprite, kemudian menambahkan blok kode.
 Misalnya, kita ingin membuat game berjudul "Life Underwater". Pada game ini,
seekor ikan akan mencari makanan berupa apel dan stroberi. Pada saat yang
bersamaan, ikan harus menghindari serangan dari kepiting dan ubur-ubur. Setiap
makanan yang diperoleh akan menambahkan poin. Jika poin sudah mencapai batas
tertentu (100 atau lebih besar) pemain dinyatakan menang. Sebaliknya, jika ikan
bersentuhan dengan kepiting atau ubur-ubur, poin kesehatan akan turun. Jika nilai
kesehatan sudah mencapai nol pemain akan dinyatakan kalah. Pada game ini, apel,
stroberi, kepiting, dan ubur-ubur akan bergerak secara acak, sedangkan ikan akan
bergerak mengikuti tombol arah pada keyboard yang ditekan pemain.
a. Menyiapkan Backdrop
Pada game ini kita akan menggunakan tiga backdrop, yaitu backdrop yang ditampilkan
saat bermain, backdrop yang ditampilkan saat pemain menang, dan backdrop yang
ditampilkan saat pemain kalah.
Langkah-langkah membuat backdrop adalah sebagai berikut.
1) Tambahkan tiga backdrop ke stage pane.
Oleh karena backdrop yang digunakan
sama, yaitu Underwater 1, maka tambahkan

Sumber: dokumen penerbit


backdrop tersebut sebanyak tiga kali.
2) Klik stage pane sehingga tab Backdrops
muncul di tab bar. Kemudian, klik tab
Backdrops tersebut untuk menampilkan
paint editor.
Backdrop yang sudah ditambahkan
ke stage pane.
Langkah-langkah membuat backdrop adalah sebagai berikut.

3) Backdrop Underwater 1 akan digunakan


untuk menampilkan pesan jika pemain
kalah. Oleh karena itu, tambahkan
tulisan "GAME OVER!". Hal itu dapat
dilakukan dengan cara mengeklik tombol
teks di paint editor, kemudian
tambahkan teks yang diinginkan.
4) Atur ukuran dan warna teks sesuai yang
diinginkan.
Sumber: dokumen penerbit

Menambahkan teks untuk pesan


kalah ke backdrop.
Langkah-langkah membuat backdrop adalah sebagai berikut.
5) Pilih backdrop Underwater 3, kemudian tambahkan teks "Congratulation YOU
WIN!". Kemudian, atur jenis huruf, ukuran, dan warna teks sesuai dengan yang
diinginkan.

Menambahkan teks
untuk pesan menang ke
backdrop.
Sumber: dokumen penerbit
b. Menyiapkan Sprite
Pada game ini kita akan menggunakan lima sprite, yaitu Fish, Crab, Jellyfish, Strawberry,
dan Apple.
Langkah-langkah untuk menambahkan kelima sprite tersebut adalah sebagai berikut.
1) Klik tombol Choose a Sprite sehingga
jendela untuk memilih sprite akan
ditampilkan.
2) Pilih sprite yang ingin digunakan. Sprite yang
dipilih akan ditambahkan ke sprite pane.
3) Lakukan cara di atas sampai semua sprite
yang dibutuhkan sudah ditambahkan ke
sprite pane. Semua sprite yang
ditambahkan akan ditampilkan di stage. Sumber: dokumen penerbit

Menambahkan sprite ke sprite pane


Langkah-langkah untuk menambahkan kelima sprite tersebut adalah sebagai berikut.
4) Hapus sprite yang tidak
dibutuhkan atau yang
ditambahkan secara otomatis oleh
Scratch.
5) Klik sprite pane sampai tab
Costumes ditampilkan, kemudian
klik tab Costumes Pada tab
Costumes, kita dapat melakukan
berbagai pengaturan tampilan dari
sprite yang dipilih.
Sumber: dokumen penerbit
Sprite yang sudah ditambahkan ke sprite
pane.
Langkah-langkah untuk menambahkan kelima sprite tersebut adalah sebagai berikut.
6) Sebagai contoh, kita dapat memilih jenis
sprite Fish yang akan digunakan, mengatur
warna, dan berbagai pengaturan yang lain.
7) Atur ukuran dari sprite Fish sehingga
tampak proporsional dengan luas stage
yang ada.
8) Buang sprite Fish lain yang tidak digunakan.
9) Oleh karena kita menggerakkan Fish ke
arah kiri dan kanan, kita juga
membutuhkan sprite Fish yang menghadap
ke kiri. Jadi, klik kanan ikon sprite pada tab Sumber: dokumen penerbit

Costumes dan klik perintah Duplicate Sprite Mengatur sprite.


Fish akan diduplikasi menjadi dua.
Langkah-langkah untuk menambahkan kelima sprite tersebut adalah sebagai berikut.

10) Pilihlah sprite Fish hasil duplikasi,


kemudian klik tombol Flip Horizontal
sehingga sprite Fish tersebut akan
diubah menjadi ke kiri.

Sumber: dokumen penerbit


Mengatur arah sprite Fish.
Langkah-langkah untuk menambahkan kelima sprite tersebut adalah sebagai berikut.

11)  Aturlah semua sprite yang ada,


terutama ukuran sprite sehingga
tampak proporsional satu dengan
yang lain.
12) Setelah itu, atur blok-blok kode

Sumber: dokumen penerbit


sehingga sprite berperilaku sesuai
yang diinginkan.

Tampilan sprite di stage setelah pengaturan


ukuran sprite.
c. Menambahkan Blok Kode
Langkah terakhir untuk membuat proyek program adalah menambahkan kode-kode
program. Blok-blok kode ditambahkan untuk mengatur agar semua sprite yang ada
berperilaku sesuai dengan yang diinginkan. Oleh karena itu, kita akan menambahkan
blok kode satu per satu ke masing-masing sprite.
 Blok kode Sprite Fish
1) Aktifkan tab Code, kemudian pilihlah sprite
Fish pada sprite pane.

Sumber: dokumen penerbit


2) Pada bagian blok Events, pilih blok when
[tombol Go] clicked dan tambahkan ke
script area.
3) Pada bagian blok Control, pilih blok forever
dan tambahkan ke script area.
Blok kode yang sudah ditambahkan
 Blok kode Sprite Fish
4)  Selanjutnya, kita akan menambahkan
blok kode untuk mengatur gerakan
sprite Fish jika tombol arah ke atas
diklik. Oleh karena itu, dari blok
Control, tambahkan blok if- then ke
script area.
5) Kemudian dari blok Sensing,
tambahkan blok Key [space] pressed
ke script area.
6) Gantilah tombol [space] menjadi [up
arrow]. Tampilan blok kode akan Sumber: dokumen penerbit

tampak seperti pada gambar Menambahkan blok kode untuk


disamping. tombol arah ke atas.
 Blok kode Sprite Fish
7) Jika tombol arah ke atas ditekan, kita 8) Selanjutnya, dengan cara yang sama,
ingin agar sprite Fish bergerak ke atas tambahkan blok kode untuk tombol
sebesar 10 satuan koordinat. Oleh [down arrow].
karena itu, dari blok Motion,
tambahkan blok change y by 10.

Sumber: dokumen penerbit


Sumber: dokumen penerbit

Menambahkan blok kode untuk


Mengatur blok kode untuk tombol arah ke atas. tombol arah ke bawah.
 Blok kode Sprite Fish
9) Untuk menambahkan tombol ke kiri dan kanan
kita dapat melakukan cara yang sama dengan
langkah (7) dan (8). Perbedaannya adalah
koordinat sumbu yang berubah adalah sumbu.
Kita juga perlu mengganti sprite Fish yang
digunakan, yaitu pada saat tombol kanan yang
ditekan maka kita menggunakan sprite Fish yang
menghadap ke kanan, dan berlaku sebaliknya.

Sumber: dokumen penerbit


Oleh karena itu, selain blok if - then, key [space]
pressed, dan change x by [10] digunakan, kita
juga perlu menambahkan blok switch costume to
dari blok Looks. Blok kode yang ditambahkan
seperti gambar di samping.
Blok kode untuk sprite Fish
 Menambahkan Variabel
Dalam game yang dibangun, kita akan menggunakan kriteria kalah dan menang
dengan menghitung nilai poin (Point) dan kesehatan (Health) dari sprite Fish, Oleh
karena itu, kita perlu menambahkan variabel untuk menyimpan kedua nilai tersebut.
Penambahan variabel dapat dilakukan dengan langkah-langkah sebagai berikut.

1) Pada bagian blok Variables, klik tombol


Make a Variable, Kotak dialog New
Variable akan ditampilkan.

Sumber: dokumen penerbit


2) Beri nama variabel dengan nama Point
dan pilih For all sprites. Pilihan ini akan
membuat variabel dapat digunakan di
semua sprite.
3) Klik tombol OK.
Menambahkan variabel.
 Menambahkan Variabel
4) Dengan cara yang sama, tambahkan variabel kedua, yaitu variabel Health Kedua
variabel akan tampak di blok Variables seperti pada gambar di bawah ini. Selain
itu, variabel juga akan ditampilkan di stage dengan nilai 0.

Sumber: dokumen penerbit


Menambahkan variabel ke blok kode.
 Blok kode Sprite Apple dan Strawberry
Dalam game ini, sprite Apple dan Strawberry adalah makanan yang akan dikejar
oleh sprite Fish. Jika mereka saling bersentuhan, poin dari pemain akan bertambah.
Sprite Apple akan menambah poin 15, sedangkan sprite Strawberry akan
menambah poin 10. Jika poin telah mencapai 100 atau lebih, pemain dinyatakan
menang. Kedua sprite akan muncul dan bergerak secara acak. Penambahan blok
kode untuk mengatur perilaku kedua sprite adalah sebagai berikut.

1) Pilihlah sprite Apple di sprite pane.


2) Pada bagian blok Events, tambahkan blok when [tombol Go] clicked ke script
area.
3) Pada bagian blok Looks, tambahkan blok switch backdrop to [Underwater 1].
Ganti menjadi [Underwater 2]. Blok ini digunakan untuk mengganti backdrop
menjadi [Underwater 2], yaitu backdrop yang digunakan untuk bermain.
 Blok kode Sprite Apple dan Strawberry
4) Pada bagian blok Motion, tambahkan blok go to
[random position].
5) Pada bagian blok Variables, tambahkan blok set
[Health] to 0. Ganti variabel Health menjadi Point
Blok kode di script area akan tampak seperti pada
gambar disamping.
6) Setelah mengatur kondisi awal, kita akan
mengatur gerakan dari sprite Apple.
7) Pada bagian blok Control, tambahkan blok Forever.
8) Pada bagian blok Motion, tambahkan blok glide Sumber: dokumen penerbit
[1] secs to [random position]. Blok ini bertujuan
Blok kode yang ditambahkan
untuk mengatur sprite Apple agar bergerak terus ke script area.
ke posisi acak.
 Blok kode Sprite Apple dan Strawberry
9) Pada bagian blok Control, tambahkan blok
if - then.
10) Pada bagian blok Sensing, tambahkan blok
touching [mouse- pointer]? di parameter
blok if - then. Ganti [mouse-pointer]
menjadi [Fish], seperti pada gambar
disamping.

Sumber: dokumen penerbit


11) Di dalam blok if touching [Fish]? then, pada
bagian blok Sound, tambahkan blok play
sound [Chomp] until done.
12) Pada bagian blok Motion, tambahkan blok
go to [random position].
Blok kode yang sudah
ditambahkan ke script area.
 Blok kode Sprite Apple dan Strawberry
13) Pada bagian blok Variables, tambahkan
blok change [Health] by 0. Ganti menjadi
change [Point] by 15. Blok kode di script
area akan tampak seperti gambar di
samping.

Sumber: dokumen penerbit


Blok kode yang
sudah ditambahkan
ke script area.
 Blok kode Sprite Apple dan Strawberry
14) Untuk mengatur apa yang terjadi jika
Point telah mencapai 100 atau lebih,
kita akan menambahkan blok program
if-then pada blok Control. Selanjutnya,
pada blok Operators, tambahkan blok
lebih besar (>) dari dan tempatkan
sebagai kondisi di blok if – then, seperti

Sumber: dokumen penerbit


pada gambar di samping.
15) Pada bagian blok Variables, tambahkan
blok Point ke dalam blok Operator lebih
besar dan ganti 50 menjadi 99.

Menambahkan blok operator di


dalam blok kondisi If-then.
 Blok kode Sprite Apple dan Strawberry
16) Pada bagian blok Looks, tambahkan
blok switch backdropto [Underwater
3].
17) Pada bagian blok Control, tambahkan
blok stop [all]. Blok kode akan tampak
seperti pada gambar di samping.

Blok program
untuk sprite Apple.

Sumber: dokumen penerbit


 Blok kode Sprite Apple dan Strawberry
Sprite Strawberry memiliki gerakan yang sama dengan sprite Apple. Perbedaannya
hanyalah pada nilai Point yang ditambahkan dan suara yang digunakan ketika
bersentuhan dengan sprite Fish. Oleh karena itu, kita dapat menggunakan blok
program yang sama dan melakukan sedikit perubahan. Hal ini dapat dilakukan
dengan langkah-langkah sebagai berikut.
1) Pada sprite pane, pilih sprite Strawberry.
2) Pada tab Sounds, klik tombol Choose a Sound, dan pilih suara yang ingin
digunakan ketika bersentuhan dengan sprite Fish. Pada contoh ini, dipilih
Suction Cup.
3) Pada sprite pane, pilih sprite Apple.
4) Tampilkan blok kode untuk sprite Apple yang telah dibuat dengan cara
mengeklik tab Code.
 Blok kode Sprite Apple dan Strawberry
5) Pilih semua blok program yang ada, kemudian drag ke thumbnail dari sprite
Strawberry yang ada di sprite pane. Semua blok kode dari sprite Apple akan di-
copy ke sprite Strawberry.

Sumber: dokumen penerbit

Meng-copy blok kode dan menempatkannya di sprite yang lain.


 Blok kode Sprite Apple dan Strawberry
6) Lakukan perubahan yang
diperlukan sesuai dengan yang
sudah dijelaskan, di antaranya
nilai ketika bersentuhan dengan
sprite Fish dan suara yang
digunakan. Blok kode untuk
sprite Strawberry akan tampak
seperti gambar di samping.

Mengatur ulang
blok kode untuk
sprite Strawberry.
Sumber: dokumen penerbit
 Blok kode Sprite Crab dan Jellyfish
Pada game yang akan dibuat, sprite Crab dan Jellyfish merupakan tokoh jahat.
Jika keduanya bersentuhan dengan sprite Fish akan mengurangi nilai Health dari
Fish. Jika nilai Health sudah mencapai nol atau kurang, pemain dinyatakan kalah.
Meskipun merupakan tokoh yang berlawanan dengan sprite Apple dan
Strawberry, sprite Crab, dan Jellyfish mempunyai perilaku yang sama, yaitu
bergerak secara acak. Perbedaannya adalah jika sprite Fish menyentuh sprite
Crab, akan mengurangi nilai Health 15 dan sprite Jellyfish akan mengurangi nilai
Health 10. Jika nilai Health sudah nol atau kurang dari nol, pemain akan
dinyatakan kalah dengan cara menampilkan backdrop Underwater 1. Selain itu,
suara yang digunakan ketika bersentuhan dengan sprite Fish juga akan
dibedakan.
 Blok kode Sprite Crab dan Jellyfish
Kita dapat menambahkan blok program untuk Crab dan Jellyfish dengan cara
meng-copy blok program dari sprite Apple atau Strawberry, kemudian melakukan
perubahan yang diperlukan. Langkah-langkah untuk melakukannya adalah sebagai
berikut.

1) Pada sprite pane, pilih sprite Crab.


2) Pada tab Sounds, klik tombol Choose a Sound, dan pilih suara yang ingin
digunakan ketika bersentuhan dengan sprite Fish. Pada contoh ini dipilih Boing.
3) Tampilkan blok kode untuk sprite Apple yang sudah dibuat.
4) Pilih semua blok kode yang ada, kemudian drag ke thumbnail dari sprite Crab
yang ada di Sprite panes. Semua blok kode dari sprite Apple akan di-copy ke
sprite Crab.
 Blok kode Sprite Crab dan Jellyfish
Lakukan perubahan yang diperlukan, yaitu
pengurangan nilai Health ketika bersentuhan
dengan sprite Fish, suara yang digunakan
ketika bersentuhan dengan sprite Fish, dan
backdrop yang digunakan jika nilai sudah 0
atau kurang.
Untuk mengganti blok variabel Point yang
ada di dalam blok operator, kita harus
mengeluarkan blok Point tersebut terlebih
dahulu, kemudian ganti dengan blok Health.

Blok kode untuk


sprite Crab.
Sumber: dokumen penerbit
 Blok kode Sprite Crab dan Jellyfish
Kita perlu menambahkan blok kode untuk sprite Jellyfish. Hal tersebut dapat
dilakukan dengan cara yang sama dengan pengaturan sprite Crab, yaitu dengan
meng-copy blok kode dari sprite Crab, kemudian melakukan perubahan. Langkah-
langkah untuk melakukannya adalah sebagai berikut.

1) Pada sprite pane, pilih sprite Jellyfish.


2) Pada tab Sounds, klik tombol Choose a Sound dan pilih suara yang ingin
digunakan ketika bersentuhan dengan sprite Fish. Pada contoh ini, dipilih
Scream2.
3) Tampilkan blok kode untuk sprite Crab yang sudah dibuat.
4) Pilih semua blok kode yang ada, kemudian drag ke thumbnail dari sprite
Jellyfish yang ada di sprite pane. Semua blok kode dari sprite Crab akan di-copy
ke sprite Jellyfish.
 Blok kode Sprite Crab dan Jellyfish
Lakukan perubahan yang diperlukan, yaitu
pengurangan nilai Health ketika bersentuhan
dengan sprite Fish. Blok kode untuk sprite
Jellyfish akan tampak seperti pada gambar
disamping.

Blok kode untuk


sprite Jellyfish.
Sumber: dokumen penerbit
 Blok kode Sprite Crab dan Jellyfish
Jika tidak ada kesalahan, program game akan bekerja sesuai dengan skenario
yang sudah direncanakan. Untuk menjalankan program game yang dibuat,
dapat dilakukan dengan mengeklik tombol Go.

Sumber: dokumen penerbit

Tampilan program
game ketika
dijalankan.

Anda mungkin juga menyukai