بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
GAME TIC TAC TOE adalah sebuah game yang dimana mempertandingkan antara dua orang atau dua tim (biasanya jarang, red) dengan cara membuat sejajar simbol X atau O secara Vertikal, Horizontal maupun Diagonal pada sebuah papan kotak-kotak berwarna selang-seling hitam dan putih. Game Tic Tac Toe memang tidak sepopuler game online yang bertebaran di dunia maya yang sering dimainkan anak-anak usia remaja atau sekolah. Tapi bukan berarti game tersebut kurang peminat, malah game itu sekarang sering dipertandingkan di tingkat negara.
Secara, memang permainan unik ini sangat menarik sekali mengingat semua orang tidak akan mengalami kesulitan ketika memainkannya. Karena permainan tersebut tidak membutuhkan pemikiran yang mendalam dan sangat gampang dilakukan oleh semua kalangan, bahkan oleh anak kecil sekalipun. Dalam situasi santaipun game tetap bisa dilakukan. Dan waktu luang yang begitu panjang bisa digunakan untuk bersantai dan memainkan game ini. Berdua dengan saudara atau teman juga bisa.
Namun, hingga sekarang pembuat game Tic Tac Toe belum diketahui siapa sebenarnya. Tapi alih-alih memperdebatkan dari mana asalnya dan juga pembuatnya, permainan ini sudah terlanjur populer di kalangan anak muda. Terkadang hampir semua orang tidak peduli dengan siapa sih pembuatnya, bagaimana game itu bisa muncul dan populer dan bagaimana trik jitu agar menang. Mereka seolah-olah hanya memainkan saja. Ya memang begitulah dunia game, yang penting main dan hati pun senang.
Dan sesuai perkembangan jaman, maka tidak sebatas aplikasi untuk membuatnya. Dengan bahasa pemrograman dan ditampilkan pada sebuah blog pun, permainan ringan ini bisa diterapkan. Bahasa yang mendukung pembuatan game ini adalah CSS, ringan, ringkas dan praktis. Cara pemakaiannya juga tergolong mudah. Mau coba? Silakan simak tutorial berikut ini sampai habis membacanya, jangan setengah-setengah. Supaya nanti bisa terpahami dengan baik.
Berikut akan saya tampilkan contohnya dan juga cara pembuatannya, jadi simak yuk guys
Kreasi Game Tic Tac Toe Menggunakan CSS3
1. Klik Tema
2. Pilih Sesuaikan : Edit HTML
3. Setelah masuk template, cari kode ]]></b:skin>
4. Tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut.
*{padding:0;margin:0;box-sizing:border-box;font-family:"Raleway",sans-serif;}
body{height:100vh;background:linear-gradient(135deg,#8052ec,#d161ff);}
html{font-size:16px;}
.wrapper{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;}
.container{width:70vmin;height:70vmin;display:flex;flex-wrap:wrap;gap:2vmin;}
.button-option{background:#ffffff;height:22vmin;width:22vmin;border:none;border-radius:8px;font-size:12vmin;color:#d161ff;box-shadow:0 0 15px rgba(0,0,0,0.1);}
#restart{font-size:1.3em;padding:1em;border-radius:8px;background-color:#0a0027;color:#ffffff;border:none;position:relative;margin:1.5em auto 0 auto;display:block;}
.popup{background:linear-gradient(135deg,#8052ec,#d161ff);height:100%;width:100%;position:absolute;display:flex;z-index:2;align-items:center;justify-content:center;flex-direction:column;gap:1em;font-size:12vmin;}
#new-game{font-size:0.6em;padding:0.5em 1em;background-color:#0a0027;color:#ffffff;border-radius:0.2em;border:none;}
#message{color:#ffffff;text-align:center;font-size:1em;}
.popup.hide{display:none;}Lanjut :
5. Cari kode </body> dan tempelkan kode dibawah ini diatas kode </body> itu
<script type='text/javascript'>
//<![CDATA[
let btnRef = document.querySelectorAll(".button-option");let popupRef = document.querySelector(".popup");let newgameBtn = document.getElementById("new-game");let restartBtn = document.getElementById("restart");let msgRef = document.getElementById("message");//Winning Pattern Array
let winningPattern = [
[0,1,2],[0,3,6],[2,5,8],[6,7,8],[3,4,5],[1,4,7],[0,4,8],[2,4,6],];//Player 'X'plays first
let xTurn = true;let count = 0;//Disable All Buttons
const disableButtons = () =>{btnRef.forEach((element) =>(element.disabled = true));//enable popup
popupRef.classList.remove("hide");}
;//Enable all buttons (For New Game and Restart)
const enableButtons = () =>{btnRef.forEach((element) =>{element.innerText = "";element.disabled = false;}
);//disable popup
popupRef.classList.add("hide");}
;//This function is executed when a player wins
const winFunction = (letter) =>{disableButtons();if (letter == "X"){msgRef.innerHTML = "🎉<br>'X'Wins"}
else{msgRef.innerHTML = "🎉<br>'O'Wins"}}
;//Function for draw
const drawFunction = () =>{disableButtons();msgRef.innerHTML = "😎<br>It's a Draw"}
;//New Game
newgameBtn.addEventListener("click",() =>{count = 0;enableButtons();}
);restartBtn.addEventListener("click",() =>{count = 0;enableButtons();}
);//Win Logic
const winChecker = () =>{//Loop through all win patterns
for (let i of winningPattern){let [element1,element2,element3] = [
btnRef[i[0]].innerText,btnRef[i[1]].innerText,btnRef[i[2]].innerText,];//Check if elements are filled
//If 3 empty elements are same and would give win as would
if (element1 != ""&&(element2 != "") &(element3 != "")){if (element1 == element2 &&element2 == element3){//If all 3 buttons have same values then pass the value to winFunction
winFunction(element1);}};}}
;//Display X/O on click
btnRef.forEach((element) =>{element.addEventListener("click",() =>{if (xTurn){xTurn = false;//Display X
element.innerText = "X";element.disabled = true;}
else{xTurn = true;//Display Y
element.innerText = "O";element.disabled = true;}
//Increment count on each click
count += 1;if (count == 9){drawFunction();}
//Check for win on every click
winChecker();}
);}
);//Enable Buttons and disable popup on page load
window.onload = enableButtons;
//]]>
</script>6. Lanjut terakhir masuk ke Halaman kosong manapun dan tempelkan kode dibawah di konten kosong yang tersedia disitu
<div class="wrapper">
<div class="container">
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
</div>
<button id="restart">Mulai</button>
</div>
<div class="popup hide">
<p id="message">Contoh Pesan</p>
<button id="new-game">Mulai Lagi</button>
</div>Nah setelah semua dilakukan dengan sempurna, teliti lagi jangan sampai ada yang terlewat. Karena kesalahan satu huruf saja, tidak bakalan tampil ini gamenya. Setelah semua dilakukan, saatnya lihat di blog kamu, pasti sudah jadi khan. Silakan main Tic Tac Toe dengan temanmu atau sahabatmu. Jangan sampai kalah ya hehe. Terima kasih yang sudah mampir disini ya. Semoga artikel Kreasi Game Tic Tac Toe Menggunakan CSS3 menjadi salah satu pelajaran bagi kita semua. Karena dengan CSS3 yang dipadukan dengan HTML dan Javascript mampu memberikan kreasi sebuah game yang memuaskan. Apalagi bila dipadukan lagi dengan bahasa pemrograman lainnya yang tidak kalah bagusnya. Mungkin kreasi dari game Tic Tac Toe akan semakin variatif. So, we learn coding very well.
Label Postingan :
CSS
,
Javascript
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Kreasi Baru Game Tic Tac Toe Menggunakan Trik CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
