Membuat Teka Teki Silang (TTS) sederhana dengan HTML CSS dan JavaScript

Kharisma Rizqi Bakhittah
Nov 4 · 6 min read

Belakangan ini saya mendapat tugas mata kuliah Pengembangan Aplikasi Web. Saya diharuskan membuat teka teki silang dalam rangka mempelajari JavaScript, Selepas diberi tugas tersebut saya langsung dong browsing di google. akan tetapi yang saya temukan terlalu rumit dan rata-rata menggunakan framework JavaScript. Oleh karena itu saya bertekad menemukan sendiri caranya.

2 Minggu berselang akhirnya saya dapat menyelesaikan pembuatan TTS tersebut secara scratch. Mungkin ini produk pertama saya yang dibuat dari nol. dan saya ingin membagikan hasil kerja saya agar teman-teman senasib yang diberi tugas seperti saya lebih mudah untuk menemukan solusi

Tugas TTS saya

Langkah pertama yang harus dilakukan adalah buat Kerangka TTSnya menggunakan HTML, disini saya memanfaatkan elemen table, dan juga sedikit menggunakan bantuan Bootstrap, maka terlebih dahulu kita kunjungi dokumentasi pada getbootstrap.com lalu pilih Get Started, pada bagian starter template klik copy

Starter Template

Lalu buka kode editor favorit anda, disini saya menggunakan vscode. maka kalian akan memiliki kode berikut

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

disini saya tidak akan terlalu banyak membahas mengenai bootstrap. oke langsung saja kita buat tabel nya dimulai dari baris pertama

Code untuk tabel

maka jika anda membukanya pada browser maka akan tampil sebaris tabel yang memiliki sembilan kolom

belum terlihat seperti TTS? sabar dulu, mari kita tambahkan css pada file tersebut, pada tiap elemen pada tabel kita telah menambahkan class block. Nah kita akan memanfaatkan class ini pada css. marikita buat file css bernama style.css

setelah itu hubungkan file css dengan html kita dengan menambahkan link pada bagian head,

<link rel="stylesheet" href="style.css">

maka tampilannya sekarang akan seperti ini

Lalu lanjutkan dengan membuat baris selanjutnya, maka code tabel akan menjadi seperti ini

dan tampilannya akan menjadi seperti ini

tabel yang sudah lengkap

jika kalian perhatikan saya telah menambahkan class pada tiap inputnya, ada yang d1, d2, m2, dan yang lainnya. maksudnya adalah d adalah datar dan 1 adalah nomor soalnya. jadi dapat diartikan d1 adalah 1 mendatar, sedangkan untuk m adalah menurun sehingga m2 adalah 2 menurun.

saya memberi class pada setiap input sesuai dengan teka teki apa yang akan diisikan pada kotak tersebut. ini akan berguna untuk javascript

Sekarang mari kita buat soalnya, dan tambahkan tombol. Cara kerja TTS ini adalah pemain harus terlebih dahulu mengklik tombol pilih untuk mengisi kotak, jadi pemain tidak bisa langsung mengisi pada kotak

jika anda perhatikan saya memberikan attribut name pada button sesuai dengan soalnya, attribut name ini akan berguna pada javascript nanti. Maka tampilan akan seperti ini.

Mari kita buat javascriptnya, buatlah file difolder yang sama dengan nama tts.js dan isilah dengan kode berikut

tts.js

lalu jangan lupa hubungkan html dengan js

<script src="tts.js"></script>

Maka ketika button pilih ditekan akan langsung menuju input yang sesuai dengan nomor teka teki. dan ketika kotak tersebut diisi focus input akan berpindah pada kotak selanjutnya. dan jika jawaban benar maka input akan berubah kondisi menjadi disable

mari kita bedah kode javascriptnya

const btn = document.querySelectorAll("body button"); btn.forEach(function (pil) {
pil.addEventListener('click', function () {
let namebtn = pil.getAttribute('name');
geserCek(namebtn);});
});

kode diatas adalah untuk memanggil semua button yang ada dibody dan menambahkan nya event listener, sehingga kita tidak perlu repot-repot menambahkan eventlistener pada masing-masing button. didalam fungsi tersebut juga memanggil fungsi geserCek dengan para meter namebtn. namebtn disini adalah attribut name dari button yang sudah saya jelaskan tadi, jika button nya mengandung attribut name d1, maka input akan tetuju ke kotak yang memiliki class name d1. mari kita lihat fungsi geserCek

