SlideShare a Scribd company logo
INFORMATIKA
MEDIA MENGAJAR
UNTUK SMP/MTs KELAS VII
ALGORITME PEMROGRAMAN
Bab
6
Mengenal Konsep Pemrograman Visual
A
 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.
1. Konsep Pemrograman Visual
 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.
 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.
Tampilan Scratch versi online. Untuk memulai program, klik Start Creating.
Sumber:
dokumen
penerbit
2. Mengunduh (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
memilih direktori penyimpanan akan
ditampilkan. Pilih direktori penyimpanan dan
ikuti langkah langkah yang diminta. Tunggu
sampai proses download selesai.
Link untuk men-download installer Scratch.
Sumber: dokumen penerbit
Langkah-langkah untuk dengan menginstal aplikasi Scratch di komputer adalah
sebagai berikut.
1) Jalankan File Explorer yang
terdapat pada komputermu.
Membuka direktori penyimpanan dan
menampilkan file installer Scratch.
Sumber: dokumen penerbit
3) Klik file installer tersebut sehingga proses
instalasi akan dijalankan.
Proses instalasi Scratch sedang dijalankan
Sumber: dokumen penerbit
2) Bukalah direktori tempat installer
yang telah di-download ditempatkan.
4) Tunggu sampai proses instalasi selesai.
Setelah proses instalasi selesai, Scratch
secara otomatis akan dijalankan.
3. 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
Tombol
Stop
Pengatur
Jendela
Stage
Stage Pane
Sprite Pane
Script area
Menu bar
Tab bar
Tampilan jendela Scratch.
Sumber: dokumen penerbit
 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.
a. Menu Bar
 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.
b. Tombol Go dan Stop
Block palette
merupakan tempat
blok kode berada.
Sumber: dokumen penerbit
 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
melihat hasil blok kode ketika dijalankan.
c. Tombol Pengaturan Jendela
Sumber:
dokumen
penerbit
Tab backdrops.
 Tab Code atau block palette (palet
blok) terdiri atas blok-blok kode
yang dapat di-drag dan
ditempatkan di script area.
 Untuk membuat block palette tidak
terlalu besar dan mudah dalam
mengelola blok kode yang ada, blok
kode dibagi menjadi beberapa
kelompok.
 Masing-masing kelompok blok kode
dapat diakses secara cepat dengan
cara mengeklik tombol yang
terdapat di bagian kiri dari block
palette.
d. Tab Code atau Block Palette
 Tab Backdrops ditempatkan di tab bar dan
akan muncul jika kita memilih backdrop
yang ada di stage pane.
 Tab Backdrops digunakan untuk
menampilkan paint editor yang digunakan
mengatur gambar dari backdrop.
e. Tab Backdrops
Sumber: dokumen penerbit
Tab Costumes digunakan untuk mengatur
komposisi dari sprite.
 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.
f. Tab Costumes
Sumber: dokumen penerbit
Mengatur suara yang digunakan
dalam aplikasi Scratch.
 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
atau menggunakan file suara dari tempat lain.
 Sampai saat ini Scratch hanya dapat menerima suara
dalam format .mp3 dan .wav.
g. Tab Sounds
Script area, yaitu tempat untuk menyusun blok kode
Sumber: dokumen penerbit
 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.
h. Script Area
(a) (b)
Sumber: dokumen penerbit
Lokasi sprite pada stage
dengan tampilan (a) default
dan (b) setelah diubah
ukuran sumbu dan arahnya.
 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.
i. Stage
Sprite dan stage pane untuk memilih
karakter sprite dan backdrop.
Sumber: dokumen penerbit
 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.
 Pada bagian atas sprite pane terdapat informasi
tentang sprite yang dipilih.
 Stage pane digunakan untuk menampilkan daftar
backdrop (latar) yang digunakan di stage dan
memiliki tombol untuk menambahkan backdrop.
j. Sprite dan Stage Pane
4. Mengenal Berbagai Jenis Blok Diagram
 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.
(1) (2)
Blok kode pada blok Motion.
Sumber: dokumen penerbit
 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
atau y.
a. Blok Motion
(1) (2)
Blok kode pada blok Looks
Sumber:
dokumen
penerbit
 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.
b. Blok Looks
Sumber:
dokumen
penerbit
Blok kode pada
blok Events.
Sumber:
dokumen
penerbit
Blok kode pada
blok Sound.
 Blok Sound digunakan untuk menyimpan
blok kode yang mengatur suara yang
digunakan, seperti menjalankan dan
menghentikan suara, mengatur pitch
suara, mengatur volume, dan lainnya.
c. Blok Sound
 Blok Events digunakan untuk menyimpan
