Manual Book Game Perhitungan didalam Puzzle

SEKILAS TENTANG APLIKASI GAME PERHITUNGAN DI DALAM PUZZLE

Aplikasi ini berjudul “Game Perhitungan didalam Puzzle”. Didalam aplikasi ini terdapat angka yang terdiri dari 1 sampai 9 yang harus dipilih pemain ke lingkaran pada puzzle yang telah disediakan sehingga hasil dari penjumlahannya sama dengan yang teracak didalam kotak yang berada disebelah puzzle.

Berikut adalah listing dari game ini :

?-   set(yel(1)),

     window( _,_,win_func(_), "Numpuzzle",100,100,600,500).

%%%%%%%%%%%%%%%%%%

%    WINDOW     %

%%%%%%%%%%%%%%%%%%

    

win_func(init):- window_brush(_,rgb(0,0,0)),

               menu(pop_up, _,_,game(_),"Game"),

               init_data,random.

win_func(paint):- set(yel(1)),

     pen(1,rgb(255,100,0)),

     color_text_back(_,rgb(0,0,0)),

     color_text(_,rgb(255,100,0)),

     draw_ell,

     eval_sum,

     draw_score,

      pen(3,rgb(255,100,0)),

     draw_pull(1),

     draw_table.

win_func(mouse_click(X,Y)):- target(X,Y).

game(init):-

     menu(normal, _,_,s1(_),"New Game"),

     menu(separator, _,_,fail(_),_),

     menu(normal, _,_,s2(_),"Exit").

s1(press):-start.

s2(press):-close_window(_).

%%%%%%%%%%%%%%%%

%    INIT    %

%%%%%%%%%%%%%%%%

init_data:-

          assert(data(1,1,0)),

          assert(data(2,1,0)),

          assert(data(3,1,0)),

          assert(data(1,2,0)),

          assert(data(2,2,0)),

          assert(data(3,2,0)),

          assert(data(1,3,0)),

          assert(data(2,3,0)),

          assert(data(3,3,0)).

col(yellow):- brush(rgb(255,255,0)).

col(red):- brush(rgb(255,0,0)).

col(green):- brush(rgb(0,255,0)).

col(black):- brush(rgb(0,0,0)).

%%%%%%%%%%%%%%%%

%    DRAW    %

%%%%%%%%%%%%%%%%

draw_circle(X,Y,C):-col(C), ellipse(X,Y,X + 40,Y + 40).

draw_circle_text(X,Y,I):- I1 is print(I),

                     text_out(X + 17,Y + 13,I1).

draw_table:- data(X,Y,_),

            X1 is 40 + 90 * (X - 1),

            Y1 is 80 + 90 * (Y - 1),

            draw_circle(X1,Y1,black),

           draw_line(X1,Y1,X,Y),

            fail.

draw_line(X1,Y1,X,Y):- X < 3,

                   line(X1 + 40,Y1 + 20,X1 + 90,Y1 + 20).

draw_line(X1,Y1,X,Y):- Y < 3,

                   line(X1 + 20,Y1 + 40,X1 + 20,Y1 + 90).

draw_line(X1,Y1,X,Y).

draw_pull(I):- I < 10,  

             draw_p1(I),

              I1 is print(I),

             text_out(45 + 60 * (I - 1),355, I1),

             draw_circle(30,380,yellow),

             I2 is I + 1,

             draw_pull(I2).

draw_pull(10).

draw_p1(I):- X1 is 30 + 60 * (I - 1),

            draw_circle(X1,380,green).

draw_ell:- col(black),

          ellipse(70,120,140,170),

          ellipse(160,120,230,170),

           ellipse(70,210,140,260),

          ellipse(160,210,230,260).

draw_sum(X,Y,T):-

            T1 is print(T),

            X1 is 99 + 90 * (X - 1),

            Y1 is  136 + 90 * (Y - 1),

            text_out(X1,Y1,"    "),

            text_out(X1,Y1,T1).

eval_sum:- sum(S1,S2,S3,S4),

          draw_sum(1,1,S1),

          draw_sum(1,2,S2),

          draw_sum(2,1,S3),

          draw_sum(2,2,S4).

