Laporan Akhir Praktikum Multimedia Dan Animasi

1

GAME PUZZLE

Tujuan:1. Permainan puzzle bersifat edukatif karena dapat merangsang daya pikir dan

melatih kecepatan dalam menyusun gambar.2. Bersifat menyenangkan dan menghibur.

Petunjuk Permainan:Pertama pemain akan di dihadapkan pada tampilan awal permainan,

dimana pemain akan diminta untuk mengklik kiri pada mouse atau mouse pad komputer atau laptop. Selanjutnya permainan akan secara otomatis mulai, yaitu terdapat gambar-gambar yang telah terusun secara acak yang harus disusun agar sesuai dengan gambar utuhnya dan terdapat waktu yang berfungsi untuk mengukur kecepatan pemain dalam menyelesaikan permainan. Peraturannya jika pemain berhasil menyelesaikan susunan gambar sebelum waktu habis maka pemain akan mendapatkn skor dan sebaliknya apabila pemain gagal menyelesaikan susunaan gambar tidak sampai pada waktu yang telah ditetapkan maka pemain dinyatakan gagal atau game over.

Source Code:

Source code untuk gold

import ddf.minim.*;

//Variables-------------------------------------------------------------------------------------------------------------------------------------

PFont myFont; //font tulisan

Screens newScreen; // variabel tampilan baru

Minim minim;

AudioSample clickSound, endSound, moveSound; // variabel suara

AudioPlayer bgMusic; // variabel lagu

1

2

int state;

// jumlah class atau tampilan

final int ShowWelcome = 1;

final int ShowStart = 2;

final int ShowGame = 3;

final int ShowEnd = 4;

//Setup----------------------------------------------------------------------------------------------------------------------------------------

void setup(){

//pengaturan awal

textAlign(CENTER); //text di tengah

frameRate(20);

size(350,600); // ukran kanvas

rectMode(CENTER);

imageMode(CENTER);

state = ShowWelcome; // ke tampilan welcome

myFont = createFont("Verdana", 24, true); // pengaturan font

textFont(myFont);

//pemanggilan suara dan lagu

minim = new Minim(this);

clickSound = minim.loadSample("bell2.mp3");

2

3

endSound = minim.loadSample("energy.mp3");

moveSound = minim.loadSample("ambient.mp3");

bgMusic = minim.loadFile("satie_gymno1.mp3");

bgMusic.loop(); // pengulangan lagu

newScreen = new Screens(minim, clickSound, endSound, moveSound); // suara untuk tampilan baru

}

//Draw-----------------------------------------------------------------------------------------------------------------------------------------

void draw(){

switch(state){

//tampilan welcome

case ShowWelcome:

newScreen.showWelcome(); //memanggil tampilan welcome

// jika tombol kiri pada mouse d klik, akan pindah k tampilan start

if( mousePressed==true && mouseButton==RIGHT ){

state = ShowStart;

}

break;

// tampilan start

3

4

case ShowStart:

newScreen.showStart(); //memenaggil tampilan start

// jika tombol kiri pada mouse d klik, akan pindah k tampilan game

if( mousePressed==true && mouseButton==LEFT){

state = ShowGame;

}

break;

//tampilan game

case ShowGame:

newScreen.showGame(); // memenggil tampilan sgame

// jika tombol di klik, akan pindah k tampilan end

if( mousePressed==true && mouseX>=75 && mouseX<=275 && mouseY>=515 && mouseY<=565 ){

state = ShowEnd;

clickSound.trigger();

}

break;

//tampilan end

case ShowEnd:

newScreen.showEnd();

// jika tombol kanan mouse di klik, akan pindah k tampilan start


state = ShowStart;

}

break;

}

4

5

}

//menghentikan audio-----------------------------------------------------------------------------------------------------------------------------------

public void stop() {

clickSound.close();

endSound.close();

moveSound.close();

bgMusic.close();

minim.stop();

super.stop();

}

//selesai------------------------------------------------------------------------------------------------------------------------------------------

Source code untuk play

