Ball Game Menggunakan Processing
Processing adalah bahasa pemrograman dan lingkungan
pemrograman (development environment) open source untuk memprogram
gambar, animasi dan interaksi. Digunakan oleh pelajar, seniman, desainer,
peneliti, dan hobbyist untuk belajar, membuat prototipe, dan produksi.
Processing digunakan untuk mengajarkan dasar-dasar pemrograman komputer dalam
konteks rupa dan berfungsi sebagai buku sketsa perangkat lunak (software)
dan tool produksi profesional. Selain itu processing juga
dapat di gunakan sebagai bahasa pemrograman untuk pembuatan game.
Listing Program
/*
OpenProcessing Tweak of *@*http://www.openprocessing.org/sketch/3240*@* */
/* !do not
delete the line above, required for linking your tweak if you upload again */
void setup() {
size(400, 400);
background(bg);
stroke(random(255),random(255),random(255));
frameRate(200);
PFont font;
font =
loadFont("MyriadWebPro-18.vlw");
textFont(font,
20);
}
color bg =
#BF00FF, goal = #00FFFF;
boolean
looping = true;
int lives = 6,
score = 0, shake = 0;
float
ballPosX =
0.0, ballPosX2 = 0.0, ballVelX = 3,
ballPosY =
0.0, ballPosY2 = 0.0, ballVelY = 0.0,
ballRad = 12,
grav = 0.06,
mouseX1 =
mouseX, mouseY1 = mouseY,
mouseX2 =
mouseX1, mouseY2 = mouseY1,
mouseVelX =
mouseX1 - mouseX2, mouseVelY = mouseY1 - mouseY2,
mouseVelX1 =
mouseX1 - mouseX2, mouseVelY1 = mouseY1 - mouseY2,
mouseVelX2 =
mouseX1 - mouseX2, mouseVelY2 = mouseY1 - mouseY2,
mouseVelX3 =
mouseX1 - mouseX2, mouseVelY3 = mouseY1 - mouseY2,
padWid = 40,
goalX
;
void draw() {
fill(0);
text("score:
", 3, 16); text(score, 80, 16);
ellipseMode(RADIUS);
noFill();
for (int i =
1; i < 15; i = i+1) {
if(i >
lives) {stroke(bg);}
ellipse(i*18,
30, 4, 4);
}
stroke(bg);
line(mouseX2 -
padWid-1, mouseY2, mouseX2 + padWid+1, mouseY2);
mouseX2 =
mouseX1; mouseY2 = mouseY1;
ellipse(ballPosX2,
ballPosY2, ballRad, ballRad);
rect(goalX,
height*0.4, 2, height*0.2);
stroke(goal);
goalX =
random(shake/10)-shake/20+2;
if(shake >
0) {shake = shake -1;}
rect(goalX,
height*0.4, 2, height*0.2);
stroke(#8F00FF);
rect(5, height-4, width-10, 2);
stroke(0);
rect(0, 0,
width-1, height-1);
line(mouseX1 -
padWid, mouseY1, mouseX1 + padWid, mouseY1);
mouseX1 =
mouseX; mouseY1 = mouseY;
ellipse(ballPosX,
ballPosY, ballRad, ballRad);
ballPosX2 =
ballPosX; ballPosY2 =
ballPosY;
ballVelY =
ballVelY + grav;
ballPosX =
ballPosX + ballVelX; ballPosY =
ballPosY + ballVelY;
if(ballPosX +
ballRad > width) {
ballPosX =
width - ballRad;
ballVelX =
ballVelX * -0.9;
} else
if(ballPosX - ballRad < 0) {
ballPosX =
ballRad;
ballVelX =
ballVelX * -0.9;
if(ballPosY
> height*0.4 && ballPosY < height*0.6) {
stroke(bg);
fill(bg);
rect(0, 0,
160, 20);
shake = shake
+ int(ballVelX*100);
score = score
+ shake;
padWid =
padWid - 1;
if(int(padWid/5)
== padWid/5) {lives = lives +1;}
}
}
if(ballPosY +
ballRad > height-1) {
ballPosY =
height-1 - ballRad;
ballVelY =
ballVelY * -0.9 +0.1;
ballVelX =
ballVelX * 0.99;
lives = lives
- 1;
stroke(bg);
fill(bg);
rect(1, 1,
160, 20);
if(lives <
1) {
fill(bg);
ellipse(18, 30, 4, 4);
fill(0);
text("score:
", 3, 16); text(score, 80, 16);
text("GAME
OVER, PLEASE TRY AGAIN :)", 3, 32);
score = 0;
ballPosX = 0;
ballVelX = 3;
ballPosY = 0;
ballVelY = 0;
padWid = 40;
lives = 6;
looping =
false;
noLoop();
}
} else
if(ballPosY - ballRad < 0) {
ballPosY =
ballRad;
ballVelY =
ballVelY * -0.9;
}
mouseVelX3 =
mouseVelX2; mouseVelY3 = mouseVelY2;
mouseVelX2 =
mouseVelX1; mouseVelY2 = mouseVelY1;
mouseVelX1 =
mouseX1 - mouseX2; mouseVelY1 = mouseY1 - mouseY2;
mouseVelX =
(mouseVelX1 + mouseVelX2 + mouseVelX3)/3;
mouseVelY =
(mouseVelY1 + mouseVelY2 + mouseVelY3)/3;
if(ballPosY +
ballRad > mouseY1 && ballPosY < mouseY1 &&
ballPosX +
ballRad > mouseX1 - padWid &&
ballPosX -
ballRad < mouseX1 + padWid && ballVelY > mouseVelY) {
ballPosY =
mouseY1 - ballRad;
ballVelY =
0-ballVelY + mouseVelY * 0.8 +0.1;
ballVelX =
ballVelX + (mouseVelX - ballVelX)/4;
} else
if(ballPosY - ballRad < mouseY1 && ballPosY > mouseY1 &&
ballPosX +
ballRad > mouseX1 - padWid &&
ballPosX -
ballRad < mouseX1 + padWid && ballVelY < mouseVelY) {
ballPosY =
mouseY1 + ballRad;
ballVelY =
0-ballVelY + mouseVelY * 0.8;
ballVelX =
ballVelX + (mouseVelX - ballVelX)/4;
}
}
void
mousePressed() {
if(looping)
{noLoop(); looping = false;} else {loop(); looping = true; background(bg);}
}
Logika Program
Dari kode-kode pada listing program
diatas kita bisa mengetahui hal-hal apa saja yang terjadi dari mulai pembuatan
game sampai action yang berjalan ketika game berakhir. Dimulai dari pembentukan
layout, bahwa ukuram layout yang dibuat untuk area game ini 400 x 400. Untuk
font yang digunakan adalah Georgia berukuran 18. Font ini digunakan untuk
merubah style font score yang akan terpampang ketima game dimainkan. Berikut
adalah potongan kode yang membuktikan beberapa peryataan di atas :
void setup() {
size(400, 400);
background(bg);
stroke(random(255),random(255),random(255));
frameRate(200);
PFont font;
font =
loadFont(“MyriadWebPro-18.vlw”);
textFont(font, 20);
}
Agar layout game terlihat lebih
menarik maka kita perlu memberikan warna yang bisa kita lihat dari potongan
program di bawah ini.
color bg = #BF00FF, goal =
#00FFFF;
boolean looping = true;
int lives = 6, score = 0, shake
= 0;
float
ballPosX = 0.0, ballPosX2 = 0.0,
ballVelX = 3,
ballPosY = 0.0, ballPosY2 = 0.0,
ballVelY = 0.0,
ballRad = 12, grav = 0.06,
mouseX1 = mouseX, mouseY1 = mouseY,
mouseX2 = mouseX1, mouseY2 = mouseY1,
mouseVelX = mouseX1 - mouseX2,
mouseVelY = mouseY1 - mouseY2,
mouseVelX1 = mouseX1 - mouseX2,
mouseVelY1 = mouseY1 - mouseY2,
mouseVelX2 = mouseX1 - mouseX2,
mouseVelY2 = mouseY1 - mouseY2,
mouseVelX3 = mouseX1 - mouseX2,
mouseVelY3 = mouseY1 - mouseY2,
padWid = 40, goalX
;
Color bg berfungsi untuk memeberi
warna untuk background area game. Warna yang digunakan yaitu Ivory dengan kode #fffff0. Sementara itu untuk goalnya kita
akan beri warna hijau dengan kode #40d040. Goal berfungsi sebagai area yang
tujuan di alirkannya bola. Nantinya jika bola mengenai area goal, maka user
akan mendapatkan score yang akan terus dikalkulasikan. Besar kecilnya score
yang diperoleh tergantung dari jarak area bola terakhir menyentuh dengan area
goal. Semakin jauh jaraknya, maka score yang didapatkan akan semakin tinggi.
Fungsi dari ballRad = 12 adalah ukuran dari besar lingkaran bola. Grav = 0.06
merupakan kecepatan laju bola saat mengenai permukaan. padWid = 40 merupakan
panjang garis permukaan pada mouse.
Untuk action, aturan area, serta
behaviour bola. Untuk action area area yang diperbolehkan atau tidak termasuk
jurang adalah koordinat Y sedangkan bagian jurang adalah koordinat X bawah.
Sisanya merupakan area aman yang adapat dilalui bola. Selain itu score akan
bertambah jika mengenai goal, hal ini bisa kita lihat dari potongan program
berikut.
shake = shake +
int(ballVelX*100);
score = score + shake;
Kemudian sistem akan memeriksa
apakan jumlah kesempatan bermain user kurang dari satu atau tidak. Jika kurang
dari satu game dihentkan dan jika tidak maka game akan terus berlanjut dan bola
akan terus dipantulkan.
Langkah terakhir adalah memberi
action ketika mouse diklik. Jika dalam kondisi kesempatan masih ada, maka
action mouse ketika diklik adalah me-pause game. Sedangkan jika dalam kondisi
game over, maka ketika mouse di klik secara otomatis sistem akan membawa user
dalam permainan baru.
if(looping) {noLoop();
looping = false;} else {loop(); looping = true; background(bg);}
}
Uji
Coba
Pada bagian ini kita akan menguji
coba program game yang telah kita buat. Untuk menjankan program tersebut tekan
button play.
Untuk lebih jelas, silahkan lihat video cara memainkan ball game berikut
Memulai Game
Comments
Post a Comment