coding Arsip - Farazinux

Source Code Game Tic Tac Toe Google

iPunx — Wed, 15 Feb 2023 01:36:14 +0000

Source code game google – Salah satu game jadul tapi tetap menarik adalah Tic Tac Toe. Dulu kita memainkan game ini dengan membuat kotak-kotak pada buku untuk mengusir kebosanan saat menunggu jam pelajaran di kelas.

Nah, saat ini jaman sudah berubah. Game seperti ini dapat kita mainkan secara online, bahkan sudah disediakan oleh Google. Namun, tahukah anda bahwa game seperti itu juga dapat kita buat dengan mudah dengan bahasa pemrograman html, css dan javascript.

Berikut ini adalah sorucecode game Tic Tac Toe layaknya yang disediakan oleh google. Anda dapat copas dari sourcecode di bawah ini. Buat 3 file yaitu index.html, style.css dan script.js. Penjelasan selengkapnya silahkan simak di bawah ini.

1. HTML

(Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML digunakan untuk memberi struktur dan format pada konten halaman web, seperti teks, gambar, video, dan audio.

Sehingga dari devinisi di atas, dalam membuat game Tic Tac Toe Google ini, kita membutuhkan script html untuk membuat kerangka game. Dengan html ini, maka game Tic Tac Toe Google dapat berjalan dengan baik di web browser.

Langkah pertama untuk membuat game tic tac toe Google ini adalah membuat folder yang akan menampung tiga file, yaitu html, css dan javascript. Setelah folder anda siap silahkan buat file index.html kemudian copy sorucecode di bawah ini kemudian paste ke file index.html.




    Tic Tac Toe
    


    
        Tic Tac Toe

2. CSS

(Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk memformat dan memperindah halaman web. CSS digunakan bersama dengan HTML dan JavaScript untuk membuat halaman web yang menarik dan interaktif.

Agar tampilan game tic tac toe google yang kita buat lebih menarik dan interaktif, maka css adalah solusinya. Dengan css ini maka tampilan akan lebih menarik.

Silahkan anda buat file style.css pada folder yang sama dengan index.html, kemudian copy dan pastekan sourcecode di bawah ini.

.container {
    margin: 50px auto;
    text-align: center;
}

#board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 10px;
    width: 300px;
    height: 300px;
    margin: 20px auto;
}

.square {
    background-color: #8f0404;
    border: 2px solid #000;
    font-size: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.square:hover {
    background-color: #f5f5f5;
}

#message {
    margin: 20px 0;
    font-size: 24px;
    font-weight: bold;
}

#reset {
    background-color: #790404;
    border: 2px solid #000;
    font-size: 18px;
    padding: 10px 20px;
    cursor: pointer;
}

#reset:hover {
    background-color: #f5f5f5;
}


.square.x::before {
  content: 'X';
}

.square.o::before {
  content: 'O';
}

3. JAVASCRIPT

JavaScript adalah bahasa pemrograman yang sering digunakan untuk membuat halaman web yang interaktif dan dinamis. Fungsi dari JavaScript adalah digunakan bersama dengan HTML dan CSS untuk membuat aplikasi web, game, animasi, dan banyak hal lainnya.

Sehingga dengan javascript, game tic tac toe google akan lebih interaktif dan dapat dijalankan. Silahkan buat file dengan nama script.js pada folder yang sama dengan index.html dan style.css, kemudian copy dan pastekan sourcecode di bawah ini.

const squares = document.querySelectorAll('.square');
const message = document.getElementById('message');
const resetButton = document.getElementById('reset');
let playerTurn = true;
let gameOver = false;
let board = ['', '', '', '', '', '', '', '', ''];

// Function to check if the game is over
function checkGameOver() {
  // Check rows
  for (let i = 0; i < 9; i += 3) {
    if (board[i] !== '' && board[i] === board[i + 1] && board[i] === board[i + 2]) {
      gameOver = true;
      return board[i];
    }
  }
  // Check columns
  for (let i = 0; i < 3; i++) {
    if (board[i] !== '' && board[i] === board[i + 3] && board[i] === board[i + 6]) {
      gameOver = true;
      return board[i];
    }
  }
  // Check diagonals
  if (board[0] !== '' && board[0] === board[4] && board[0] === board[8]) {
    gameOver = true;
    return board[0];
  }
  if (board[2] !== '' && board[2] === board[4] && board[2] === board[6]) {
    gameOver = true;
    return board[2];
  }
  // Check for tie
  if (!board.includes('')) {
    gameOver = true;
    return 'tie';
  }
  return '';
}

// Function to reset the game
function reset() {
  playerTurn = true;
  gameOver = false;
  board = ['', '', '', '', '', '', '', '', ''];
  message.textContent = '';
  squares.forEach(square => {
    square.classList.remove('x');
    square.classList.remove('o');
    square.removeEventListener('click', makeMove);
    square.addEventListener('click', makeMove);
  });
}

// Function to make a move
function makeMove(event) {
  if (gameOver) return;
  const square = event.target;
  const index = Array.from(squares).indexOf(square);
  if (board[index] !== '') return;
  board[index] = playerTurn ? 'x' : 'o';
  square.classList.add(playerTurn ? 'x' : 'o');
  square.removeEventListener('click', makeMove);
  const winner = checkGameOver();
  if (winner !== '') {
    if (winner === 'tie') {
      message.textContent = "It's a tie!";
    } else {
      message.textContent = `${winner.toUpperCase()} wins!`;
    }
    gameOver = true;
    return;
  }
  playerTurn = !playerTurn;
  if (!playerTurn) {
    // Make computer move
    const availableSquares = Array.from(squares).filter(square => !square.classList.contains('x') && !square.classList.contains('o'));
    const randomIndex = Math.floor(Math.random() * availableSquares.length);
    availableSquares[randomIndex].dispatchEvent(new Event('click'));
  }
}

// Initialize the game
resetButton.addEventListener('click', reset);
squares.forEach(square => {
  square.addEventListener('click', makeMove);
});

Setelah selesai paste sourcecode di atas, jangan lupa anda simpan (save). Sedangkan untuk menjalankan game tic tac toe google ini cukup anda klik double file index.html atau open dengan browser kesayangan anda, sangat mudah kan?

Demikianlah source code game google Tic Tac Toe yang dapat anda buat sendiri dengan mudah dan cepat. Anda juga dapat mengembangkan dan memodifikasi game ini. Terus ikuti farazinux.com untuk mendapatkan update terbaru.

Artikel Source Code Game Tic Tac Toe Google pertama kali tampil pada Farazinux.

Membuat Navbar Keren dengan HTML dan CSS

iPunx — Fri, 06 May 2022 23:40:07 +0000

Membuat navbar keren tidak begitu sulit. Hanya dengan html dan css kita sudah dapat membuat navbar yang keren tanpa harus menggunakan plugin.

Untuk membuatnya ikuti langkah-langkah sebagai berikut:

Pertama – Siapkan Folder dan File

Langkah pertama, buatlah folder penampung, gambar logo, file html dan css. Logo usahakan berjenis svg atau png yang tidak memiliki background.

Selanjutnya logo dimasukkan ke dalam folder image. Sedangkan file index.html dan style.css silahkan dibuat dalam folder navbar. Sehingga terbuat struktur file semacam ini.

Kedua – Buatlah Coding di index.html

Selanjutnya buatlah coding pada file index.html. File index.html adalah file yang akan kita buka pada browser. Dengan file ini kita buat struktur html yang akan kita tampilkan pada web browser.

Untuk mempercepat codingan sebaiknya gunakan text editor terbaik anda. Seperti Visual Studio Code, SublimeText, Notepad++, Atom atau editor keren lainnya.

Untuk membuat navbar yang cantik, kita harus mengatur kode html di atas dengan code CSS. Akan kita jabarkan sebagai berikut.

Ketiga – Membuat File CSS

Mengimport Google Font

Agar kita dapat menggunakan font yang bagus, kita dapat mengambil font dari google. Silahkan perhatikan code berikut untuk mengambil font Montserrat dari google.

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

Mengatur Background

Untuk mengatur background pada navbar pada browser, gunakan css berikut ini.

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #0522b5;
}

Mengatur tag li, a dan button

Untuk mengatur jenis, warna dan ukuran font pada tag li, a dan button silahkan buat codingan seperti ini.

li, a, button{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #edf0f1;
    text-decoration: none;
}

Pengaturan Header

Kita akan mengatur header dengan metode flex. Jadi ini adalah rahasia di mana navbar yang kita buat akan semakin keren. Untuk pengaturannya di sini saya buat dua jenis, yang saya jadikan comment bisa dirubah jadi aktif dengan code di atasnya.

header{
    display: flex;
    justify-content: space-between;
    /* justify-content: flex-end; */
    align-items: center;
    padding: 30px 10%;
}

Pada pengaturan justify-content space-between akan menyebar navbar kanan maupun kiri. Sedangkan apabila kita mengaktifkan flex-end, maka navbar akan cenderung di sebelah kanan.

Posisi Logo

Pengaturan posisi logo dapat dilihat pada codingan berikut ini.

.logo{
    cursor: pointer;
    margin-right: auto;
}

Mengatur Interaksi NavLink

Navlink harus diatur sedemikian rupa agar ketika ada interaksi terjadi efek-efek yang keren. Selain itu navlink yang sudah kita buat juga harus kita atur agar berjajar seperti yang kita inginkan.

Untuk mengatur navlink seperti pada gambar di atas, mari kita lihat code-code berikut ini.

.nav__links{
    list-style: none;
}

.nav__links li{
    display: inline-block;
    padding: 0px 20px;
}

.nav__links li a{
    transition: all 0.3s ease 0s;
}

.nav__links li a:hover{
    color: #0088a9;
}

Interaksi Button

Selain komponen navlink, kita juga telah membuat satu buah button, untuk mengatur button yang telah kita buat di html, berikut ini adalah contoh codingan untuk mengatur tombol (button) dengan css.

button{
    padding: 9px 25px;
    background-color: rgba(0,136,169,1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

button:hover{
    background-color: rgba(0,136,169,0.8);
}

Anda dapat merubah sesuai dengan keinginan anda. Karena di atas adalah code html dan css yang bisa dengan sangat mudah kita pahami dan kita modifikasi.

Untuk lebih memperjelas tutorial kali ini, silahkan disimak pada video berikut ini.

Video Tutorial Membuat Navbar HTML dan CSS

Untuk lebih mempermudah pemahaman kita terhadap codingan membuat navbar dan CSS, silahkan disimak baik-baik video berikut ini. Pada video juga kami sertakan link sourcecode dan password file akan kami tampilkan di dalam video. Jadi simak baik-baik videonya untuk mendapatkan password file tersebut.

Download Source Code Navbar HTML dan CSS

Untuk mengunduh file sourcecode Navbar HTML dan CSS silahkan click pada tautan berikut ini.

Selamat mencoba membuat navbar yang keren dengan hanya menggunakan HTML dan CSS.

Artikel Membuat Navbar Keren dengan HTML dan CSS pertama kali tampil pada Farazinux.