blok kode merespons kejadian-kejadian
yang ada. Contohnya, perintah untuk
merespons aksi dari pointer mouse, jika
tombol tertentu di keyboard ditekan,
dan sebagainya.
d. Blok Events
(1) (2)
Blok kode pada
blok Control.
Sumber:
dokumen
penerbit
 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.
e. Blok Control
Sumber:
dokumen
penerbit
Blok kode pada
blok Sensing.
Blok kode pada
blok Operators.
(1)
(2)
Sumber:
dokumen
penerbit
 Blok Sensing digunakan untuk
menyimpan blok kode untuk men-trigger
dijalankannya blok kode yang lain, seperti
pengaturan jika sprite menyentuh objek
lain, warna lain, atau berada pada posisi
dengan jarak tertentu, dan sebagainya.
f. Blok Sensing
 Blok Operators digunakan untuk
menyimpan blok kode dalam menjalankan
operasi tertentu atau sebagai operator
dalam mengecek kondisi tertentu.
g. Blok Operators
Blok kode pada
blok Variables.
Sumber: dokumen penerbit
 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.
h. Blok Variables
Menggunakan Aplikasi Pemrograman Visual
B
1. Variabel dan Tipe Data
 Ketika bekerja membuat program, baik program yang berupa game, cerita, ataupun
penghitungan, sering kali program perlu untuk membaca nilai, menggunakan nilai
dalam penghitungan, dan menampilkan hasil penghitungan kepada pengguna.
 Nilai-nilai perlu disimpan dalam suatu objek yang disebut variabel. Variabel
digunakan untuk menyimpan suatu nilai dan besar nilai tersebut dapat berubah-
ubah.
 Dalam program, nilai variabel tidak harus berupa angka, tetapi dapat berupa
teks/istilah atau berupa Yes/True dan No/False, sehingga variabel mempunyai tipe
data untuk menentukan nilai yang dapat disimpan oleh variabel tersebut.
Terdapat tiga tipe data untuk variabel-variabel pada pemrograman visual Scratch:
Untuk menyimpan nilai yang berupa True atau False, yang digunakan untuk menyimpan
nilai dari suatu pengujian kondisi. Misalnya, kita mempunyai variabel StatusMenang,
maka dapat dibuat logika program dengan StatusMenang adalah True jika Nilai lebih
besar dari atau sama dengan 100, dan berlaku sebaliknya.
Tipe data boolean
Untuk menyimpan nilai berupa bilangan
atau angka. Ketika membuat program
yang berupa penghitungan di Scratch,
kamu perlu menggunakan variabel untuk
menyimpan nilai yang akan digunakan
dalam penghitungan matematika.
Tipe data numerik
Untuk menyimpan nilai yang berupa
teks. Misalnya, menyimpan pesan yang
ingin disampaikan kepada pengguna,
seperti pesan "Anda Menang" atau
"Anda Kalah.
Tipe data teks atau string
1) Pada tab Code, klik blok Variables sehingga blok perintah
yang ada di blok Variables akan ditampilkan.
2) Klik tombol Make a Variable. Kotak dialog New Variable akan
ditampilkan.
3) Beri nama untuk variabel tersebut. Selanjutnya, pilih apakah
variabel ingin digunakan pada semua sprite (For all sprites)
atau untuk satu sprite tertentu (For this sprite only).
4) Klik tombol OK. Variabel baru akan ditambahkan ke blok
perintah di blok Variables.
Contoh: variabel untuk menyimpan nilai di game diberi nama
’Nilai’, sedangkan variabel untuk menyimpan status game
diberi nama ’StatusGame’.
Langkah-langkah pembuatan dan pemberian nama variabel
adalah sebagai berikut.
Sumber:
dokumen
penerbit
Variabel yang ditambahkan
dan blok perintah yang ada
di blok Variables.
 Pada program Scratch, akan dibuat program untuk menghitung jarak
kedua titik yang terdapat di koordinat kartesius.
 Pengguna akan menginput koordinat titik pertama dan kedua,
sedangkan program akan menghitung jarak pada kedua titik dan
menampilkan hasil penghitungan kepada pengguna.
2. Menggunakan Variabel di Dalam Program
 X1 untuk menyimpan nilai dari titik 1
 Y1 untuk menyimpan nilai Y dari titik 1
 X2 untuk menyimpan nilai X dari titik 2
 Y2 untuk menyimpan nilai Y dari titik 2.
 JarakX dan JarakY untuk menyimpan nilai jarak dalam arah sumbu X
dan Y dari kedua titik
 Jarak untuk menyimpan dan menampilkan jarak dari kedua titik.
