Kita Buat Game Simple Dulu

[b1naryc0de 1]

Ok aku ubah sikit kod putramaya

<img src="tictactoekostv5.png" usemap="#map">

<map name="map">
<area shape="polygon" coords="127,110,200,109,211,182,127,187" href="java script:swap(1);">
</map>

<a href="java script:swap(1);"><img id="1" src="x.png" style="position:absolute;left:165px;top:145px;" border=0></a>

Yang bahagian area tu asalnya putramaya guna shape rect.. Tapi memandangkan kotak2 tue tidak berbentuk segiempat tepat atau segiempat sama jadi aku tukar ke bentuk polygon..

Map ni gunanya untuk buat area pada img atau gambar jadi aku gunakan css untuk letak gambar lain diatas map tue.. perhatikan pada href dalam <a> dan <area>.. aku set satu ruang/petak tu untuk pergi ke link yang sama..

kod diatas untuk kotak atas kiri jer..

Yang javacript:swap(1) tue aku set nilai 1 untuk dihantar ke function swap bagi mewakili kotak 1.. Untuk kotak kedua set nilai sebagai 2 dan seterusnya.. Dalam function swap tu aku cadangkan letak fungsi untuk ubah img src.. id="1" tue untuk memudahkan tukar img src pada kotak mana satu..

susunan kotak:

1 2 3

4 5 6

7 8 9

Ni gambar2 x,o, dan empty:

[Vibrunnica 0]

Wohhh..... tumpang join.... apakata kalo di 3D kan sket....

[zer0Nehza 7]

x jadik tu vib.. klo 3D basic nk papan hijau ngn kapur putih gak.. ehehe.. pi design balik..

[b1naryc0de 1]

Heheh Vibrunnica pakar graphic datang.. welcome2..

3D tue memang nampak menarik.. Tapi boleh ke dimasukkan kalo guna html dan javascript?? Kalo flash ok lah kot..

Gambar2 yang aku bagi kat atas beserta kod ada masalah sikit dengan IE.. Baru aku perasan.. hehe.. Ada cara nak perbetulkan??

[Vibrunnica 0]

Hmmm.... Cuba ko tgk file htm+flash nih...agak2 bleh manipulate tak...?

Sini dlm 1.6mb

[b1naryc0de 1]

Boleh tu memang boleh.. Tapi kene guna flash macam fail yang ko bagi kat atas.. So kita tunggu apa kata ahli2 lain nak terus guna flash atau guna javascript dulu..

[aku 0]

kalo nak terus guna flash, aku dah ada kod seperti yang aku bagitau sebelum ni.. kita bleh usha2 dan edit2...

harap kita follow rancangan asal.

klo 3D basic nk papan hijau ngn kapur putih gak..

well said

Edited July 27, 2006 by aku

[putramaya 0]

saya dah masukkan binary code yang baru bagi tu kat sini.

http://www15.brinkster.com/affendi/tictactoe/default.htm

tapi binary gambar x tu tak matching dgn background. Maknanya kena ada 9 imej x yang berlainan ikut betul2 kedudukan tu.kena crop atau kerat dari gambar yang aku dah bagi tu.

satu lagi,apa kata kod yg ni kita padam dulu.

<a href="java script:swap(1);"><img id="1" src="x.png" style="position:absolute;left:165px;top:145px;" border=0></a>

dan kita mula buat function swap tu. jadi kod yang akan dimasukkan seperti ni. kena cari cara macammana nak letak gambar kat kawasan poligon tu selepas diklik.

<script>
function swap(a){
.....letak x kat tempat diklik tu..
}
</script>

atau ada idea lain.

[aku 0]

hmm.. semakin rumit plak aku tengok kalo guna javascript nih..

pada pandangan aku, lebih mudah guna flash. tak ndak teruskan ke flash ke? korasa cemana, putramaya? binarycode?

[b1naryc0de 1]

err putramaya aku kurang faham maksud ko gambar tak matching dengan background..

