BAB 6 - ALGORITMA PEMROGRAMAN OK.pptx

INFORMATIKA
MEDIA MENGAJAR
UNTUK SMP/MTs KELAS VII

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.
3) Klik file installer tersebut sehingga proses
instalasi akan dijalankan.
Proses instalasi Scratch sedang dijalankan
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.

 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.
 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

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

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
 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)
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.
 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.
 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.
 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.

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.
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.
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
Menambahkan sprite ke sprite pane

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.
Sprite yang sudah ditambahkan ke sprite pane.

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.
Mengatur sprite.

10) Pilihlah sprite Fish hasil duplikasi,
kemudian klik tombol Flip Horizontal
sehingga sprite Fish tersebut akan
diubah menjadi ke kiri.
Mengatur arah sprite Fish.

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

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.
Menambahkan blok kode untuk
tombol arah ke atas.

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.

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.

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.
Blok kode yang ditambahkan
ke script area.

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.

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.

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.

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.

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.

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.

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.

 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.

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.

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.

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.

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.

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.

BAB 6 - ALGORITMA PEMROGRAMAN OK.pptx

More Related Content

What's hot

Similar to BAB 6 - ALGORITMA PEMROGRAMAN OK.pptx

More from FardianFardian4

Recently uploaded

BAB 6 - ALGORITMA PEMROGRAMAN OK.pptx

Editor's Notes