Algorithma Tic Tac Toe dengan HTML5 Canvas

Oleh Uboiz -

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 Uboiz -
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

Apps Script untuk Mengirimkan Notifikasi Approval

Oleh Uboiz -
Gambar
Berikut ini kode Apps Script untuk mengirimkan email approval berdasarkan input dari pengguna: Kode function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Administrasi"); menu.addItem("Kirim Email Approval", "openFormEmail"); menu.addToUi(); } function openFormEmail() { var target = SpreadsheetApp.openById("--ID Sheet--"); var ss=target.getSheetByName("Instansi"); ss.getRange("A2:F").getValues().map(function(row,index){ if(row[0]!="" && row[0]!="Passed"){ var subject="Pengajuan Instansi "+row[3]+" "+row[0]; var pesan="Yth. "+row[2]+"<br/><br/>Terkait pengajuan nama instansi dengan:<br/><br/>"; pesan+="Nama: "+row[3]+"<br/>"; pesan+="Alamat: "+row[4]+"<br/><br/>"; if(row[0]=="Approved"){ ...
Baca selengkapnya

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

Oleh Uboiz -
Pada hari Jumat, 3 Januari 2025, sekitar jam 10 pagi, penulis mendapatkan pengalaman tidak merugikan dengan aksi skimming melalui aplikasi Android M-Pajak.apk. Aplikasi ini diunduh melalui alamat website yang saat itu beralamat di djponlinepajakcoid.com, yang tampilannya terlihat mirip dengan Play Store. Aksi dimulai dengan modus arahan untuk penonaktifan NIB (Nomor Induk Berusaha) melalui Whatsapp, baik berupa chat, phone call, video call, sampai share screen. Penulis diminta untuk memverifikasi data pribadi, kemudian menginstal aplikasi M-Pajak di atas. Bodohnya penulis, penulis mau-mau saja. Setelah itu, penulis diminta melakukan serangkaian registrasi dan diminta membeli materi online dengan ketentuan bahwa handphone yang digunakan membayar, harus sama dengan pembayaran pendaftaran. Lalu... Handphone penulis pun tiba-tiba tertutup dengan aplikasi berlogo DJP, dan dikatakan sedang dalam proses, serta penulis diminta menunggu dan tidak boleh disentuh katanya. Dan saat inilah, mungkin...
Baca selengkapnya

Kebodohan Karyawan Menyalahkan Sistem

Oleh Uboiz -
Untuk kesekian kalinya, penulis melihat, terdapat karyawan yang dengan omong besarnya, menyalahkan sistem yang ada di instansi di mana penulis bekerja. Mulai dari struktur database, kebijakan atasan, dan lain sebagainya. Salah. Semua salah, katanya. Padahal, menurut penulis, justru dialah yang munafik. Kalau memang salah, kenapa juga masih mau di gaji dari instansi ini. Kenapa tidak berani mengundurkan diri, jika memang merasa di dzolimi. Kenapa masih mau mengerjakan pekerjaan, yang dia anggap dari pola pikir 'orang miskin'. Bagi penulis, dengan pola pikir seperti itu, dialah yang justru menambah jumlah orang bodoh di instansi ini, bukan memberikan solusi. Miris. Harusnya dia menyadari, jika instansi menggaji dirinya, sebenarnya adalah untuk memperbaiki hal-hal yang dia anggap salah tersebut. So, what will you do, if that actually your job where the reason you have been paid here? Oleh karena itu, alangkah baiknya ketika perekrutan karyawan baru, setidaknya lebih selektif lagi ...
Baca selengkapnya

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

Oleh Uboiz -
Gambar
Seringkali untuk urusan data, kita diminta untuk mengecek apakah data sudah dimasukkan atau belum. Biasanya keperluan ini untuk mengecek data terbaru. Misalnya mengecek apakah email siswa sudah masuk daftar atau belum Salah satu caranya adalah menggunakan Query formula berikut ini: =IFNA(QUERY(B2:B,"SELECT B WHERE B IS NOT NULL AND B<>'"&JOIN("' AND B<>'",QUERY(D2:D,"",0))&"'",0)) Di mana B dan D adalah kolom sheet yang implementasinya dapat dilihat pada video dibawah ini: Sedangkan jika diperlukan highlight data untuk menandai data mana saja yang belum masuk dapat menggunakan Conditional Formatting Google Sheet sebagaimana video dibawah ini:
Baca selengkapnya

Menyembunyikan Failed Load Images di Blogger

