Algorithma Tic Tac Toe dengan HTML5 Canvas

Oleh -

Penasaran membuat game Tic Tac Toe, terutama tentang menambahkan kecerdasan buatan (Artificial Intelligence) untuk melawan pemain, penulis mencoba menuliskan algorithma dan memvisualisasikannya dengan HTML5 Canvas.

Kode program game Tic Tac Toe dibawah ini disertai dengan interaksi mouse dan touch untuk mempermudah penggunaan.

Sedangkan ide kecerdasan buatannya, komputer mencari dulu posisi terbaik untuk dirinya agar menang, baru jika tidak terpenuhi, komputer mencari posisi yang paling tepat untuk bertahan.

<html> 
<head> 
<title>Tic Tac Toe</title> 
</head> 
<body> 
<div id="score" style="font-size:42px;color:#009688;width:500px;text-align:center;"></div> 
<div id="hasil" style="font-size:42px;color:#009688;width:500px;text-align:center;"></div> 
<canvas id="myCanvas" width="500" height="500"> 
</canvas><br/> 
<button onclick="resetFunction()">Play Again</button> 
<script> 

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
 
var drawing = false; 
var mousePos = { x:0, y:0 }; 
var lastPos = mousePos; 
canvas.addEventListener("mousedown", function (e) { 
 if(!GAMEOVER)drawing = true; 
 lastPos = getMousePos(canvas, e); 
 //Menggambar(); 
}, false); 
canvas.addEventListener("mouseup", function (e) { 
 //drawing = false; 
}, false); 
canvas.addEventListener("mousemove", function (e) { 
 mousePos = getMousePos(canvas, e); 
}, false); 
 
// Get the position of the mouse relative to the canvas 
function getMousePos(canvasDom, mouseEvent) { 
  var rect = canvasDom.getBoundingClientRect(); 
  return { 
    x: mouseEvent.clientX - rect.left, 
    y: mouseEvent.clientY - rect.top 
  }; 
} 
 
// Set up touch events for mobile, etc 
canvas.addEventListener("touchstart", function (e) { 
 mousePos = getTouchPos(canvas, e); 
 var touch = e.touches[0]; 
 var mouseEvent = new MouseEvent("mousedown", { 
  clientX: touch.clientX, 
  clientY: touch.clientY 
 }); 
 canvas.dispatchEvent(mouseEvent); 
}, false); 
 
canvas.addEventListener("touchend", function (e) { 
  var mouseEvent = new MouseEvent("mouseup", {}); 
  canvas.dispatchEvent(mouseEvent); 
}, false); 
 
canvas.addEventListener("touchmove", function (e) { 
  var touch = e.touches[0]; 
  var mouseEvent = new MouseEvent("mousemove", { 
    clientX: touch.clientX, 
    clientY: touch.clientY 
  }); 
  canvas.dispatchEvent(mouseEvent); 
}, false); 
 
// Get the position of a touch relative to the canvas 
function getTouchPos(canvasDom, touchEvent) { 
  var rect = canvasDom.getBoundingClientRect(); 
  return { 
    x: touchEvent.touches[0].clientX - rect.left, 
    y: touchEvent.touches[0].clientY - rect.top 
  }; 
} 
 
var delta=canvas.width/3; 
 
var Box=[]; 
 
for(var i=0;i<9;i++)Box[i]=0; 
 
var MODETURN=1+Math.floor(2.0*Math.random()); 
var GAMEOVER=false; 
var scoreplayer=0,scorecomputer=0; 
var GRS=-1; 
 
function cariPosisi(turn) 
{ 
 var index=[0,1,2,0,3,6,3,4,5,6,7,8,1,4,7,2,5,8,0,4,8,2,4,6]; 
 for(var i=0;i<index.length/3;i++){ 
  if(Box[index[3*i+0]]==turn && Box[index[3*i+1]]==turn && Box[index[3*i+2]]==0){ 
   return index[3*i+2]; 
  }else if(Box[index[3*i+0]]==turn && Box[index[3*i+1]]==0 && Box[index[3*i+2]]==turn){ 
   return index[3*i+1]; 
  }else if(Box[index[3*i+0]]==0 && Box[index[3*i+1]]==turn && Box[index[3*i+2]]==turn){ 
   return index[3*i+0]; 
  } 
 } 
 return -1; 
} 
 