Variabel yang digunakan:
Sumber:
dokumen
penerbit
Algoritme untuk
program menghitung
jarak dua titik
Langkah-langkah untuk membuat program sesuai konsep
tersebut:
1) Jalankan Scratch dan buatlah proyek baru.
2) Tambahkan variabel X1, Y1, X2, Y2, JarakX, JarakY, dan
Jarak yang akan ditampilkan di stage pada blok
Variables.
3) Susun letak variabel-variabel tersebut.
4) Pada blok Events, tambahkan blok perintah ’When click’
ke blok Code untuk mengatur cara menjalankan
program.
5) Agar variabel JarakX dan JarakY tidak ditampilkan di
stage, tambahkan dua perintah hide variable pada blok
Variables untuk menyembunyikan variabel JarakX dan
JarakY. Variabel juga dapat disembunyikan dengan cara
menghilangkan tanda cek pada kotak cek yang ada di
variabel yang bersangkutan.
Sumber:
dokumen
penerbit
Tampilan stage dengan variabel
Blok perintah untuk
menyembunyikan variabel.
6) Untuk meminta input dari pengguna, tambahkan
perintah ’ask – and wait’ pada blok Sensing.
7) Untuk menyimpan input dari pengguna ke variabel X1
yang disediakan, tambahkan blok perintah set –1 to dan
tambahkan blok perintah ’answer’ ke blok perintah
tersebut.
8) Dengan cara yang sama, gunakan blok perintah yang
sama untuk meminta dan menangkap nilai input untuk
variabel Y1, X2, dan Y2.
9) Pada blok Variables dan Operator, tambahkan blok
perintah untuk menghitung nilai dari variabel JarakX,
JarakY, dan Jarak. Untuk menghitung akar, gunakan blok
perintah fungsi ’sqrt’ yang terdapat di blok Operator.
10) Untuk menampilkan hasil penghitungan kepada
pengguna, tambahkan perintah ’say – for – second’ dan
perintah ’say’ dari blok Looks.
11) Jalankan program dan berikan input.
12) Simpan program yang telah dibuat.
Sumber:
dokumen
penerbit
Blok program
3. Membuat Program Game
 Sebelum membuat game, perlu diatur skenario game dan aturan-aturan yang berlaku.
 Pembuatan game dilakukan dengan beberapa tahapan, yaitu menyiapkan latar belakang
stage atau biasa disebut backdrop, mengatur tampilan sprite, dan menambahkan blok kode.
 Seekor ikan akan mencari makanan berupa apel dan stroberi. Pada saat yang sama, ikan harus
menghindari serangan dari kepiting dan ubur-ubur. Setiap makanan yang diperoleh akan
menambah 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.
 Apel, stroberi, kepiting, dan ubur-ubur akan bergerak secara acak, sedangkan ikan akan bergerak
mengikuti tombol arah pada keyboard yang ditekan pemain.
Skenario game Life Underwater
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 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.
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.
a. Menyiapkan Backdrop
Sumber:
dokumen
penerbit
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.
5) Pilih backdrop Underwater 3, kemudian tambahkan teks "Congratulation YOU
WIN!". Kemudian, atur jenis huruf, ukuran, dan warna teks sesuai dengan yang
diinginkan.
Langkah-langkah membuat backdrop adalah sebagai berikut.
Sumber: dokumen penerbit
Menambahkan teks
untuk pesan menang ke
backdrop.
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.
Pada game ini kita akan menggunakan lima sprite, yaitu Fish, Crab, Jellyfish, Strawberry,
dan Apple.
b. Menyiapkan Sprite
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
Costumes dan klik perintah Duplicate Sprite
Fish akan diduplikasi menjadi dua.
Sumber: dokumen penerbit
Mengatur sprite.
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
sehingga sprite berperilaku sesuai
yang diinginkan.
Sumber:
dokumen
penerbit
Tampilan sprite di stage setelah pengaturan
ukuran sprite.
 Blok kode Sprite Fish
1) Aktifkan tab Code, kemudian pilihlah sprite
Fish pada sprite pane.
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.
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.
c. Menambahkan Blok Kode
Sumber:
dokumen
penerbit
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
tampak seperti pada gambar
disamping.
Sumber: dokumen penerbit
Menambahkan blok kode untuk
tombol arah ke atas.
 Blok kode Sprite Fish
7) Jika tombol arah ke atas ditekan, kita
ingin agar sprite Fish bergerak ke atas
sebesar 10 satuan koordinat. Oleh
karena itu, dari blok Motion,
tambahkan blok change y by 10.
8) Selanjutnya, dengan cara yang sama,
tambahkan blok kode untuk tombol
[down arrow].
Sumber:
dokumen
penerbit
Menambahkan blok kode untuk
tombol arah ke bawah.
Sumber:
dokumen
penerbit
Mengatur blok kode untuk tombol arah ke atas.
 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.
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.
Sumber:
dokumen
penerbit
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.
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.
Sumber:
dokumen
penerbit
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
[1] secs to [random position]. Blok ini bertujuan
untuk mengatur sprite Apple agar bergerak terus
ke posisi acak.
Sumber: dokumen penerbit
Blok kode yang ditambahkan
ke script area.
 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.
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].
Sumber:
dokumen
penerbit
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
pada gambar di samping.
15) Pada bagian blok Variables, tambahkan
blok Point ke dalam blok Operator lebih
besar dan ganti 50 menjadi 99.
Sumber:
dokumen
penerbit
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.
Sumber: dokumen penerbit
Blok program
untuk sprite Apple.
 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.
