Font size
S
M
L
XL
WorksheetsBank Soal MPP - XI RPL
Total questions: 80
Worksheet time: 50mins
Name
Class
Date
1.
Apa yang dimaksud dengan HTML5 Canvas?
a)
Elemen HTML yang menyediakan area gambar yang dapat dimanipulasi dengan JavaScript
b)
Framework JavaScript untuk membuat aplikasi web
c)
Library CSS untuk styling halaman web
d)
Plugin browser untuk menjalankan aplikasi multimedia
e)
Tool untuk membuat animasi CSS
2.
Tag HTML manakah yang digunakan untuk membuat Canvas?
a)
<draw>
b)
<graphic>
c)
<canvas>
d)
<paint>
e)
<sketch>
3.
Apa peran utama JavaScript dalam pengembangan game berbasis HTML5 Canvas?
a)
Memberikan styling visual pada elemen game
b)
Mengontrol logika game, animasi, dan interaksi pengguna
c)
Menyediakan struktur layout halaman web
d)
Mengatur database untuk menyimpan skor
e)
Menangani keamanan aplikasi web
4.
Apa perbedaan utama antara HTML5 Canvas dengan SVG dalam konteks pembuatan game?
a)
Canvas menggunakan vector, SVG menggunakan bitmap
b)
Canvas lebih lambat dari SVG dalam rendering
c)
SVG lebih cocok untuk animasi kompleks
d)
Canvas berbasis pixel dan lebih cocok untuk game real-time
e)
SVG memiliki interaktivitas yang lebih baik
5.
Method Canvas API yang digunakan untuk menggambar persegi terisi adalah?
a)
fillRect()
b)
drawRect()
c)
createRect()
d)
makeRect()
e)
paintRect()
6.
Kode yang benar untuk menggambar lingkaran penuh pada Canvas adalah?
a)
ctx.circle(50, 50, 25)
b)
ctx.arc(50, 50, 25, 0, 2 * Math.PI)
c)
ctx.round(50, 50, 25)
d)
ctx.drawCircle(50, 50, 25)
e)
ctx.fillCircle(50, 50, 25)
7.
Nilai manakah yang TIDAK valid untuk property fillStyle pada Canvas?
a)
"red"
b)
"#FF0000"
c)
"gradient(red, blue)"
d)
"rgb(255, 0, 0)"
e)
"rgba(255, 0, 0, 0.5)"
8.
Manakah function yang paling efisien untuk membuat smooth animation pada Canvas?
a)
requestAnimationFrame()
b)
setTimeout()
c)
setInterval()
d)
for loop
e)
while loop
9.
Method yang digunakan untuk membersihkan area Canvas adalah?
a)
cleanCanvas()
b)
clearRect()
c)
removeCanvas()
d)
resetCanvas()
e)
clearCanvas()
10.
Apa fungsi dari getContext('2d') pada Canvas?
a)
Mengatur ukuran Canvas
b)
Membuat elemen Canvas baru
c)
Mengatur warna background Canvas
d)
Mendapatkan objek untuk menggambar pada Canvas
e)
Menghapus konten Canvas
11.
Kondisi yang benar untuk mendeteksi collision antara dua rectangle adalah?
a)
obj1.x == obj2.x && obj1.y == obj2.y
b)
obj1.x + obj1.width > obj2.x
c)
obj1.x < obj2.x + obj2.width && obj1.x + obj1.width > obj2.x && obj1.y < obj2.y + obj2.height && obj1.y + obj1.height > obj2.y
d)
Math.abs(obj1.x - obj2.x) < 10
e)
obj1.width == obj2.width
12.
Event listener yang tepat untuk menangani input keyboard adalah?
a)
document.addEventListener('keydown', function(e) {...})
b)
canvas.addEventListener('click', function(e) {...})
c)
window.addEventListener('load', function(e) {...})
d)
document.addEventListener('mousemove', function(e) {...})
e)
canvas.addEventListener('resize', function(e) {...})
13.
Cara terbaik untuk menampilkan skor pada Canvas adalah?
a)
Menggunakan alert() setiap kali skor berubah
b)
Menggunakan ctx.fillText() pada setiap frame update
c)
Menggunakan console.log() untuk debugging
d)
Menggunakan innerHTML pada elemen Canvas
e)
Menggunakan confirm() untuk konfirmasi skor
14.
Langkah yang benar untuk memuat gambar ke Canvas adalah?
a)
Langsung menggunakan ctx.drawImage() dengan path file
b)
Menggunakan fetch() API untuk mengambil gambar
c)
Menggunakan XMLHttpRequest untuk load gambar
d)
Membuat objek Image, set src, tunggu onload, lalu drawImage()
e)
Menggunakan CSS background-image pada Canvas
15.
Parameter yang diperlukan untuk mengambil sprite tertentu dari sprite sheet adalah?
a)
Hanya posisi x dan y sprite
b)
Hanya ukuran width dan height sprite
c)
Posisi dan ukuran destination saja
d)
Hanya path file sprite sheet
e)
Source position (sx, sy), source size (sw, sh), destination position (dx, dy), destination size (dw, dh)
16.
Urutan yang benar untuk melakukan rotasi pada objek tanpa mempengaruhi objek lain adalah?
a)
save() -> translate() -> rotate() -> draw() -> restore()
b)
rotate() -> translate() -> draw() -> save()
c)
translate() -> save() -> rotate() -> draw()
d)
draw() -> rotate() -> translate() -> restore()
e)
rotate() -> draw() -> translate() -> save()
17.
Komponen utama dalam game loop yang benar adalah?
a)
Input -> Render -> Update
b)
Update -> Input -> Render
c)
Input -> Update -> Render
d)
Render -> Input -> Update
e)
Input -> Render -> Update -> Input
18.
Cara yang benar untuk memainkan audio pada game HTML5 adalah?
a)
audio.start()
b)
audio.play()
c)
audio.begin()
d)
audio.run()
e)
audio.execute()
19.
Keuntungan utama menggunakan Canvas API untuk game development adalah?
a)
Kontrol penuh atas pixel dan performa rendering yang baik
b)
Otomatis responsive terhadap ukuran layar
c)
Built-in physics engine
d)
Dukungan 3D rendering yang lengkap
e)
Tidak memerlukan JavaScript
20.
Teknik manakah yang PALING efektif untuk meningkatkan performa rendering Canvas?
a)
Menggunakan warna yang lebih terang
b)
Menambah ukuran Canvas
c)
Menggunakan setTimeout untuk animasi
d)
Mengurangi jumlah operasi drawing dan menggunakan layering
e)
Meningkatkan resolusi gambar
21.
Fitur-fitur yang didukung oleh HTML5 Canvas adalah? (Pilih lebih dari satu)
a)
Drawing shapes dan paths
b)
Built-in collision detection
c)
Image manipulation
d)
Gradient dan pattern fills
e)
Automatic sprite animation
22.
Method-method yang tersedia dalam Canvas 2D API adalah? (Pilih lebih dari satu)
a)
createElement()
b)
strokeRect()
c)
beginPath()
d)
appendChild()
e)
closePath()
23.
Properties yang dapat dianimasi untuk membuat efek visual pada Canvas adalah? (Pilih lebih dari satu)
a)
globalAlpha untuk transparency
b)
shadowBlur untuk shadow effect
c)
innerHTML untuk text content
d)
globalCompositeOperation untuk blending
e)
className untuk CSS styling
24.
Komponen-komponen yang harus ada dalam game loop adalah? (Pilih lebih dari satu)
a)
Input processing
b)
Database connection
c)
Game state update
d)
Rendering/drawing
e)
File system access
25.
Jenis-jenis collision detection yang dapat diimplementasi dalam game 2D adalah? (Pilih lebih dari satu)
a)
Bounding box collision
b)
SQL injection detection
c)
Circle collision
d)
Pixel-perfect collision
e)
Network collision
26.
Event-event yang berguna untuk kontrol player dalam game adalah? (Pilih lebih dari satu)
a)
onload
b)
keydown
c)
mousemove
d)
resize
e)
click
27.
Format file gambar yang didukung oleh Canvas adalah? (Pilih lebih dari satu)
a)
PNG
b)
JPEG
c)
PSD
d)
GIF
e)
AI
28.
Keuntungan menggunakan sprite sheet dalam game development adalah? (Pilih lebih dari satu)
a)
Mengurangi jumlah HTTP requests
b)
Meningkatkan kualitas audio
c)
Mengoptimalkan penggunaan memory
d)
Mempercepat koneksi database
e)
Memudahkan manajemen animasi
29.
Method-method transformation yang tersedia pada Canvas adalah? (Pilih lebih dari satu)
a)
transform3d()
b)
translate()
c)
rotate()
d)
scale()
e)
animate()
30.
Faktor-faktor yang perlu dipertimbangkan untuk browser compatibility Canvas adalah? (Pilih lebih dari satu)
a)
Dukungan HTML5 Canvas pada browser lama
b)
Kecepatan internet pengguna
c)
Performance rendering pada mobile device
d)
Dukungan WebGL untuk advanced features
e)
Kapasitas penyimpanan browser
31.
Strategi optimasi yang efektif untuk meningkatkan performa game Canvas adalah? (Pilih lebih dari satu)
a)
Object pooling untuk reuse objek
b)
Dirty region rendering
c)
Menggunakan CSS transitions untuk animasi
d)
Menambah resolusi Canvas
e)
Mengurangi frequency collision detection
32.
Properties HTML5 Audio yang dapat dikontrol untuk game adalah? (Pilih lebih dari satu)
a)
bitrate
b)
volume
c)
loop
d)
currentTime
e)
resolution
33.
Faktor-faktor yang mempengaruhi performa drawing Canvas adalah? (Pilih lebih dari satu)
a)
Jumlah operasi drawing per frame
b)
Warna yang digunakan
c)
Kompleksitas path dan shape
d)
Nama variabel JavaScript
e)
Ukuran Canvas resolution
34.
Input methods yang dapat digunakan untuk kontrol game Canvas adalah? (Pilih lebih dari satu)
a)
Keyboard events
b)
Mouse/touch events
c)
Voice recognition
d)
Gamepad API
e)
Biometric input
35.
Strategi yang efektif untuk loading assets dalam game HTML5 adalah? (Pilih lebih dari satu)
a)
Preloading critical assets
b)
Loading semua assets sekaligus
c)
Progressive loading berdasarkan prioritas
d)
Lazy loading untuk non-critical assets
e)
Real-time asset generation
36.
Canvas dalam HTML5 digunakan untuk…
a)
Membuat struktur tabel
b)
Menyimpan data sementara
c)
Menggambar grafik 2D/3D secara dinamis
d)
Menghubungkan ke database
e)
Mengatur style CSS
37.
Tag HTML yang digunakan untuk membuat area gambar dinamakan…
a)
<div>
b)
<canvas>
c)
<section>
d)
<svg>
e)
<paint>
38.
Metode JavaScript untuk menggambar persegi panjang berwarna di Canvas adalah…
a)
drawRect()
b)
createRect()
c)
fillRect()
d)
paintRect()
e)
rectColor()
39.
Perintah clearRect(x, y, width, height) digunakan untuk…
a)
Membuat garis lurus
b)
Menghapus area tertentu di canvas
c)
Menggambar persegi panjang kosong
d)
Mengatur background canvas
e)
Menghapus seluruh file project
40.
Animasi pada Canvas biasanya diupdate menggunakan…
a)
setTimeout()
b)
while(true)
c)
requestAnimationFrame()
d)
updateLoop()
e)
intervalDraw()
41.
Jika sebuah bola bergerak dan mengenai dinding kanan canvas, logika sederhana yang diterapkan adalah…
a)
Menghapus bola
b)
Mengubah arah ke kiri dengan menginvers nilai kecepatan x
c)
Mengatur ulang skor
d)
Memanggil fungsi resetGame()
e)
Menambahkan warna background
42.
Untuk mendeteksi tabrakan (collision) antara dua objek persegi panjang digunakan konsep…
a)
Linear interpolation
b)
Bounding box overlap
c)
Trigonometri sudut
d)
Random number generator
e)
Grid snapping
43.
Jika skor pemain bertambah ketika bola menyentuh target, maka kode yang tepat adalah…
a)
score = 0;
b)
score--;
c)
score++;
d)
score = null;
e)
score * 2;
44.
Untuk memuat sprite sheet ke dalam Canvas, biasanya digunakan objek…
a)
new Sprite()
b)
new Image()
c)
new Sheet()
d)
new Texture()
e)
new Picture()
45.
Agar sprite sheet dapat ditampilkan bagian tertentu saja, digunakan metode…
a)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
b)
drawPartial()
c)
clipImage()
d)
cropImage()
e)
sliceSprite()
46.
Jika ingin memutar audio ketika tombol 'Start Game' diklik, maka urutan logika yang benar adalah…
a)
Load canvas → Draw background → Play audio → Create button
b)
Load audio → Create button → Add event listener → Play audio saat klik
c)
Create button → Play audio → Add event listener → Draw sprite
d)
Load sprite → Draw HUD → Play audio → Reset score
e)
Load audio → Play otomatis tanpa event listener
47.
HUD dalam game biasanya berfungsi untuk…
a)
Mengatur kecepatan animasi
b)
Menampilkan informasi seperti skor, nyawa, dan waktu
c)
Menggambar sprite sheet
d)
Menghapus canvas
e)
Menambah resolusi canvas
48.
Elemen UI seperti tombol dalam canvas dapat dideteksi kliknya dengan cara…
a)
Menggunakan onclick pada <canvas> lalu hit-test koordinat mouse
b)
Membuat tag <button> di dalam <canvas>
c)
Memakai CSS hover
d)
Menggunakan event scroll
e)
Menambahkan listener pada objek score
49.
Fungsi beginPath() dalam Canvas digunakan untuk…
a)
Menghapus path lama
b)
Memulai path baru sebelum menggambar bentuk
c)
Menutup path
d)
Memberi warna pada canvas
e)
Mengubah ukuran canvas
50.
Jika FPS terlalu rendah dalam animasi Canvas, solusi terbaik adalah…
a)
Menambah loop while
b)
Menggunakan requestAnimationFrame()
c)
Mengurangi jumlah objek atau optimisasi gambar
d)
Menyimpan semua sprite ke database
e)
Menghapus HUD
51.
Kode context.moveTo(0,0); context.lineTo(100,100); menghasilkan…
a)
Persegi panjang
b)
Lingkaran
c)
Garis diagonal
d)
Titik tunggal
e)
Tidak ada output
52.
Jika ingin membuat tombol 'Restart' muncul setelah game over, maka sebaiknya ditambahkan ke…
a)
Loop animasi utama
b)
Event listener setelah kondisi game over
c)
Variabel skor
d)
Fungsi clearRect()
e)
Tag <audio>
53.
Metode yang digunakan untuk mengisi warna objek pada canvas adalah…
a)
fillColor
b)
setColor
c)
fillStyle + fill()
d)
contextColor
e)
drawColor
54.
Dalam game berbasis canvas, jika sprite sheet terlalu besar, masalah yang mungkin muncul adalah…
a)
Skor tidak bisa bertambah
b)
Animasi menjadi patah-patah
c)
HUD tidak tampil
d)
Audio tidak bisa diputar
e)
Tombol tidak terdeteksi
55.
Konsep yang digunakan agar karakter bergerak terus saat tombol keyboard ditekan adalah…
a)
Event click
b)
Event keydown dan keyup
c)
Event hover
d)
Event mousemove
e)
Event scroll
56.
Manakah dari berikut yang merupakan kegunaan <canvas>?
a)
Menggambar grafik 2D
b)
Membuat form input teks
c)
Menampilkan animasi
d)
Menghubungkan ke database langsung
e)
Menyajikan grafik interaktif
57.
Metode berikut digunakan untuk menggambar bentuk dasar di Canvas:
a)
fillRect()
b)
strokeRect()
c)
drawCircle()
d)
clearRect()
e)
beginPath()
58.
Dalam animasi menggunakan requestAnimationFrame(), hal yang perlu diperhatikan adalah…
a)
Memanggil fungsi update setiap frame
b)
Menghapus layar dengan clearRect()
c)
Menambahkan objek terus-menerus tanpa batas
d)
Mengatur kecepatan animasi
e)
Menghindari loop while tanpa henti
59.
Untuk membuat game sederhana, logika gameplay biasanya mencakup…
a)
Movement (gerakan objek)
b)
Collision detection (deteksi tabrakan)
c)
Auto layout dengan CSS
d)
Scoring (penambahan skor)
e)
Background musik
60.
Sprite sheet digunakan untuk…
a)
Menyimpan banyak frame animasi dalam satu gambar
b)
Mengurangi ukuran file game
c)
Menyediakan audio background
d)
Membantu animasi karakter lebih efisien
e)
Menampilkan teks HUD
61.
Jika ingin membuat tombol interaktif dalam game Canvas, maka langkah yang tepat adalah…
a)
Menggambar tombol dengan fillRect()
b)
Menambahkan event listener click
c)
Menghitung koordinat klik dibandingkan posisi tombol
d)
Membuat tombol dengan tag <button> di dalam <canvas>
e)
Menambahkan sprite tombol ke dalam canvas
62.
Audio dalam game berbasis canvas dapat dimanfaatkan untuk…
a)
Efek suara (jump, hit, coin)
b)
Background music
c)
Menggambar sprite animasi
d)
Memberi feedback pada pemain
e)
Menambah volume skor
63.
HUD biasanya menampilkan informasi seperti…
a)
Skor pemain
b)
Jumlah nyawa
c)
Jumlah frame per detik (FPS)
d)
Peta mini (mini-map)
e)
Ukuran file sprite
64.
Event keyboard yang sering dipakai dalam kontrol game berbasis canvas adalah…
a)
keydown
b)
keyup
c)
keypress
d)
mousemove
e)
click
65.
Untuk membuat lingkaran di canvas, digunakan kombinasi metode…
a)
beginPath()
b)
arc()
c)
fill() atau stroke()
d)
lineTo()
e)
drawCircle()
66.
Masalah umum saat membuat game HTML5 Canvas adalah…
a)
Memory leak karena event tidak dibersihkan
b)
FPS drop karena gambar terlalu besar
c)
Sprite sheet terpotong salah koordinatnya
d)
Database tidak dapat diakses langsung
e)
UI tombol tidak terdeteksi
67.
Manakah teknik optimisasi yang tepat untuk game canvas?
a)
Menggunakan requestAnimationFrame()
b)
Mengurangi jumlah draw call
c)
Memakai sprite sheet untuk animasi
d)
Menyimpan data ke localStorage setiap frame
e)
Menghapus objek yang tidak terlihat
68.
Dalam deteksi collision, logika yang umum digunakan adalah…
a)
Bounding box
b)
Pixel perfect
c)
Collision mask
d)
Audio overlapping
e)
Trigonometric calculation
69.
Untuk menampilkan gambar di canvas, langkah yang dilakukan adalah…
a)
Membuat objek new Image()
b)
Mengatur src gambar
c)
Memanggil drawImage()
d)
Menambahkan CSS background
e)
Memanggil arc()
70.
Jika sebuah game ingin menampilkan 'Game Over Screen', maka yang perlu diperhatikan adalah…
a)
Menghapus loop animasi utama
b)
Menggambar background baru untuk layar Game Over
c)
Menambahkan tombol Restart
d)
Menghapus sprite sheet
e)
Menampilkan skor akhir pemain
71.
Pasangkan metode Canvas dengan fungsinya:
a)
fillRect()
1.
Menggambar persegi penuh warna
b)
clearRect()
2.
Menghapus area tertentu
c)
beginPath()
3.
Memulai path baru
d)
arc()
4.
Menggambar lingkaran
e)
drawImage()
5.
Menampilkan gambar
72.
Pasangkan event dengan penggunaannya dalam game:
a)
keydown
1.
Mengontrol karakter dengan keyboard
b)
keyup
2.
Berhenti bergerak ketika tombol dilepas
c)
click
3.
Memilih menu atau tombol dalam game
d)
mousemove
4.
Menggerakkan kursor di dalam canvas
e)
touchstart
5.
Kontrol game di perangkat mobile
73.
Pasangkan istilah dengan deskripsinya:
a)
HUD
1.
Panel informasi skor dan nyawa
b)
Sprite sheet
2.
Koleksi frame animasi dalam 1 gambar
c)
Collision detection
3.
Logika mendeteksi tabrakan objek
d)
requestAnimationFrame
4.
Update animasi sesuai refresh rate
e)
Game loop
5.
Gambar ulang objek setiap frame
74.
Pasangkan masalah dengan solusinya:
a)
FPS drop
1.
Optimisasi sprite sheet & kurangi objek
b)
Gambar tidak muncul
2.
Pastikan src gambar sudah dimuat
c)
Collision tidak akurat
3.
Gunakan bounding box sederhana
d)
Tombol tidak berfungsi
4.
Tambahkan event listener yang tepat
e)
Audio tidak berjalan di browser
5.
User interaction sebelum play audio
75.
Pasangkan fungsi dengan komponen game nya:
a)
Karakter utama yang dikontrol pemain
1.
Player object
b)
Memberikan tantangan kepada pemain
2.
Enemy object
c)
Menampilkan skor akhir dan progress
3.
Score system
d)
Menggambar suasana permainan
4.
Background image
e)
Memulai permainan baru
5.
Restart button
76.
Jodohkan kode Canvas berikut dengan fungsinya:
a)
ctx.fillRect(x, y, width, height)
1.
Menggambar persegi terisi
b)
ctx.stroke()
2.
Menggambar garis
c)
canvas.getContext('2d')
3.
Mendapatkan context 2D
d)
ctx.fillStyle = 'red'
4.
Mengatur warna fill
e)
ctx.clearRect(0, 0, canvas.width, canvas.height)
5.
Membersihkan Canvas
77.
Jodohkan method Canvas berikut dengan fungsinya:
a)
requestAnimationFrame()
1.
Membuat animasi smooth
b)
ctx.drawImage()
2.
Menggambar gambar ke Canvas
c)
ctx.save()
3.
Menyimpan state Canvas
d)
ctx.arc()
4.
Menggambar lingkaran atau busur
e)
ctx.translate()
5.
Menggeser origin koordinat
78.
Jodohkan, penggunaan handler dengan event yang tepat dalam game
a)
Menggerakkan crosshair/cursor
1.
mousemove
b)
Memulai game setelah assets loaded
2.
load
c)
Memulai pergerakan player
3.
keydown
d)
Menghentikan pergerakan player
4.
keyup
e)
Menembak/serangan player
5.
click
79.
Jodohkan tipe asset berikut dengan cara implementasinya
a)
Menggunakan sprite sheet dengan frame calculation
1.
Sprite animation
b)
Audio object dengan loop = true
2.
Background music
c)
drawImage() pada posisi UI yang fixed
3.
UI button image
d)
drawImage() pada posisi (0,0) dengan ukuran canvas
4.
Background image
e)
Audio objet dengan play() pada event tertentu
5.
Sound effect
80.
Jodohkan konsep game development berikut dengan tools/method yang tepat!
a)
JavaScript objects/classes untuk state
1.
Game state management
b)
Performance API dan console.time()
2.
Performance monitoring
c)
Preloader dan asset caching
3.
Asset management
d)
Console.log() dan visual indicators
4.
Visual debugging
e)
requestAnimationFrame() dan delta time
5.
Frame rate optimization
Reset