draw_score:- round_rect(370,160,470,250,17,17),

           line(420,160,420,250),

           line(370,205,470,205),

           tem(S1,S2,S3,S4),

           S11 is print(S1),

           S22 is print(S2),

           S33 is print(S3),

           S44 is print(S4),

           text_out(390,175,S11),

           text_out(438,175,S22),

           text_out(390,220,S33),

           text_out(438,220,S44).

%%%%%%%%%%%%%%%%%%

%    RANDOM     % 

%%%%%%%%%%%%%%%%%%

initial(G,List):-toX(G,L),forX(G,L,List).

toX(0,[]).

toX(X,[H|T]):-H is X,Z is X - 1,toX(Z,T).

delel([H|T],1,T,H).

delel([H1|T1],N,[H2|T2],E):-H2 is H1,Z is N - 1,

                     delel(T1,Z,T2,E).

forX(0,_,[]).

forX(D,L,[H|T]):-P is random(D) + 1,delel(L,P,L1,Z),

          H is Z,

          Temp is D - 1,

          forX(Temp,L1,T).

posel([H|T],1,H).

posel([H|T],N,E):- N1 is N - 1,posel(T,N1,E).

random:- initial(9,L),

        posel(L,1,E1),posel(L,2,E2),posel(L,3,E3), 

        posel(L,4,E4),posel(L,5,E5),posel(L,6,E6),

        posel(L,7,E7),posel(L,8,E8),posel(L,9,E9),

        S1 is E1 + E2 + E4 + E5,

        S2 is E2 + E3 + E5 + E6,

        S3 is E4 + E5 + E7 + E8,

        S4 is E5 + E6 + E8 + E9,

        set(tem(S1,S2,S3,S4)).

%%%%%%%%%%%%%%%%%

%    START         %

%%%%%%%%%%%%%%%%%

erase:- data(A,B,C),retract(data(A,B,C)),fail.

erase.

start:- erase,init_data,random,update_window(_).

    

%%%%%%%%%%%%%%%%%%%%

%    CONTROL   %

%%%%%%%%%%%%%%%%%%%%

target(X,Y):- X >= 30,X =< 550,

            I is (X + 30)//60,

            abs(Y - 400) =< 20,

             abs(X - (50 + 60 * (I - 1))) =< 20,

            yel(T),

            not(data(_,_,I)),

            (T =\= 0 -> draw_circle(30 + 60 * (T - 1),380,green)),

            draw_circle(30 + 60 * (I - 1),380,yellow),

            set(yel(I)).

target(X,Y):- X >= 40, X =< 260,

            Y >= 80, Y =< 300,

            X1 is (X + 50)//90,

            Y1 is (Y + 10)//90,

            abs(X - (60 + 90 * (X1 - 1))) =< 20,

            abs(Y - (100 + 90 * (Y1 - 1))) =< 20,

            put_pull(X1,Y1).

target(X,Y).

put_pull(X1,Y1):- data(X1,Y1,TT), TT =:= 0,

              put_next(X1,Y1).

put_pull(X1,Y1):- data(X1,Y1,T),

               retract(data(X1,Y1,T)),

              assert(data(X1,Y1,0)),

              yel(T1),

              T_new is 30 + 60 * (T - 1),

              draw_circle(T_new,380,yellow),

              X is 40 + 90 * (X1 - 1),

              Y is 80 + 90 * (Y1 - 1),

              eval_sum,

              draw_circle_text(X,Y,"  "),

               set(yel(T)),!,

              (T1 =\= 0 -> T_old is 30 + 60 * (T1 - 1),

                        draw_circle(T_old,380,green)).

put_next(X1,Y1):- X is 40 + 90 * (X1 - 1),

              Y is 80 + 90 * (Y1 - 1),

              yel(T),

              draw_circle_text(X,Y,T),

              retract(data(X1,Y1,_)),

              assert(data(X1,Y1,T)),

              XY is 30 + 60 * (T - 1),

              draw_circle(XY,380,red),

              eval_sum,

              check(T).

check(T):- data(_,_,0),change(T).

check(T):- res,set(yel(0)).

change(T):-T1 is T + 1,T1 =< 9, not(data(_,_,T1)),set(yel(T1)),

          X is 30 + 60 * (T1 - 1),draw_circle(X,380,yellow).

change(T):-T =:= 9,change(0).

change(T):-T1 is T + 1, change(T1).

                   

%%%%%%%%%%%%%%%%%%

%    RESULT     %

%%%%%%%%%%%%%%%%%%