Sumber: dokumen penerbit
Mengatur ulang
blok kode untuk
sprite Strawberry.
 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.
Sumber: dokumen penerbit
Blok kode untuk
sprite Crab.
 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.

More Related Content

PPTX
Belajar Pemrograman Scratch Part 1
PPTX
mari belajar ALGORITMA SPENDU TOP SCHOOL.pptx
PPTX
Pengenalan-aplikasi Scratch untuk fase D SMP
PDF
Pengenalan dan Pelatihan Scratch.pdf
PPTX
Pengenalan Software Pemprograman Visual Scratch
PPTX
PENGENALAN SOFTWARE PEMROGRAMAN VISUAL SCRATCH
PPTX
Pengenalan Software Pemrograman Visual Scratch.pptx
PPTX
Pengenalan-Scratch untuk pemula dan beginner.pptx
Belajar Pemrograman Scratch Part 1
mari belajar ALGORITMA SPENDU TOP SCHOOL.pptx
Pengenalan-aplikasi Scratch untuk fase D SMP
Pengenalan dan Pelatihan Scratch.pdf
Pengenalan Software Pemprograman Visual Scratch
PENGENALAN SOFTWARE PEMROGRAMAN VISUAL SCRATCH
Pengenalan Software Pemrograman Visual Scratch.pptx
Pengenalan-Scratch untuk pemula dan beginner.pptx

Similar to BAB 6 - ALGORITMA PEMROGRAMAN OK mata pelajaran informatika (20)

PPTX
Pengenalan pemrograman Scratch untuk anak SD
PPTX
Materi Algoritma Pemrograman kelas 7 fase D
PPTX
Belajar Scratch aaaaaaaaaaaaaaaaaaaa.pptx
PDF
Ayo Mengenal Scratch.pdf
PDF
Scratch 2
PDF
Algoritma dan Pemrograman Aplikasi Scratch
PPTX
Perkenalan Scratch untuk anak Sekolah Dasar
PPTX
Part 3.pptx
PPTX
pemprograman coding melalui scratch pada website
PPTX
Tutorial_Interaktif_Scratch koding .pptx
PDF
Scratch
PPTX
1. pengenalan scratch
PPTX
1. pengenalan scratch
PPTX
MATERI SCRACTH cscsbcsbsbcssbbsbs shscbscbs c
PPTX
Blok Kode scratch Pemula Kelas Tujuhpptx
PPTX
Greeting Extra Coding Sratch SD.pptx
PDF
MODUL-PENGENALAN-SCRATCH-PROGRAMMING.pdf
PDF
Modul pelatihan coding scratch level 1
PDF
Pemrograman Visual Blok lanjutan Kelas 12
PDF
Modul pelatihan coding scratch level 1
Pengenalan pemrograman Scratch untuk anak SD
Materi Algoritma Pemrograman kelas 7 fase D
Belajar Scratch aaaaaaaaaaaaaaaaaaaa.pptx
Ayo Mengenal Scratch.pdf
Scratch 2
Algoritma dan Pemrograman Aplikasi Scratch
Perkenalan Scratch untuk anak Sekolah Dasar
Part 3.pptx
pemprograman coding melalui scratch pada website
Tutorial_Interaktif_Scratch koding .pptx
Scratch
1. pengenalan scratch
1. pengenalan scratch
MATERI SCRACTH cscsbcsbsbcssbbsbs shscbscbs c
Blok Kode scratch Pemula Kelas Tujuhpptx
Greeting Extra Coding Sratch SD.pptx
MODUL-PENGENALAN-SCRATCH-PROGRAMMING.pdf
Modul pelatihan coding scratch level 1
Pemrograman Visual Blok lanjutan Kelas 12
Modul pelatihan coding scratch level 1
Ad

Recently uploaded (20)