function cariDekat(turn) 
{ 
 for(var i=0;i<9;i++){ 
  if(Box[i]==turn){ 
   var io=i%3; 
   var jo=i/3; 
   if(io==1){ 
    io=(5*Math.random()<3)?io-1:io+1; 
   }else{ 
    io=(io==0)?io+1:io-1; 
   } 
   if(jo==1){ 
    jo=(5*Math.random()<3)?jo-1:jo+1; 
   }else{ 
    jo=(jo==0)?jo+1:jo-1; 
   } 
   return (io+3*jo); 
  } 
 } 
 return -1; 
} 
 
function jumTerisi() 
{ 
 var jum=0; 
 for(var i=0;i<9;i++){ 
  if(Box[i]!=0){ 
   jum++; 
  } 
 } 
 return jum; 
} 
 
function checkMenang() 
{ 
 var menang=0; 
 if(Box[0]==Box[1] && Box[0]==Box[2]){ 
  menang=Box[0];GRS=0; 
 } 
 if(menang==0 && Box[3]==Box[4] && Box[3]==Box[5]){ 
  menang=Box[3];GRS=1; 
 } 
 if(menang==0 && Box[6]==Box[7] && Box[6]==Box[8]){ 
  menang=Box[6];GRS=2; 
 } 
 if(menang==0 && Box[0]==Box[3] && Box[0]==Box[6]){ 
  menang=Box[0];GRS=3; 
 } 
 if(menang==0 && Box[1]==Box[4] && Box[1]==Box[7]){ 
  menang=Box[1];GRS=4; 
 } 
 if(menang==0 && Box[2]==Box[5] && Box[2]==Box[8]){ 
  menang=Box[2];GRS=5; 
 } 
 if(menang==0 && Box[0]==Box[4] && Box[0]==Box[8]){ 
  menang=Box[0];GRS=6; 
 } 
 if(menang==0 && Box[2]==Box[4] && Box[2]==Box[6]){ 
  menang=Box[2];GRS=7; 
 } 
 return menang; 
} 
 
function resetFunction() 
{ 
 GAMEOVER=false; 
 for(var i=0;i<9;i++)Box[i]=0; 
 MODETURN=1+Math.floor(2.0*Math.random()); 
 Menggambar(); 
} 