sum(S1,S2,S3,S4):- data(1,1,T1),data(1,2,T2),data(1,3,T3),

                    data(2,1,T4),data(2,2,T5),data(2,3,T6),

                    data(3,1,T7),data(3,2,T8),data(3,3,T9),

                    S1 is T1 + T2 + T4 + T5,

                S2 is T2 + T3 + T5 + T6,

                S3 is T4 + T5 + T7 + T8,

                S4 is T5 + T6 + T8 + T9.

res:- sum(S1,S2,S3,S4),

     tem(S11,S22,S33,S44),

     S1 =:= S11, S2 =:= S33, S3 =:= S22, S4 =:= S44,

     you_win,erase.

res.

you_win:- beep(t),

         color_text(_,rgb(0,0,255)),

         text_out(390,140,"You win!!!"),wait(0.5),

         text_out(390,140,"                 "),wait(0.5),

         text_out(390,140,"You win!!!"),wait(0.5).

OUTPUT GAME

Storyboard game

Bagaimana Cara Membuat HTML5 Sederhana Permainan di Canvas

Kali ini akan di uraikan langkah - langkah yang dibutuhkan dalam pembuatan game canvas ini adalah :

1. Buat Canvas

// Create the canvas

var canvas = document.createElement("canvas");

var ctx = canvas.getContext("2d");

canvas.width = 512;

canvas.height = 480;

document.body.appendChild(canvas);

hal pertama yang harus kita lakukan adalah membuat elemen canvas . saya melakukan ini di JavaScript selain HTML untuk mendemonstrasikan bagaimana cara mudah ini disempurnakan. Pertama kita punya elemen, lalu kita dapat referensi isinya, atur dimensi dan lampirkan pada badan dokumen. 

2. Masukkan Gambar

// Background image

var bgReady = false;

var bgImage = new Image();

bgImage.onload = function () {

        bgReady = true;

};

bgImage.src = "images/background.png";

sebuah game membutuhkan penggambaran! Jadi mari masukkan beberapa gambar. Saya ingin ini sesederhana mungkin jadi masukkan sebuah Image yang sudah dibunggus indah atau sebagainya. bgReady digunakan untuk mengetahui canvas ketika sudah aman untuk digambar, coba untuk render it before it's loaded will throw a DOM error.

Kita lakukan ini pada setiap tiga gambar, kita butuhkan: background, hero and monster. 

3. Objek Permainan

// Game objects

var hero = {

        speed: 256, // movement in pixels per second

        x: 0,

        y: 0

};

var monster = {

        x: 0,

        y: 0

};

var monstersCaught = 0;

sekarang kita tentukan beberapa variabel yang akan kita gunakan nanti. hero mulai diatur dengan speed yang mana lebih cepat ia akan berpindah pada pixels per second. monster tidak akan berpindah jadi itu akan punya kordinat. terakhir, monstersCaught menampilkan berapa monster yang pemain telah dapatkan.

4. Input Pemain

// Handle keyboard controls

var keysDown = {};

addEventListener("keydown", function (e) {

        keysDown[e.keyCode] = true;

}, false);

addEventListener("keyup", function (e) {

        delete keysDown[e.keyCode];

}, false);

Sekarang untuk memasukkan pengendalian. Ini mungkin bagian pertama yang akan membawa developer yang datang dari web development background. Hal penting yang perlu diingat adalah kami tidak ingin menganjurkan untuk memasukkan peristiwa sesungguhnya ketika itu terjadi. Pada banyak web, mungkin sesuai untuk memulai animasi atau meminta data real ketika user memasukkan input. Tetapi pada tahap ini, kita ingin game kita masuk akal dan semata-mata tinggal di suatu tempat untuk mempermudah kontrol ketika dan jika sesuatu terjadi. Untuk alasan itu kita hanya ingin menampilkan input pengguna nanti.

Untuk menyelesaikan ini kita punya sebuah variabel keysDown yang menampilkan banyak kejadian keyCode. Jika kode kunci adalah objek, pengguna hanya menekan kunci itu, sederhana!

5. New Game

// Reset the game when the player catches a monster

var reset = function () {

        hero.x = canvas.width / 2;

        hero.y = canvas.height / 2;

        // Throw the monster somewhere on the screen randomly

        monster.x = 32 + (Math.random() * (canvas.width - 64));

        monster.y = 32 + (Math.random() * (canvas.height - 64));

};