Oleh Uboiz -
Gambar
Salah satu cara untuk menyembunyikan gambar yang tidak dapat di load pada suatu halaman Blogger adalah menggunakan fungsi remove element Javascript. Namun cara ini tidak penulis jamin dapat berjalan disemua browser. Setidaknya, dapat mempercantik tampilan posting yang hanya menggunakan gambar thumbnail dari Youtube. Dibawah ini adalah kode Javascript dan bagaimana menambahkan di Blogger. Kode <script> var imgs=document.getElementsByTagName("img"); for(var i=0,j=imgs.length;i<j;i++){ imgs[i].onerror = function(e){ this.parentNode.removeChild(this); } } </script> Demo
Baca selengkapnya

Generate Karakter Acak dan Menempatkannya di Sel Google Sheets dengan Apps Script

Oleh Uboiz -
Gambar
Untuk menandai sel dengan susunan karakter random, yang mana kursor mouse sedang menandainya di sel tersebut pada Google Sheets, kita dapat menggunakan mengunakan Apps Script berikut ini: Kode function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Keperluan"); menu.addItem("Generate Random", "createRandom"); menu.addToUi(); } function makeRandomChar(length) { var result = ""; const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@"; let counter = 0; while (counter < length) { result += characters.charAt(Math.floor(Math.random() * characters.length)); counter += 1; } return result; } function generateRandom() { return makeRandomChar(10+Math.floor(Math.random() *40)); } function createRandom() { var sheet=SpreadsheetApp.getActive(); sheet.getActiveSheet().getCurrentCell().setValue(""+generateRandom()); } Kode d...
Baca selengkapnya

Kode Apps Script MailApp untuk Form Mengirimkan Email

Oleh Uboiz -
Gambar
Terkadang kita membutuhkan untuk mengirimkan email kepada pengguna web site secara langsung, tanpa harus membuka email itu sendiri. Untuk web apps yang dibangun menggunakan Apps Script, sangat dimudahkan, dengan menggunakan fungsi MailApp untuk mengirimkan email menggunakan akun Google kita. Maka, berikut ini ada video demo bagaimana membuat form sederhana, yang berfungsi untuk mengirimkan email ke pengguna secara langsung, tanpa harus membuka email. Demo Kode file .gs function processEmailToUser(recipient,subject,pesan) { var datum={}; var bool=sendEmailToUser(recipient,subject,pesan); if(bool){ datum["status"]=1; }else{ datum["status"]=0; datum["error"]="Gagal mengirimkan email"; } return datum; } function sendEmailToUser(recipient,subjecto,pesan) { try { MailApp.sendEmail({ to: recipient, subject: subjecto, htmlBody: pesan }); return true; } catch (e) { return false; } } file .html      func...
Baca selengkapnya

Kumpulan Source Code Greenfoot

Oleh Uboiz -
Gambar
Overview Greenfoot adalah aplikasi berbasis Java yang cocok untuk pemula yang sedang belajar OOP Java. Dukungan image processing 2D dapat menjadi satu daya tarik utama penggunaan aplikasi ini. Sehingga selain gratis, dengan Greenfoot anda akan dapat belajar membuat algorithma pembuatan game, terutama yang berbasis game 2D. Greenfoot Sourcecode Collection adalah kumpulan source code Greenfoot yang terdiri dari 36 skenario. Beberapa scenario menunjukkan tentang bagaimana cara memvisualisasikan contoh-contoh bidang kefisikaan, seperti revolusi bulan, gravitasi, pendulum dan sebagainya. Selain itu beberapa contoh juga mengambil tujuan bagaimana cara membuat animasi 2D dengan lebih banyak menulis program, dibanding pengolahan gambar menggunakan software image processing seperti Corel Draw atau Photoshop. Dengan mempelajari source code ini diharapkan anda dapat menguasai dasar bagaimana melakukan atau menerapkan algorithma dalam bentuk kode program untuk pembuatan game 2D ...
Baca selengkapnya

Algorithma Bilangan Prima dengan Javascript

Oleh Uboiz -
Gambar
Untuk belajar pemrograman tingkat dasar, Javascript dapat digunakan untuk mengimplementasikan perhitungan sederhana. Di bawah ini adalah contoh kode Javascript untuk mencari deret bilangan prima sampai angka yang diinputkan. Selain kode berisi algorithma bagaimana mendeteksi bilangan prima, kode javascript juga berisi cara mendeteksi input berupa bilangan angka atau tidak. <html> <head> <title>Prime Algorithm</title> </head> <body> Input : <input type= "text" id= "input" /><button type= "button" onclick= "CalcPrime()" >Calculate</button><br/><br/> Hasil : <span id= "hasil" ></span> <script> function CalcPrime() { var a=document.getElementById( "input" ).value; document.getElementById( "hasil" ).innerHTML= "" ; if (!isNaN(a) && a>=0){ for (i=2;i<a;i++){ var ketemu= false ...
Baca selengkapnya