document.getElementById("score").innerHTML=scoreplayer+":"+scorecomputer; 
function Menggambar() 
{ 
 document.getElementById("hasil").innerHTML=(MODETURN==1)?"Player turn":"Computer turn"; 
 
 if(MODETURN==2){ 
  var jumisi=jumTerisi(); 
  if(jumisi==0){ 
   Box[Math.floor(9.0*Math.random())]=2; 
   MODETURN=1; 
  }else if(jumisi==1 || jumisi==2){ 
   var pasang=-1; 
   while(pasang<0){ 
    var a=cariDekat(1); 
    if(a<0)a=cariDekat(2); 
    if(a>=0 && Box[a]==0){ 
     Box[a]=2; 
     pasang=1; 
    } 
   } 
   MODETURN=1; 
  }else if(jumisi>2){ 
   var a=cariPosisi(2); 
   var no=a; 
   if(a<0){ 
    a=cariPosisi(1); 
    if(a<0){ 
     var pasang=-1; 
     while(pasang<0 && jumisi<9){ 
      no=Math.floor(9.0*Math.random()); 
      if(no>=0 && Box[no]==0)pasang=1; 
     } 
    } 
    else no=a; 
   } 
   if(no>=0){ 
    if(Box[no]==0){ 
     Box[no]=2; 
     MODETURN=1; 
    } 
   } 

  } 
 } 
 
 if(drawing){ 
  if(MODETURN==1){ 
   var ax=Math.floor(lastPos.x/delta); 
   var ay=Math.floor(lastPos.y/delta); 
   var n=ax+ay*3; 
   if(n>=0 && n<9){ 
    if(Box[n]==0){ 
     Box[n]=1; 
     MODETURN=2; 
    } 
   } 
  } 
  drawing=false; 
 } 

 ctx.fillStyle="white"; 
 ctx.fillRect(0,0,canvas.width,canvas.height); 

 ctx.strokeStyle="black"; 
 ctx.lineWidth=5; 
 ctx.beginPath(); 
 ctx.moveTo(delta,0); 
 ctx.lineTo(delta,canvas.height); 
 ctx.moveTo(2*delta,0); 
 ctx.lineTo(2*delta,canvas.height); 
 ctx.moveTo(0,delta); 
 ctx.lineTo(canvas.width,delta); 
 ctx.moveTo(0,2*delta); 
 ctx.lineTo(canvas.width,2*delta); 
 ctx.stroke(); 
 ctx.closePath(); 

 ctx.save(); 
 ctx.shadowBlur = 5; 
 ctx.shadowOffsetX = 3; 
 ctx.shadowOffsetY = 3; 
 ctx.shadowColor = "black"; 
 ctx.lineWidth=15; 
 for(var i=0;i<9;i++){ 
  var io=i%3; 
  var jo=Math.floor(i/3)%3; 
  if(Box[i]==1){ 
   ctx.strokeStyle="red"; 
   ctx.beginPath(); 
   ctx.arc((io+0.5)*delta,(jo+0.5)*delta,0.35*delta, 0, 2 * Math.PI); 
   ctx.stroke(); 
  }else if(Box[i]==2){ 
   ctx.strokeStyle="blue"; 
   ctx.beginPath(); 
   ctx.moveTo(io*delta,jo*delta); 
   ctx.lineTo((io+1)*delta,(jo+1)*delta); 
   ctx.moveTo((io+1)*delta,jo*delta); 
   ctx.lineTo(io*delta,(jo+1)*delta); 
   ctx.stroke(); 
  } 
 } 

 var mng=checkMenang(); 
 if(mng!=0){ 
  GAMEOVER=true; 

  ctx.lineWidth=30; 
  ctx.strokeStyle="green"; 
  ctx.beginPath(); 
  if(GRS==0){ 
   ctx.moveTo(0,0.5*delta); 
   ctx.lineTo(canvas.width,0.5*delta); 
  }else if(GRS==1){ 
   ctx.moveTo(0,1.5*delta); 
   ctx.lineTo(canvas.width,1.5*delta); 
  }else if(GRS==2){ 
   ctx.moveTo(0,2.5*delta); 
   ctx.lineTo(canvas.width,2.5*delta); 
  }else if(GRS==3){ 
   ctx.moveTo(0.5*delta,0); 
   ctx.lineTo(0.5*delta,canvas.height); 
  }else if(GRS==4){ 
   ctx.moveTo(1.5*delta,0); 
   ctx.lineTo(1.5*delta,canvas.height); 
  }else if(GRS==5){ 
   ctx.moveTo(2.5*delta,0); 
   ctx.lineTo(2.5*delta,canvas.height); 
  }else if(GRS==6){ 
   ctx.moveTo(0,0); 
   ctx.lineTo(canvas.width,canvas.height); 
  }else if(GRS==7){ 
   ctx.moveTo(canvas.width,0); 
   ctx.lineTo(0,canvas.height); 
  } 
  ctx.stroke(); 

  document.getElementById("hasil").innerHTML=(mng==1)?"Player win":"Computer win"; 
  if(mng==1)scoreplayer++; 
  if(mng==2)scorecomputer++; 
  document.getElementById("score").innerHTML=scoreplayer+":"+scorecomputer; 
 }else{ 
  if(jumisi==9){ 
   GAMEOVER=true; 
   document.getElementById("hasil").innerHTML="Match"; 
  } 
 } 
 ctx.restore(); 

 if(!GAMEOVER)window.requestAnimationFrame(Menggambar); 
} 
 