class Play{

//Variables------------------------------------------------------------------------------------------------------------------------------------

Puzzle[] pieces = new Puzzle[9];

5

6

// potongan puzzle

String photoset[][] = {

{ "idea01.jpg", "idea02.jpg", "idea03.jpg", "idea04.jpg", "idea05.jpg", "idea06.jpg", "idea07.jpg", "idea08.jpg", "idea09.jpg" },

{ "himaster01.jpg", "himaster02.jpg", "himaster03.jpg", "himaster04.jpg", "himaster05.jpg", "himaster06.jpg", "himaster07.jpg", "himaster08.jpg", "himaster09.jpg" },

{ "untanblack01.jpg", "untanblack02.jpg", "untanblack03.jpg", "untanblack04.jpg", "untanblack05.jpg", "untanblack06.jpg", "untanblack07.jpg", "untanblack08.jpg", "untanblack09.jpg" },

{ "bemmipa01.jpg", "bemmipa02.jpg", "bemmipa03.jpg", "bemmipa04.jpg", "bemmipa05.jpg", "bemmipa06.jpg", "bemmipa07.jpg", "bemmipa08.jpg", "bemmipa09.jpg" }

};

PImage[] preview = { loadImage("idea00.jpg"), loadImage("himaster00.jpg"), loadImage("untanblack00.jpg"), loadImage("bemmipa00.jpg") }; // memenggil gambar untuk puzzle

boolean[] numSolved = {false, false, false, false, false, false, false, false, false};

int[] location = {0, 0, 0, 0, 0, 0, 0, 0, 0}; // lokasi gambar

int[] locX = {100, 175, 250, 100, 175, 250, 100, 175, 250}; // lokasi gambar

int[] locY = {150, 150, 150, 225, 225, 225, 300, 300, 300}; // lokasi gambar

int i, u, o, tempX, tempY;

//konstruksinya ----------------------------------------------------------------------------------------------------------------------------------

Play(){

u = int(random(0,4)); //mengatur pilihan gambar

// mengatur gambar

6

7

for(i=0; i<9; i++){

pieces[i] = new Puzzle(locX[i], locY[i], photoset[u][i]);

}

}

//lokasi potongan Puzzle acak --------------------------------------------------------------------------------------------------------------

void shuffle(){

u = int(random(0,4)); //mengatur pilihan gambar

//atur puzzle

for(i=0; i<9; i++){

pieces[i].changeImg(photoset[u][i]);

}

// posisi random untuk memulai.

o = 0;

// mengulang "memori" untuk merendom

for(i=0; i<9; i++){

location[i] = 0;

}

i=0;

7

8

//perendoman

while(i<9){

o = int(random(0,9)); //Roll a 9 sided die

if(location[o]==0){ //if I haven't used this location yet

pieces[i].storePos(locX[o], locY[o]); // Atur potongan ke lokasi ini

location[o] = 1; // kemudian ingat, menggunakan lokasi ini

i++; //putar dengan array

}

}

}

// pindahkan potongan--------------------------------------------------------------------------------------------------------------------------------

void movePiece(int i){

if( checkMove(pieces[8].sendX(), pieces[8].sendY(), pieces[i].sendX(), pieces[i].sendY() ) ){

tempX = pieces[8].sendX();

tempY = pieces[8].sendY();

pieces[8].storePos(pieces[i].sendX(), pieces[i].sendY());

pieces[i].storePos(tempX, tempY);

pieces[8].create();

pieces[i].create();

}

}

8

9

// cek jika puzzle sukses---------------------------------------------------------------------------------------------------------------

boolean checkSolved(){

int u=0;

for(int i=0; i<9; i++){

if( pieces[i].sendX()==locX[i] && pieces[i].sendY()==locY[i] ){

numSolved[i]=true;

u++;

}

}

if(u==9){

return true;

}

else{

return false;

}

}

//cek jika potongan dapat di pindah--------------------------------------------------------------------------------------------------------------------

boolean checkMove(int x8, int y8, int xi, int yi){

if( xi==x8 && ( (yi-75)==y8 || (yi+75==y8) ) ){

return true;

}

else if( yi==y8 && ( (xi-75)==x8 || (xi+75==x8) ) ){

return true;

}

9

10

else{

return false;

}

}

//Check if the cursor is over a piece----------------------------------------------------------------------------------------------------------

boolean checkMouse(int i){

if(mouseX>=pieces[i].sendX()-24 && mouseX<=pieces[i].sendX()+24 && mouseY>=pieces[i].sendY()-24 && mouseY<=pieces[i].sendY()+24 && i!=9){

return true;

}

else{

return false;

}

}

//tampilkan potongan

void showPieces(){

for(i=0; i<9; i++){

pieces[i].create();

}

image(preview[u], 175, 390, 100, 100);

}

10

11

}

//selesai------------------------------------------------------------------------------------------------------------------------------------------

Source code untuk puzzle

class Puzzle{

//Variables------------------------------------------------------------------------------------------------------------------------------------

int xpos, ypos;

PImage img;

//Constructor----------------------------------------------------------------------------------------------------------------------------------

Puzzle(int xval, int yval, String name){

xpos = xval;

ypos = yval;

img = loadImage(name);

}

11

12

// dapat potongan dari posisi baru---------------------------------------------------------------------------------------------------------------

void storePos(int xval, int yval){

xpos = xval;

ypos = yval;

}

// dapatkan potongan dari gambar baru------------------------------------------------------------------------------------------------------------------

void changeImg( String name ){

img = loadImage(name);

}

//Send the piece's X value --------------------------------------------------------------------------------------------------------------------

int sendX(){

return xpos;

}

//Send the piece's Y value--------------------------------------------------------------------------------------------------------------------

int sendY(){

return ypos;

}

12

13

//gambar potongan------------------------------------------------------------------------------------------------------------------------------

void create(){

image(img, xpos, ypos);

}

}

//End------------------------------------------------------------------------------------------------------------------------------------------

Source code untuk screens

class Screens{

//Variabel------------------------------------------------------------------------------------------------------------------------------------

Play game;

Timer myTimer;

int score, bestScore; //variabel untuk nilai tertinggi

boolean init; //Variable representing whether showGame is not yet activated

PImage welcome, end, start;

//Sound Variables

Minim sound;

AudioSample clickSound; // suara jika mengklik tombol

13

14

AudioSample endSound; // suara jika men

AudioSample moveSound;

//Constructor----------------------------------------------------------------------------------------------------------------------------------

Screens(Minim _m, AudioSample a, AudioSample b, AudioSample c){ //Import sounds from setup

sound = _m;

//

clickSound = a;

endSound = b;

moveSound = c;

myTimer = new Timer(0, 400, millis());

game = new Play();

score = 0;

bestScore = 0;

init = true;

noStroke();

welcome = loadImage("depan.jpg");

end = loadImage("endScreen.jpg");

start = loadImage("gate.jpg");

game.shuffle(); //lokasi pengacakan ini dari potongan dan pilihan gambar

}

14

15

// tampilan welcome

void showWelcome(){

image(welcome, 210, height/2);

text("Welcome To Puzzle", width/2, 80);

myFont = createFont("FFScala", 25);

textFont(myFont);

fill(0, 0, 0);

noStroke();

rect(175, 505, 280, 80);

fill(255);

text("Klik Kanan", 175, 500);

text("Untuk Petunjuk", 175, 530);



}

}

//tampilkan tampilan start----------------------------------------------------------------------------------------------------------------------------

void showStart(){

// menampilkan tampilan start dan memunculkan suara jika mouse d klik.

score = 0;

image(start, width/2, height/2);

//pengaturan font

fill(0);

15

16


textFont(myFont);

// isi text petunjuk

text("PETUNJUK PERMAINAN", 175, 80);

text("Permainan ini menggunakan fungsi geser", 180, 125);

text(" yang dijalankan oleh mouse, dengan", 180, 150);

text("cara mengklik tombol kiri pada mouse", 180, 175);

text("Pecahan Puzzle di acak hingga sama ", 180, 205);

text("dengan gambar asli yang di sediakan,", 180, 230);

text("dibawah puzzle.", 175, 255);

text("SELAMAT MENCOBA ^_^", 175, 300);

// kotak bawah

fill(13);

noStroke();

rect(175, 495, 270, 90);

fill(0, 126, 255);

noStroke();

rect(175, 495, 230, 60);

fill(255);

//text untuk memulai

text("Klik untuk Memulai", 175, 500);

if( mousePressed==true && mouseButton==LEFT ){ // jika tombol kiri pada mouse di klik maka akan menuju ke game


}

}

16

17

// menampilkan tampilan akhir-----------------------------------------------------------------------------------------------------------------------------

void showEnd(){

if( init == false ){ // jika game sudah di aktifkan sebelumnya

init = true; // membuat game tidak aktif

endSound.trigger(); //kemudian, mulai endSound

}

// sebagaimana init tidak lagi "false", endsound tidak akan di mainkan kembali

// buat suara jika tombol mouse kanan di klik



}

//tampilan untuk tampilan end

image(end, width/2, height/2);

filter(BLUR, 1);


textFont(myFont);

fill(255);

text("TERIMA KASIH SUDAH BERMAIN", width/2, 80);

text("Presented by:",width/2,130);

text("Eka Yogi Prananda" ,width/2,160);

text("Minati Yulianti",width/2,180);

text("Bayu Setiawan",width/2,200);

17

18

text("Megawati",width/2,220);

text("Klik Kanan untuk",width/2,470);

text("Kembali ke petunjuk",width/2,500);

text("Nilai: " +score+ "\nNilai Tertinggi: " +bestScore, width/2, 300);

}

// MENAMPILKAN TAMPILAN GAME -----------------------------------------------------------------------------------------------------------------------------

void showGame(){

PImage img;

img = loadImage("wallpaper.jpg");

background(img);

if( init == true ){ //jika game belum di aktifkan

init = false; // ubah sehingga game di aktifkan

game.shuffle(); //acak potongan puzzle

}

// sebagaimana init tidak lagi "true", acak dan drawBlank tidak lagi di panggil

//tampilan potongan

game.showPieces();

//tampilan bawah untuk score akhir

noFill();

rect(175, 85, 500, 50);

//tampilan nilai

fill(0);

18

19

text("Nilai: "+score, 175, 85);

//tampilan bawah untuk puzzle baru

fill(100);

stroke(0, 0, 255);

rect(175, 470, 200, 50);

fill(255);

text("Puzzle Baru", 175, 480);

//tampilan bawah keluar

fill(100);

stroke(0,0,255);

rect(175, 540, 200, 50);

fill(255);

text("Keluar", 175, 550);

//jika mengklik next puzzle, game mereset dan waktu mereset

if( mousePressed==true && mouseX>=75 && mouseX<=275 && mouseY>=445 && mouseY<=495 ){


game.shuffle();

myTimer.reset(millis());

}

// jika puzzle tidak berhasil di selesaikan, waktu akan terus berjalan dan potongan untuk bergerak

if( game.checkSolved()==false ){

myTimer.counter(millis()); // Penghitung akan memperbarui dengan sendirinya setiap frame

for(int i=0; i<9; i++){

19

20

if( mousePressed==true && game.checkMouse(i)==true ){

moveSound.trigger();

game.movePiece(i);

}

}

}

// Jika puzzle berhasil di selesaikan, nilai ter update (tapi bukan score terbaik) dan waktu akan berkurang menjadi 350, serta permainan di reset.

//Nilai terbaik menunjukan score tertinggi pemain melalui beberapa pemain yg di lalui

else if( game.checkSolved()==true ){

score+=1;

if( score>=bestScore ){

bestScore = score;

}

// tampilan Nilai

fill(255);

rect(175,85,200,50);

fill(0);

text("Nilai : "+score, 175, 85);

game.shuffle();

myTimer = new Timer(0, 350, millis()); // waktu menjadi 350

}

// Jika waktu yang berjalan habis, maka game dan waktu di ulangi

if( myTimer.sendSeconds()<myTimer.sendMin() ){

game.shuffle();

myTimer.reset(millis()); // fungsi pengulangan waktu

20

21

score = 0;

}

}

}

//selesai ------------------------------------------------------------------------------------------------------------------------------------------

Source code untuk timer

class Timer{

//Variabel------------------------------------------------------------------------------------------------------------------------------------

int seconds, secMax, secMin, savedMS, currentMS;

//constructor----------------------------------------------------------------------------------------------------------------------------------

Timer(int minimum, int maximum, int saveBit){

secMin = minimum; //angka pada timer di hitung mundur

secMax = maximum; //lamanya waktu

savedMS = saveBit; //satuan waktu dalam milliseconds

}

21

22

//waktu mundur-------------------------------------------------------------------------------------------------------------------------

void counter(int currentTime){

currentMS = currentTime; //waktu sekarang milliseconds (should be millis())

seconds = secMax-(currentMS - savedMS)/1000; // perhitungan waktu mundur

// tampilan waktu

textAlign(CENTER);

noStroke();

noFill();

rect(175, 35, 300, 50);

fill(0);

text("Waktu: "+seconds, 175, 35);

}

//pengaturan waktu ulang----------------------------------------------------------------------------------------------------------------------------

void reset(int currentTime){

seconds = secMax;

savedMS = currentTime; //satuan waktu dalam milliseconds

}

22

23

//mengirim waktu sekarang --------------------------------------------------------------------------------------------------------------------

int sendSeconds(){

return seconds;

}

// Mengirim detik minimum yang diperlukan ----------------------------------------------------------------------------------------------------------

int sendMin(){

return secMin;

}

}