fungsi reset disebut awal game baru, atau level atau apapun yang anda suka menyebutnya. Ini menempatkan hero (player) ditengah layar dan dimanapun secara acak.

6. Perbarui Objek

// Update game objects

var update = function (modifier) {

        if (38 in keysDown) { // Player holding up

               hero.y -= hero.speed * modifier;

        }

        if (40 in keysDown) { // Player holding down

               hero.y += hero.speed * modifier;

Merancang Permainan yang Sukses (Designing Successful Games)

Kunci Sukses (The Key of Success)

Kunci keberhasilan adalah anda harus membuat game yang orang-orang dapat merasakan selalu ingin bermain, mereka harus menyukai ikon dan nama dari games tersebut sehingga mereka akan melihat gambaran permainan yang sebenarnya. Mereka harus menyukai deksripsi dan screen shot sehingga mereaka akan membeli permainan. Mereka harus menyukai lima menit pertama dari permainan dalam games tersebut dan mereka tidak akan menghapusnya dan memberikan rating yang buruk. Dan juga mereka harus menyukai setelah bermain selama dua jam sehingga mereka  akab memberitahu teman-temannya tentang games tersebut, membicarakannya dan memberikan ulasan yang baik, dll.

Permainan dari games yang anda buat juga harus berdiri diantara kompetisi. Sekitar 50 permainan muncul di App Store setiap hari. Jika orang-orang tidak memperhatikan permainan yang anda buat maka anda  akan menjualnya secara susah payah ke setiap eksemplar.  Anda harus membuat permainan yang anda buat terlihat menarik sehingga dapat dikenal dan dipermainkan oleh banyak orang.

Pertanyaannya adalah bagaimana untuk mencapainya?

1.     Memulai (Getiing Started)

2.    Memeriksa persaingan (check out the competition)

Jika anda ingin membuat permainan yang sukses pada IOS dan Android lebih baik anda memulai dengan melihat kompetisi. Pastikan anda juga memiliki iPhone atau iPad Touch atau jika terlalu mahal bagi anda, perangkat Android juga baik. Dapatkan iTunes pada PC anda dan periksalah 100  games gratis dan berbayar yang paling populer. Beli atau downloadlag games-games tersebut dan mainkan satu persatu. Ini akan member anda wawasan yang luas tentang  jenis permainan yang populer dari perangkat tersebut. 

Desain Grafis, Seni, dan Komersil

Desain grafis identik dengan melukis atau menggambar hanya berbeda media dan tujuan, media grafis yang digunakan adalah komputer dengan software-sofware tertentu seperti Corel Draw, Photoshop, AutoCAD, Blender, 3ds max, dan masih banyak yang lainnya dengan tujuan yang praktis dan ekonomis. Tidak jauh beda antara profesi desainer grafis dengan profesi fotografer, karena kedua profesi ini bisa saling membutuhkan, yang membedakan hanya peralatan yang digunakan. Sebagai contoh foto hasil bidikan seorang fotografer membutuhkan beberapa editing seorang desainer grafis untuk menghasilkan foto yang bagus dan sebaliknya seorang desainer grafis membutuhkan bahan atau foto untuk pembuatan layout majalah dari seorang fotografer.

dari sisi seni :

Seni sendiri adalah ungkapan jiwa atau perasaan yang di apresiasikan pada suatu media. Karya desain grafis bisa dianggap produk seni, asalkan tidak ada sisi promosi dan komersilnya. Sama halnya dengan profesi pelukis dan fotografer, jika pelukis sedang membuat coretan dikanvas tentang pemandangan alam, itu dapat dikatakan seni.

dari sisi komersil : 

suatu karya dapat dikatakan memiliki nilai komersil jika mampu menghasilkan uang atau pendapatan, sebagai contoh saya membuat desain untuk mempromosikan produk yang akan saya jual. ini dapat dikatakan bernilai komersil.

 

jika ingin menjadi seorang desain grafis, kita harus giat berlatih secara otodidak agar bisa memahami dan mengerti dengan sendirinya dan jangan pernah takut salah, karena kesalahan merupakan proses alami di dalam mempelajari sesuatu. 

sumber :
http://gruis.mywapblog.com/desain-grafis-antara-seni-dan-komersil.xhtml