Menggambar(); 
</script> 
</body> 
</html>

Komentar

Posting Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Oleh -
Gambar
Tutorial pembuatan sertifikat menggunakan Google Docs, Sheets dan Apps Script teleh penulias buat dalam video di bawah ini: Sedangkan berikut ini adalah kode Apps Script yang penulis gunakan di dalam tutorial di atas: function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Cetak Sertifikat"); menu.addItem("Cetak Sertifikat", "generateMode"); menu.addToUi(); } function generateMode() { var idtemplate="1qseLMkdYIzmx0rhkKELF0xxlsD13CS1eCk0MlcTKt_g"; var idtarget="1ZLNksdiilEc0mQ88WOfAuU8_JcMVcO6ewXuJes-UU9I"; var ss = SpreadsheetApp.openById("1j1TArXYzRlVGvB9q7ly7NdyF-nsJcCH6RT3rOQik0yQ"); var so=ss.getSheetByName("Source"); var data=so.getRange("A1:C").getValues().map(function(row){return (row[0]!="")?row:null}).filter(function(cellData){return cellData != null;}); const docTemplate=DocumentApp.openById(idtemplate); var docTarget=DocumentApp.open...
Baca selengkapnya

Dibalik Penerimaan CPNS 2018

Oleh -
Gambar
Pada suatu khutbah jumat yang penulis dengarkan, diceritakan dalam penerimaan CPNS 2018, peserta CPNS yang diterima, adalah peserta yang lolos tes kompetensi dasarnya. Sehingga meskipun peserta CPNS lulusan bergelar tinggi dan jebolan dari luar negeri, kalau test kompetensi dasarnya tidak lolos, maka tidak akan dipertimbangkan lagi dan berkas mereka langsung ditolak.  Penulis sebenarnya tidak tahu menahu mengenai test CPNS, karena memang tidak pernah ikut, dan sepertinya tidak akan akan berkesempatan ikut, terkait umur penulis yang telah melebihi batas usia pendaftaran.  Namun berdasarkan cerita yang penulis dengar, test kompetensi dasar berisi tentang test pengetahuan kenegaraan. Di mana yang diotak penulis langsung, mendengar kata kenegaraan terbersik kata “PPKN”.  Jika pembaca familiar dengan kata “PPKN”, berarti penulis satu zaman sekolah dengan penulis.  Kemudian apakah hubungannya dengan interpreneur?  Penulis bukan mencoba menghubu...
Baca selengkapnya

Menggambar Lingkaran Menyala dengan Efek Shadow