Tapi memang ada masalah pada ketidakserasian browser..

Ni kalo guna firefox, semua ok:

Tapi kalo guna Internet Explorer background tu jadi pekat sikit..

Gambar 'x' memang aku crop dari gambar en 'aku'.. Mungkin kene betulkan sedikit code kat situ supaya serasi pada semua browser..

Gambar x,o, dan empty semua ada satu jer.. Cuma posisi left dan top img jer berlainan..

Ok untuk first loading boleh buat camnie:

1) letak kod:

<a href="java script:swap(1);"><img id="1" src="empty.png" style="position:absolute;left:165px;top:145px;" border=0></a>

Tapi semua guna gambar empty.png..

Lepas klik pada area atau img dia akan panggil function swap(a) dan cuma perlu tukar src..

atau pon

2)buang kod di atas dan hanya letak kod di atas apabila diklik pada area poligon..

tapi dua2 sama jer..

hmm.. memandangkan aku 1st time guna map.. dalam map boleh masuk gambar lain ke pada <area> atau ada apa2 tag yang membolehkannya??

en 'aku'.. aku rasa kita proceed jelah dulu guna javascript sebab dah start.. pastu baru guna flash.. takut nanti asyik bertukar2 angin nanti terbengkalai..

[aku 0]

ooo.. ok..

aku cadang camtu sebab takut perpindahan teknologi dari javascript ke flash.. makan masa plak..

tapi tak pe la.. kalo dah siap javascript pon.. kira ok jugak la.. sementara aku dok pk nak combinekan javascript ngan css, kalo korang tau berkenaan css ngan javascript, bleh la kasik info disini...

dan sementara tu lagik, ko atau putra bleh tak terangkan kat aku cemana algoritma ntuk decide menang (maksud aku, x atau o jadik 3 serangkai)

[b1naryc0de 1]

ok putramaya ni kod untuk letak gambar kat polygon tue:

<script language="javascript">
<!--
function swap(a)
{
  if (a == "1")
  {
    box1.src = "x.png";
  }
}
//-->
</script>

<img src="tictactoekostv5.png" usemap="#map" style="z-index:0;" border=0>

<a href="java script:swap(1);"><img id="box1" src="empty.png" 

style="position:absolute;left:165px;top:145px;z-index:1;" border=0></a>

<map name="map">
<area shape="polygon" coords="127,110,200,109,211,182,127,187" href="java script:swap(1);">
</map>

Ni baru kod untuk tukar gambar jer.. Heheh seterusnya buat benda sama untuk box-box lain..

Seterusnya cari cara macamana pihak lawan bertindak balas..

Hmm.. 'aku' nape aku rasa soalan ko macam ada agenda tersembunyi??

Ko nak combine javascript dengan css macammana??

algoritma tu bagi putramaya lah jawab..

[aku 0]

uik.. tang mana yang nampak cam agenda tersembunyi tu?

hmm... javascript bleh tukar cursor kan? - hint

pasal javascript ngan css tu, aku berangan jer.. takleh nak combine.. huhuhu..

pasal aku tanya algoritma nak menang tu.. aku nak tau cemana nak apply lepas kita click, pastu terus comp balas.. cemana tu? aku lemah sket bab2 ai(bleh dikategorikan ai ke?) ni..

[hoyoyo80 3]

ni versi aku...cuma takat ni jer:P

load 3d graphics

load soalan tanya nak dulu/kemudian dan set turn...esokla sambung

[aku 0]

wahha.. bagus.. bagus..

[b1naryc0de 1]

Baguslah hoyoyo..

Heheh sementara rehatkan otak dari keje yang memeningkan otak aku update sikit game tictactoe guna javascript..

Masalah background board kat ie tak sama aku settlekan dengan tukar png ke jpg.. ni file2 jpg yang digunakan:

Ni pulak kod yang aku dah update sikit:

<html>
<head>
</head>
<body>
<script language="javascript">
<!--
//first load choose who start first
document.write("<center>");
document.write("<div id='mainContainer'>");
document.write("Welcome to TicTacToe!<br><br>");
document.write("Do you want to start first?");
document.write("<FORM NAME='startFirstForm' ACTION='' METHOD='GET'>");
document.write("<INPUT TYPE=RADIO NAME='whoStartFirst' VALUE='Y' checked>Yes");
document.write("<INPUT TYPE=RADIO NAME='whoStartFirst' VALUE='N'>No<br><br>");
document.write("<INPUT TYPE=BUTTON VALUE='Start' onClick='chooseShape(this.form)'>");
document.write("</FORM>");
document.write("</div>");
document.write("</center>");

//choose shape
function chooseShape(form)
{
  if (form.whoStartFirst[0].checked)
  {
    start = 1;
  }
  else
  {
    start = 2;
  }
  document.getElementById('mainContainer').innerHTML = "Choose your shape:<br>" +
  "<a href='java script: gameLevel(\"x\")'><img src='x.jpg'></a>\&nbsp\;" +
  "<a href='java script: gameLevel(\"o\")'><img src='o.jpg'></a>";
}

//choose game level
function gameLevel(shape)
{
  playerShape = shape;
  document.getElementById('mainContainer').innerHTML = "Choose level:" +
  "<FORM NAME='chooseLevel' ACTION='' METHOD='GET'>" +
  "<INPUT TYPE=RADIO NAME='level' VALUE='easy' checked>Easy<br>" +
  "<INPUT TYPE=RADIO NAME='level' VALUE='medium'>Medium<br>" +
  "<INPUT TYPE=RADIO NAME='level' VALUE='hard'>Hard<br><br>" +
  "<INPUT TYPE=BUTTON VALUE='Start' onClick='startGame(this.form)'>" +
  "</FORM>";
}

//load the board and start the game
function startGame(form)
{
  if (form.level[0].checked)
  {
    level = "easy";
  }
  if (form.level[1].checked)
  {
    level = "medium";
  }
  if (form.level[2].checked)
  {
    level = "hard";
  }
  document.getElementById('mainContainer').innerHTML = "<img src='tictactoekostv5.jpg' usemap='#map'     

style='z-index:0;' border=0>" +
  "<a href='java script:swap(1);'><img id='box1' src='empty.jpg' 

style='position:relative;left:-450px;top:-179px;z-index:1;' border=0></a>" +
  "<map name='map'>" +
  "<area shape='polygon' coords='127,110,200,109,211,182,127,187' href='java script:swap(1);'>" +
  "</map>";
}


function swap(a)
{
  if (a == '1')
  {
    box1.src = "x.jpg";
  }
}
//-->>
</script>
</body>
</html>

Untuk level tue sekaligus menjawab soalan 'aku' berkenaan algoritma ai (memang ai pon 'aku')..

Level easy aku cadangkan komputer main random jer pilih kotak walaupon tinggal satu kotak jer lagi nak menang.. Kalo player tak leh menang gak tak tau lah nak cakap ape..

Level medium lak aku cadangkan komputer random gak pada dua step yang pertama.. Step yang berikutnya komp akan detect mana kotak yang boleh di menang (maknanya kalo 2 kotak yang dia dah tanda berada dalam kedudukan selari tinggal 1 kotak lagi nak menang dia akan tanda kotak tue).. Tapi kalo takde kotak penentu kemenangan komp akan rand jer..

Level hard lak masukkan move2 yang kalo tak menang pon komp takkan kalah.. heheh kalo player boleh menang level nie memang respect..

Berkenaan macammana komp nak jalan lepas player jalan setiap kotak yang dah bertanda akan disetkan dalam satu variable yang kotak tue dah ditanda oleh samada player atau komp.. Jadi dia akan random(kecuali level hard) pilih kotak yang available..

Macammana nak tau lak dah menang ke belum setiap kali jalan script akan check posisi2 tanda menang yang mungkin.. Contohnya setiap kotak kita tandakan dengan nombor ikut susunan berikut:

1 2 3

4 5 6

7 8 9

Ada 8 kemungkinan atau kombinasi untuk menang iaitu:

123

456

789

147

258

369

159

357

Jadi biler digabungkan dengan status kotak tu ditanda oleh player atau komp kita boleh check satu2 sebagai contohnya guna if..else: (variable stat1,stat2,stat3,....stat9 simpan maklumat siapa tanda kotak tue, p=player, c=comp, n=none)

if ((stat1 == "p") && (stat2 == "p") && (stat3 == "p"))

{

alert("You win!!")

}

if ((stat4 == "p") && (stat5 == "p") && (stat6 == "p"))

{

alert("You win!!")

}

dan seterusnya

kalo untuk komputer menang lak

if ((stat1 == "c") && (stat2 == "c") && (stat3 == "c"))

{

alert("You lose hahaha!!")

}

if ((stat4 == "c") && (stat5 == "c") && (stat6 == "c"))

{

alert("You lose hahaha!!")

}

dan seterusnya

tictactoe yang aku dah update boleh tgk kat:

http://www.b1naryc0de.net/tictactoe/tictactoe.html

Edited July 30, 2006 by b1naryc0de

[aku 0]

wah.. cayalah b1naryc0de... tapi comp blom jalan lagi, kan?

best2...

[hoyoyo80 3]

update:aku nyer AI dah jalan tp dia cuma tahu isi petak yg kosong...masih AS...artificial stupid

[putramaya 0]

wah dah discuss pasal AI.

dah boleh jalan klik dan isi tempat tu.

so binary dlm function swap tu dah boleh masukkan arahan untuk paggil funtion computermove kot...atau u fikir buat cara lain.

function swap(a)
{
  if (a == '1')
  {
    box1.src = "x.jpg";
  }

computermove()
}

function computermove(){

......komputer pulak jalan
}

sebelum computermove() tu bolehlah masukkan

if level==easy

Edited August 1, 2006 by putramaya

[b1naryc0de 1]

Yup putramaya.. camtu lah yang aku fikir..

tapi if level == easy tu aku rasa molek letak dalam computerMove()

Heheh.. lama tak muncul putramaya??

Apa kata aku buat function swap ko buat function computerMove..

Edited August 1, 2006 by b1naryc0de

[hoyoyo80 3]

aku rasa AI cuma perlu ada movement ni...

normal:

1.isi mana suka jer asal kosong

2.isi tmpt yg bleh menang

3.isi tmpt yg block pemain menang

hard:

1.maybe set trap ker...

[putramaya 0]

sini saya masukkan kod untuk random nombor 1 - 9.

var randomnumber=Math.floor(Math.random()*9)+1

so buat permulaan kod computrmove tu lebih kurang macam ni.

function computermove(){
   if (level=="easy"){
      var rndnumber=Math.floor(Math.random()*9)+1
       ...rndnumber tu kita boleh hantar ke funtion komputer swap plak
   }
}

tapi kod ni , dia tak tahu mana satu tempat kosong....

jadi kita fikir kemudian...

[hoyoyo80 3]

aku tak tau macam maner structure code korang...aku guna Basic dan irrlicht...

guna array utk store smua slot 1-9

X,O patut ada nilai dan masukkan dlm slot yg dah kena tanda

cth:if board[1]!=empty maka board[1]=X

BTW aku nyer algo dah siap...tinggal nak declare winner dan letak animasi sket kalu mampu...

[aku 0]

wah... hoyoyo80 lagi advance.. dah nak abih...

aku ni dah jadik tukang perati jer.. serabut kepala memikir.. nasib baik ada 3 programmer yang best2... hmm... ada chance tak nak selit sound dalam javascript ni?

ko nye ada sound tak hoyoyo?(ape makne nick ko ni ek..)

[hoyoyo80 3]

takper...bagus ada byk2 party ni..baru kita ada games yer tak?kalau aku sorang2 buat mmg tak pernah siap....