PPTX
Modul 1. Pengenalan Koding-KA di Dikdasmen.pptx
DOCX
Modul Ajar Deep Learning PJOK Kelas 10 SMA Terbaru 2025
DOCX
Lembar Kerja Mahasiswa Information System
PDF
lembar kerja LMS tugas pembelajaran mendalam
DOCX
Modul Ajar Deep Learning PAI & BP Kelas 12 SMA Terbaru 2025
DOCX
Modul Ajar Deep Learning PKWU Rekayasa Kelas 12 SMA Terbaru 2025
PDF
SMASA....................................pdf
PDF
ANALISIS SOALAN BAHASA MELAYU SPM 2021-2024 (1).pdf
PPTX
Modul 2. Berpikir Komputasional sebagai Dasar Koding untuk Kecerdasan Artifis...
PPT
SEJARAH kelas 12 SEMESTER SATU DAN DUA.ppt
PPTX
MATERI MPLS TENTANG KURIKULUM DAN KEGIATAN PEMBELAJARAN
DOCX
Modul Ajar Deep Learning PKN Kelas 10 SMA Terbaru 2025
PPTX
1. Bahan Bacaan Pola Pikir Bertumbuh.pptx
PPTX
Presentasi Al-Quran Hadits Kelompok XI.1
DOCX
Modul Ajar Deep Learning Bahasa Inggris Lanjutan Kelas 11 SMA Terbaru 2025
DOCX
Modul Ajar Deep Learning Prakarya Budidaya Kelas 12 SMA Terbaru 2025
PDF
Presentasi Aplikasi Persiapan ANBK 2025.pdf
PPTX
PPT Kurikulum Berbasis Cinta tahun 2025.
PPTX
Konsep & Strategi Penyusunan HPS _Pelatihan "Ketentuan TERBARU Pengadaan" (...
PPT
MATERI ALL Biologi 10 LENGKAP SEKALI TINGGAL DI GUNAKAN
Modul 1. Pengenalan Koding-KA di Dikdasmen.pptx
Modul Ajar Deep Learning PJOK Kelas 10 SMA Terbaru 2025
Lembar Kerja Mahasiswa Information System
lembar kerja LMS tugas pembelajaran mendalam
Modul Ajar Deep Learning PAI & BP Kelas 12 SMA Terbaru 2025
Modul Ajar Deep Learning PKWU Rekayasa Kelas 12 SMA Terbaru 2025
SMASA....................................pdf
ANALISIS SOALAN BAHASA MELAYU SPM 2021-2024 (1).pdf
Modul 2. Berpikir Komputasional sebagai Dasar Koding untuk Kecerdasan Artifis...
SEJARAH kelas 12 SEMESTER SATU DAN DUA.ppt
MATERI MPLS TENTANG KURIKULUM DAN KEGIATAN PEMBELAJARAN
Modul Ajar Deep Learning PKN Kelas 10 SMA Terbaru 2025
1. Bahan Bacaan Pola Pikir Bertumbuh.pptx
Presentasi Al-Quran Hadits Kelompok XI.1
Modul Ajar Deep Learning Bahasa Inggris Lanjutan Kelas 11 SMA Terbaru 2025
Modul Ajar Deep Learning Prakarya Budidaya Kelas 12 SMA Terbaru 2025
Presentasi Aplikasi Persiapan ANBK 2025.pdf
PPT Kurikulum Berbasis Cinta tahun 2025.
Konsep & Strategi Penyusunan HPS _Pelatihan "Ketentuan TERBARU Pengadaan" (...
MATERI ALL Biologi 10 LENGKAP SEKALI TINGGAL DI GUNAKAN
Ad

BAB 6 - ALGORITMA PEMROGRAMAN OK mata pelajaran informatika

  • 3. Mengenal Konsep Pemrograman Visual A  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. 1. Konsep Pemrograman Visual
  • 4.  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.
  • 5.  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. Tampilan Scratch versi online. Untuk memulai program, klik Start Creating. Sumber: dokumen penerbit 2. Mengunduh (download) dan Menginstal Scratch
  • 6.  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 memilih direktori penyimpanan akan ditampilkan. Pilih direktori penyimpanan dan ikuti langkah langkah yang diminta. Tunggu sampai proses download selesai. Link untuk men-download installer Scratch. Sumber: dokumen penerbit
  • 7. Langkah-langkah untuk dengan menginstal aplikasi Scratch di komputer adalah sebagai berikut. 1) Jalankan File Explorer yang terdapat pada komputermu. Membuka direktori penyimpanan dan menampilkan file installer Scratch. Sumber: dokumen penerbit 3) Klik file installer tersebut sehingga proses instalasi akan dijalankan. Proses instalasi Scratch sedang dijalankan Sumber: dokumen penerbit 2) Bukalah direktori tempat installer yang telah di-download ditempatkan. 4) Tunggu sampai proses instalasi selesai. Setelah proses instalasi selesai, Scratch secara otomatis akan dijalankan.
  • 8. 3. 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.
  • 9. Tombol Go Tombol Stop Pengatur Jendela Stage Stage Pane Sprite Pane Script area Menu bar Tab bar Tampilan jendela Scratch. Sumber: dokumen penerbit
  • 10.  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. a. Menu Bar  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. b. Tombol Go dan Stop
  • 11. Block palette merupakan tempat blok kode berada. Sumber: dokumen penerbit  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 melihat hasil blok kode ketika dijalankan. c. Tombol Pengaturan Jendela
  • 12. Sumber: dokumen penerbit Tab backdrops.  Tab Code atau block palette (palet blok) terdiri atas blok-blok kode yang dapat di-drag dan ditempatkan di script area.  Untuk membuat block palette tidak terlalu besar dan mudah dalam mengelola blok kode yang ada, blok kode dibagi menjadi beberapa kelompok.  Masing-masing kelompok blok kode dapat diakses secara cepat dengan cara mengeklik tombol yang terdapat di bagian kiri dari block palette. d. Tab Code atau Block Palette  Tab Backdrops ditempatkan di tab bar dan akan muncul jika kita memilih backdrop yang ada di stage pane.  Tab Backdrops digunakan untuk menampilkan paint editor yang digunakan mengatur gambar dari backdrop. e. Tab Backdrops
  • 13. Sumber: dokumen penerbit Tab Costumes digunakan untuk mengatur komposisi dari sprite.  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. f. Tab Costumes
  • 14. Sumber: dokumen penerbit Mengatur suara yang digunakan dalam aplikasi Scratch.  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 atau menggunakan file suara dari tempat lain.  Sampai saat ini Scratch hanya dapat menerima suara dalam format .mp3 dan .wav. g. Tab Sounds
  • 15. Script area, yaitu tempat untuk menyusun blok kode Sumber: dokumen penerbit  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. h. Script Area
  • 16. (a) (b) Sumber: dokumen penerbit Lokasi sprite pada stage dengan tampilan (a) default dan (b) setelah diubah ukuran sumbu dan arahnya.  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. i. Stage
  • 17. Sprite dan stage pane untuk memilih karakter sprite dan backdrop. Sumber: dokumen penerbit  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.  Pada bagian atas sprite pane terdapat informasi tentang sprite yang dipilih.  Stage pane digunakan untuk menampilkan daftar backdrop (latar) yang digunakan di stage dan memiliki tombol untuk menambahkan backdrop. j. Sprite dan Stage Pane
  • 18. 4. Mengenal Berbagai Jenis Blok Diagram  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.
  • 19. (1) (2) Blok kode pada blok Motion. Sumber: dokumen penerbit  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 atau y. a. Blok Motion
  • 20. (1) (2) Blok kode pada blok Looks Sumber: dokumen penerbit  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. b. Blok Looks
  • 21. Sumber: dokumen penerbit Blok kode pada blok Events. Sumber: dokumen penerbit Blok kode pada blok Sound.  Blok Sound digunakan untuk menyimpan blok kode yang mengatur suara yang digunakan, seperti menjalankan dan menghentikan suara, mengatur pitch suara, mengatur volume, dan lainnya. c. Blok Sound  Blok Events digunakan untuk menyimpan blok kode merespons kejadian-kejadian yang ada. Contohnya, perintah untuk merespons aksi dari pointer mouse, jika tombol tertentu di keyboard ditekan, dan sebagainya. d. Blok Events
  • 22. (1) (2) Blok kode pada blok Control. Sumber: dokumen penerbit  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. e. Blok Control
  • 23. Sumber: dokumen penerbit Blok kode pada blok Sensing. Blok kode pada blok Operators. (1) (2) Sumber: dokumen penerbit  Blok Sensing digunakan untuk menyimpan blok kode untuk men-trigger dijalankannya blok kode yang lain, seperti pengaturan jika sprite menyentuh objek lain, warna lain, atau berada pada posisi dengan jarak tertentu, dan sebagainya. f. Blok Sensing  Blok Operators digunakan untuk menyimpan blok kode dalam menjalankan operasi tertentu atau sebagai operator dalam mengecek kondisi tertentu. g. Blok Operators
  • 24. Blok kode pada blok Variables. Sumber: dokumen penerbit  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. h. Blok Variables
  • 25. Menggunakan Aplikasi Pemrograman Visual B 1. Variabel dan Tipe Data  Ketika bekerja membuat program, baik program yang berupa game, cerita, ataupun penghitungan, sering kali program perlu untuk membaca nilai, menggunakan nilai dalam penghitungan, dan menampilkan hasil penghitungan kepada pengguna.  Nilai-nilai perlu disimpan dalam suatu objek yang disebut variabel. Variabel digunakan untuk menyimpan suatu nilai dan besar nilai tersebut dapat berubah- ubah.  Dalam program, nilai variabel tidak harus berupa angka, tetapi dapat berupa teks/istilah atau berupa Yes/True dan No/False, sehingga variabel mempunyai tipe data untuk menentukan nilai yang dapat disimpan oleh variabel tersebut.
  • 26. Terdapat tiga tipe data untuk variabel-variabel pada pemrograman visual Scratch: Untuk menyimpan nilai yang berupa True atau False, yang digunakan untuk menyimpan nilai dari suatu pengujian kondisi. Misalnya, kita mempunyai variabel StatusMenang, maka dapat dibuat logika program dengan StatusMenang adalah True jika Nilai lebih besar dari atau sama dengan 100, dan berlaku sebaliknya. Tipe data boolean Untuk menyimpan nilai berupa bilangan atau angka. Ketika membuat program yang berupa penghitungan di Scratch, kamu perlu menggunakan variabel untuk menyimpan nilai yang akan digunakan dalam penghitungan matematika. Tipe data numerik Untuk menyimpan nilai yang berupa teks. Misalnya, menyimpan pesan yang ingin disampaikan kepada pengguna, seperti pesan "Anda Menang" atau "Anda Kalah. Tipe data teks atau string
  • 27. 1) Pada tab Code, klik blok Variables sehingga blok perintah yang ada di blok Variables akan ditampilkan. 2) Klik tombol Make a Variable. Kotak dialog New Variable akan ditampilkan. 3) Beri nama untuk variabel tersebut. Selanjutnya, pilih apakah variabel ingin digunakan pada semua sprite (For all sprites) atau untuk satu sprite tertentu (For this sprite only). 4) Klik tombol OK. Variabel baru akan ditambahkan ke blok perintah di blok Variables. Contoh: variabel untuk menyimpan nilai di game diberi nama ’Nilai’, sedangkan variabel untuk menyimpan status game diberi nama ’StatusGame’. Langkah-langkah pembuatan dan pemberian nama variabel adalah sebagai berikut. Sumber: dokumen penerbit Variabel yang ditambahkan dan blok perintah yang ada di blok Variables.
  • 28.  Pada program Scratch, akan dibuat program untuk menghitung jarak kedua titik yang terdapat di koordinat kartesius.  Pengguna akan menginput koordinat titik pertama dan kedua, sedangkan program akan menghitung jarak pada kedua titik dan menampilkan hasil penghitungan kepada pengguna. 2. Menggunakan Variabel di Dalam Program  X1 untuk menyimpan nilai dari titik 1  Y1 untuk menyimpan nilai Y dari titik 1  X2 untuk menyimpan nilai X dari titik 2  Y2 untuk menyimpan nilai Y dari titik 2.  JarakX dan JarakY untuk menyimpan nilai jarak dalam arah sumbu X dan Y dari kedua titik  Jarak untuk menyimpan dan menampilkan jarak dari kedua titik. Variabel yang digunakan: Sumber: dokumen penerbit Algoritme untuk program menghitung jarak dua titik
  • 29. Langkah-langkah untuk membuat program sesuai konsep tersebut: 1) Jalankan Scratch dan buatlah proyek baru. 2) Tambahkan variabel X1, Y1, X2, Y2, JarakX, JarakY, dan Jarak yang akan ditampilkan di stage pada blok Variables. 3) Susun letak variabel-variabel tersebut. 4) Pada blok Events, tambahkan blok perintah ’When click’ ke blok Code untuk mengatur cara menjalankan program. 5) Agar variabel JarakX dan JarakY tidak ditampilkan di stage, tambahkan dua perintah hide variable pada blok Variables untuk menyembunyikan variabel JarakX dan JarakY. Variabel juga dapat disembunyikan dengan cara menghilangkan tanda cek pada kotak cek yang ada di variabel yang bersangkutan. Sumber: dokumen penerbit Tampilan stage dengan variabel Blok perintah untuk menyembunyikan variabel.
  • 30. 6) Untuk meminta input dari pengguna, tambahkan perintah ’ask – and wait’ pada blok Sensing. 7) Untuk menyimpan input dari pengguna ke variabel X1 yang disediakan, tambahkan blok perintah set –1 to dan tambahkan blok perintah ’answer’ ke blok perintah tersebut. 8) Dengan cara yang sama, gunakan blok perintah yang sama untuk meminta dan menangkap nilai input untuk variabel Y1, X2, dan Y2. 9) Pada blok Variables dan Operator, tambahkan blok perintah untuk menghitung nilai dari variabel JarakX, JarakY, dan Jarak. Untuk menghitung akar, gunakan blok perintah fungsi ’sqrt’ yang terdapat di blok Operator. 10) Untuk menampilkan hasil penghitungan kepada pengguna, tambahkan perintah ’say – for – second’ dan perintah ’say’ dari blok Looks. 11) Jalankan program dan berikan input. 12) Simpan program yang telah dibuat. Sumber: dokumen penerbit Blok program
  • 31. 3. Membuat Program Game  Sebelum membuat game, perlu diatur skenario game dan aturan-aturan yang berlaku.  Pembuatan game dilakukan dengan beberapa tahapan, yaitu menyiapkan latar belakang stage atau biasa disebut backdrop, mengatur tampilan sprite, dan menambahkan blok kode.  Seekor ikan akan mencari makanan berupa apel dan stroberi. Pada saat yang sama, ikan harus menghindari serangan dari kepiting dan ubur-ubur. Setiap makanan yang diperoleh akan menambah 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.  Apel, stroberi, kepiting, dan ubur-ubur akan bergerak secara acak, sedangkan ikan akan bergerak mengikuti tombol arah pada keyboard yang ditekan pemain. Skenario game Life Underwater
  • 32. 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 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. 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. a. Menyiapkan Backdrop Sumber: dokumen penerbit Backdrop yang sudah ditambahkan ke stage pane.
  • 33. 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.
  • 34. 5) Pilih backdrop Underwater 3, kemudian tambahkan teks "Congratulation YOU WIN!". Kemudian, atur jenis huruf, ukuran, dan warna teks sesuai dengan yang diinginkan. Langkah-langkah membuat backdrop adalah sebagai berikut. Sumber: dokumen penerbit Menambahkan teks untuk pesan menang ke backdrop.
  • 35. 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. Pada game ini kita akan menggunakan lima sprite, yaitu Fish, Crab, Jellyfish, Strawberry, dan Apple. b. Menyiapkan Sprite Sumber: dokumen penerbit Menambahkan sprite ke sprite pane
  • 36. 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.
  • 37. 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 Costumes dan klik perintah Duplicate Sprite Fish akan diduplikasi menjadi dua. Sumber: dokumen penerbit Mengatur sprite.
  • 38. 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.
  • 39. 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 sehingga sprite berperilaku sesuai yang diinginkan. Sumber: dokumen penerbit Tampilan sprite di stage setelah pengaturan ukuran sprite.
  • 40.  Blok kode Sprite Fish 1) Aktifkan tab Code, kemudian pilihlah sprite Fish pada sprite pane. 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. 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. c. Menambahkan Blok Kode Sumber: dokumen penerbit Blok kode yang sudah ditambahkan
  • 41.  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 tampak seperti pada gambar disamping. Sumber: dokumen penerbit Menambahkan blok kode untuk tombol arah ke atas.
  • 42.  Blok kode Sprite Fish 7) Jika tombol arah ke atas ditekan, kita ingin agar sprite Fish bergerak ke atas sebesar 10 satuan koordinat. Oleh karena itu, dari blok Motion, tambahkan blok change y by 10. 8) Selanjutnya, dengan cara yang sama, tambahkan blok kode untuk tombol [down arrow]. Sumber: dokumen penerbit Menambahkan blok kode untuk tombol arah ke bawah. Sumber: dokumen penerbit Mengatur blok kode untuk tombol arah ke atas.
  • 43.  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. 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. Sumber: dokumen penerbit Blok kode untuk sprite Fish
  • 44.  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. 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. Sumber: dokumen penerbit Menambahkan variabel.
  • 45.  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.
  • 46.  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.
  • 47.  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 [1] secs to [random position]. Blok ini bertujuan untuk mengatur sprite Apple agar bergerak terus ke posisi acak. Sumber: dokumen penerbit Blok kode yang ditambahkan ke script area.
  • 48.  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. 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]. Sumber: dokumen penerbit Blok kode yang sudah ditambahkan ke script area.
  • 49.  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.
  • 50.  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 pada gambar di samping. 15) Pada bagian blok Variables, tambahkan blok Point ke dalam blok Operator lebih besar dan ganti 50 menjadi 99. Sumber: dokumen penerbit Menambahkan blok operator di dalam blok kondisi If-then.
  • 51.  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. Sumber: dokumen penerbit Blok program untuk sprite Apple.
  • 52.  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.
  • 53.  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.
  • 54.  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. Sumber: dokumen penerbit Mengatur ulang blok kode untuk sprite Strawberry.
  • 55.  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.
  • 56.  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.
  • 57.  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. Sumber: dokumen penerbit Blok kode untuk sprite Crab.
  • 58.  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.
  • 59.  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
  • 60.  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.

Editor's Notes

  • #4: Font CALIBRI semua.
  • #5: Font CALIBRI semua.
  • #6: Font CALIBRI semua.
  • #7: Font CALIBRI semua.
  • #9: Font CALIBRI semua.
  • #19: Font CALIBRI semua.
  • #32: Font CALIBRI semua.
  • #33: Font CALIBRI semua.
  • #36: Font CALIBRI semua.
  • #41: Font CALIBRI semua.