Oleh -
Gambar
Fungsi bayangan ternyata merupakan salah satu hal penting dalam proses menggambar, terutama untuk menambahkan kesan elegan. Gambar di atas, adalah contoh pemanfaatan efek bayangan di HTML5 Canvas, untuk menggambar lingkaran yang seakan menyala. Dengan warna bayangan sama dengan warna lingkaran, akan dapat dihasilkan bentuk lingkaran yang futuristik. Kode di bawah ini adalah kode untuk menggambar lingkaran di atas: <html> <head> <title>Draw Circle Generator</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "768" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var ctx = canvas.getContext( "2d" ); ctx.fillStyle = "black" ; ctx.fillRect(0,0,canvas.width,canvas.height); function Menggambar() { ctx.fillStyle= "#50575C" ; var rx=0.5*canvas.width; var ry=0.5*canvas.height; var r=...
Baca selengkapnya

Apps Script untuk Membuat Banyak Folder di Google Drive

Oleh -
Melanjutkan pekerjaan sebelumnya, ternyata diperlukan pembuatan folder berdasarkan inisial karyawan, pada Spreadsheet daftar karyawan yang digunakan pada posting yang berjudul "Duplikasi File Template Kuisioner dengan Apps Script" . Tujuannya, dengan memberikan akses tiap folder berdasarkan akun masing-masing karyawan, maka dengan membuat file di dalam folder tersebut saja, file yang membutuhkan akses, akan dapat langsung digunakan oleh karyawan yang bersangkutan. Berikut ini adalah kode untuk membuat folder berdasarkan inisial karyawan: function makeFolderbyList() { var ss = SpreadsheetApp.openById("--idsheetkaryawan--");//sheet target untuk var so=ss.getSheetByName("Karyawan"); var data=so.getRange("A2:T").getValues().map(function(row,index){ var pass=false; if(row[0]!="" && row[19]=="Active"){ pass=true; row.push(index); } return pass?row:null}).filter(function(cellData){return cel...
Baca selengkapnya

Review Pengguna yang Berperilaku Konsumtif

Oleh -
Gambar
Suatu pagi, penulis sebagai developer Aplikasi Long Division, Computational Lab mendapat review seperti gambar di bawah ini: Mungkin bagi sebagian banyak orang akan menganggap ini lucu, karena mengadu/review aplikasi hanya masalah bahasa, adalah lebih ke pribadi pengguna, bukan ke developer. Apalagi aplikasi yang direview bertema matematika, angka-angka merupakan bahasa sendiri dan tidak tergantung pada penjelasan bahasa tertentu, untuk tingkat dasarnya. Namun bagi penulis, yang juga menjadi pengajar, hal ini membuat saya sedih. Pasalnya, generasi didikan kita (sesuai ditunjukkan pada review di atas), diusia dini sudah menunjukkan identitasnya sebagai konsumen yang tulen. Entah, apa memang dia berasal dari keluarga yang kaya, atau memang pendidikan yang menyebabkan dia berpola pikir seperti itu. Artinya generasi didik kita lebih ingin memposisikan diri sebagai raja/ratu yang harus dilayani sebaik mungkin, dan jika tidak puas atau tidak sesuai keinginan mereka sedikit saja, maka sudah p...
Baca selengkapnya

Ngobrol Penghabisan Dana Akhir Tahun

Oleh -
Gambar
Ilustrasi pelatihan di hotel (Sumber gambar:Pixabay/Megha01) Suatu hari libur, di bulan Desember, penulis bersilaturahmi ke salah satu kerabat yang bekerja sebagai perangkat desa. Disana, kerabat penulis ternyata sedang dikunjungi oleh rekan kerjanya dari desa lain. Penulis pun berkenalan, tanpa perlu saling menyebutkan nama, dan penulis pun duduk serta mendengarkan perbincangan tentang kegiatan yang telah mereka lakukan, beberapa hari sebelumnya. Tampaknya, mereka begitu bangga karena dapat mengikuti kegiatan tersebut. Hal itu terlihat dari cara mereka menceritakan, begitu senangnya dapat berkenalan dengan pejabat-pejabat dari desa lain, dan dapat mengikuti acara, makan serta menginap gratis di salah satu hotel bintang lima di kota kami. Sampai-sampai. "Bagaimana tidak senang, sudah diundang, menginap gratis, dan diberi uang saku pula!" seru salah satu dari mereka ke penulis. Dalam perbincangan itu pula, rupanya acara yang mereka datangi adalah...
Baca selengkapnya

Biaya 50 Ribu untuk Pengecekan Sertifikat Tanah

Oleh -
Gambar
Ilustrasi Sertifikat Tanah Penulis sedikit dibingungkan dengan informasi tentang biaya pengecekan keaslian sertifikat tanah. Berdasarkan jawaban beberapa notaris yang penulis temui, biaya pengecekan sertifikat tanah ke BPN, ada yang 500 ribu, 300 ribu, dan 250 ribu untuk yang sampai berstempel resmi. Dan ada yang cuma 100 ribu saja untuk yang hanya "mengintip" saja. Mengintip yang dimaksudkan disini adalah melihat keaslian sertifikat melalui orang dalam, tanpa sertifikatnya mendapat stempel resmi. Sedangkan dari informasi yang beredar di internet, ada yang mengatakan cuma 50 ribu dan ada yang 100 ribu per sertifikat. Alasan kenapa penulis ingin mengecek keaslian sertifikat, adalah untuk keperluan balik nama dan karena dalam sertifikat tersebut, nama yang tertera adalah nama si pemilik sertifikat asli. Sedangkan saat tulisan ini ditulis, pemilik asli tersebut sudah meninggal. Oleh karena itu pada Kamis, 8 Agustus 2019, penulis langsung mendatangi kant...
Baca selengkapnya

Hati-hati Calo Sertifikat Tanah

Oleh -
Gambar
Ilustrasi permohonan (Sumber: Pixabay/jarmoluk) Mengurus sertifikat tanah, baik itu membuat baru atau balik nama, kalau bisa jangan sampai menggunakan pihak ketiga (seperti calo), tetapi langsung ke notaris saja. Hal ini karena, bagaimana pun juga pihak ketiga tersebut, akan pergi juga ke notaris pada akhirnya. Syukur-syukur, jika pemohon bisa datang langsung ke Kantor BPN. Sehingga alur kebutuhan dana saat proses, lebih jelas dibanding melewati pihak ketiga, yang umumnya berupa komisi. Contoh yang terjadi pada penulis. Awalnya, karena belum pernah sama sekali, penulis meminta tolong pihak ketiga, balik nama sertifikat, katakan pihak ketiga itu bernama Samin. Samin melihat ukuran tanah dan cara yang dia lakukan, dia mematok harga mulai 8 juta. Penulis percaya dengan Samin, dan memberikan uang jalan sebesar 3 juta sebagai DP dan uang jalan. Dan katanya, dia akan me-mark-up sedemikian rupa, sehingga harga jasa balik nama semurah-murahnya. Markup...
Baca selengkapnya

Software Java My Scanner 2.0

Oleh -
Gambar
My Scanner 2.0 adalah aplikasi Java yang dapat dipergunakan untuk pengolahan data hasil kuisioner yang dikoleksi secara manual. Manual yang dimaksud disini adalah kuisioner didesain sendiri oleh pemohon kuisioner, dibagikan dalam bentuk hardcopy, diisi menggunakan tinta dengan tanda tertentu. Seperti bulatan hitam, contreng, silang dan lain sebagainya. Untuk pengolahannya, hardcopy perlu diubah dulu ke softcopy menggunakan mesin scanner apapun, diubah ke dalam file gambar (mis. JPEG atau PNG), lalu dimasukkan ke aplikasi My Scanner sesuai yang ditunjukkan video dibawah ini. My Scanner akan mencari, menghitung frekuensi, dan menampilkannya dalam bentuk table atau file Ms. Excel jawaban kuisioner sesuai yang diberikan dalam template. Dengan aturan urutan horizontal sebagai pilihan, dan urutan vertical sebagai jumlah pertanyaan dari kuisioner. Untuk file hasil mesin scanner yang dalam bentuk pdf, dapat diubah dulu dengan salah satu software pihak ketiga seper...
Baca selengkapnya

Eliminasi Gauss-Jordan untuk Invers Matrix dengan Java

Oleh -
Gambar
Terkait dengan posting sebelumnya tentang algorithma eliminasi Gauss-Jordan , penulis mencoba mengimplementasikannya dengan bahasa pemrograman Java. Untuk tahapan pembuatannya dapat dilihat pada video di bawah ini: Sedangkan kode Java-nya adalah sebagaimana berikut: package tutorialjava; import java.text.DecimalFormat; import java.util.Random; /** * @author Edugameapp */ public class TutorialJava { private double[][] A= new double[][]{ {0,-3,-2}, {1,-4,-2}, {-3,4,1} }; private double[][] B; public boolean cekDiagonal( int a) { if (a>10*A.length)return false ; for ( int i=0;i<A.length;i++){ if (A[i][i]==0){ Random rand= new Random(); int k=(i+rand.nextInt(A.length))%A.length; for ( int j=0;j<A[0].length;j++){ double tmp=A[i][j]; A[i][j]=A[k][j]; A[k][j]=tmp; ...
Baca selengkapnya