//selesai------------------------------------------------------------------------------------------------------------------------------------------

Tampilan Permainan:

23

24

24

25

25

26

26

27

Penjelasan :

Seperti di jelaskan di petunjuk game ini di mulai dengan tampilan awal yang

berupa tampilan “WELCOME TO PUZZLE” dan terdapat kotak yang jika di klik

tombol kanan pada mouse maka akan menuju tampilan petunjuk permainan.

Tampilan selanjutnya berupa tampilan cara permainan atau petunjuk dari

menjalankan game puzzle ini, serta ada kotak yang jika kita klik tombol kiri pada

mouse maka akan menutu permainan dari puzzle ini.

Tampilan ketiga merupakan tampilan dari permainan puzzle. Di tampilan ini

terdapat tampilan waktu dan nilai (di bagian atas), pecahan puzzle dan gambar

puzzle utuh (di bagian tengah), kotak yang berisi tulisan “Puzzle Baru” dan

“keluar” (di bagian bawah). Waktu saat kita pertama kali bermain akan di atur 400

detik dan akan berjalan munduh sampai 0. Untuk Nilai akan menunjukan angka 0

27

28

yang berarti belum berhasil menyelesaikan satupun puzzle. Selama permainan

waktu akan bergerak mundur hingga 0. Jika kotak yang berisi tulisan “Puzzle

Baru” di klik maka puzzle akan mengacak gambar baru, dan waktu akan

mengulang ke 400 detik. Jika puzzle berhasil di selesaikan sebelum waktu habis,

maka gambar akan mengacak gambar lain secara random, dan waktu akan di atur

menjadi 350 serta nilai akan bertambah 1 setiap sekali berhasil menyelesaikan

puzzle, (begitu seterusnya). Jika puzzle tidak dapat di selesaikan dalam waktu 400

detik dan waktu habis, maka waktu akan kembali menjadi 400 detik dan gambar

akan teracak secara random. jika kotak yang bertulisan keluar di klik maka

tampilan akan menuju tampilan akhir dari game.

Tampilan akhir merupakan tampilan untuk mengakhiri permainan puzzle.

Pada tampilan ini terdapat tulisan “TERIMA KASIH TELAH BERMAIN” dan

nama kelompok yang membuat game ini. Di tampilan ini juga terdapat Nilai dan

Nilai Tertinggi. Nilai merupakan hasil nilai/jumlah puzzle yang dapat kita

selesaikan sebelum waktu habis. Nilai tertinggi merupakan nilai/jumlah puzzle

terbanyak yang di selesaikan oleh seorang pemain sebelum waktu habis. Dari

tampilan akhir ini jika ingin bermain puzzle kembali dapat mengklik tombol

kanan di mouse pada tulisan “Klik kanan untuk kembali ke petunjuk”. Maka akan

kembali k tampilan petunjuk permainan puzzle ini, serta ikuti langkah seperti di

atas untuk melanjtkan permainan.

Waktu hanya terdiri dari 2, yaitu :

1. Waktu awal yang di atur = 400 detik

2. Waktu setelah dapat menyelesaikan game puzzle = 350

Waktu akan bergerak mundur sampai 0.

Potongan puzzle ini sebelumnya telah di potong dan di simpan di database

folder game ini. Gambar puzzle ini nantinya akan di panggil secara acak dari

coding game ini.

Game ini terdapat 1 buah lagu yang akan berputar selama permainan, dan

akan mengulang jika lagu itu habis. Dan 3 buah suara untuk mengklik tombol,

memindahkan puzzle dan mengakhiri permainan.

28

Laporan Akhir Praktikum Multimedia Dan Animasi

Documents