function geserCek(nbtn) {
const table = document.querySelectorAll('.' + nbtn);
if (table[0].disabled == true) {
autoNext(0, nbtn);
}else {
table[0].select();
}
for (let i = 0; i < table.length; i++){
table[i].addEventListener('input', function () {
if (i == table.length - 1) {
var concatString = catString(nbtn);
submitString(concatString, nbtn, table);
} else if (i == table.length - 2 && table[table.length -
1].disabled == true) {
var concatString = catString(nbtn);
submitString(concatString, nbtn, table);
} else {
autoNext(i, nbtn);
var concatString = catString(nbtn);
submitString(concatString, nbtn, table);
}
});
}
}

fungsi geserCek menangkap parater namebtn dan digunakan untuk memanggil input kotak yang memiliki name yang sama dengan namebtn, ini akan menghasilkan array. sehingga ketika diklik maka input akan otomatis pindah pada input kotak pertama yaitu table[0] dan jika table[0] sudah terisi maka input akan pindah otomatis ke tabel selanjutnya

didalam fungsi ini juga ada pengulangan yang berisi fungsi autonext() yang menjadikan input kotak ketika diisikan sesuatu maka akan otomatis pindah ke tabel selanjutnya, dan jika sudah ada pada tabel terakhir maka huruf yang sudah kita isi tadi akan digabung dengan fungsi catString() dan dicek kebenarannya dengan fungsi submitString()

sekarang mari kita bedah fungsi autoNext()

function autoNext(i, cn) {
let d = document.querySelectorAll('.' + cn);
if (d[i + 1].disabled == true) {
d[i + 2].select();
} else {
d[i + 1].select();
}
}

fungsi ini memiliki dua parameter i adalah untuk mengambil index mana yang saat ini sedang diisi. maka fungsi ini akan menambah indexnya sehingga bisa berpindah ke input kotak selanjutnya. dan ada juga parameter cn ini untuk mengambil namabtn untuk menyeleksi semua elemen yang memiliki nama class yang sama dengan namabtn dan menjadikannya dalam bentuk array. disini kita juga menggunakan fungsi select() bawaan javascript untuk memindahkan focus sekaligus menyeleksi input kotak yang ingin dituju

selanjutnya mari kita bahas fungsi catString()

function catString(cn) {
var concat = "";
let d = document.querySelectorAll('.' + cn);
for (let i = 0; i < d.length; i++) {
concat += d[i].value;
}
return concat;
}

fungsi ini memiliki parameter cn yakni classname dari input yang akan kita gabung isinya, fungsi ini akan menyeleksi semua input yang memiliki classname sesuai paramter dan menggabungkan isinya menjadi satu yang disini disimpan dalam variabel concat, dan nilai balik itu akan diproses oleh fungsi submitString() untuk dicek kebenarannya

function submitString(concat, tipe, tabel) {
if (concat.toUpperCase() == "ABC" && tipe == "d1") {
pengulanganTabel(tabel);
}

disini saya hanya akan menjelaskan untuk satu jawaban saja. submitString memiliki 3 parameter, yakni concat adalah string isian yang sudah digabung, tipe adalah nama btn, dan table adalah seluruh input yang memiliki nama class yang sesuai namabtn dalam bentuk array. jika concat sesuai dengan jawabannya dan tipe sesuai dengan soalnya maka fungsi pengulangan table akan dijalankan

function pengulanganTabel(table) {
for (let j = 0; j < table.length; j++) {
table[j].disabled = true;
}
}

fungsi ini berguna untuk membuat tabel yang isinya benar tidak bisa diisi lagi, untuk sementara tampilannya akan menjadi abu abu, kalian bisa menambahkan css dan membuat tampilannya jadi berwarna hijau.

Sisanya tinggal lanjutkan sampai selesai yaa. saya sudah sampaikan dasar dasar fundamental dari tts ini. mohon maaf bila penyampaian materinya masih kurang karena saya baru mulai menulis hehe.

untuk source code nya bisa kalian lihat dilink berikut

Sekian Terima Kasih, Semoga Bermanfaat:)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade