Game on console.log()?

The most important tool in the shed for all developers is console.log(). It is possible to make it a unique way to interact with users, many websites (mostly CTF) use them as a way to recruit developers or hide clues to progress the levels.

Recently I engulfed myself with HTTP Vadivelu and I am really proud of this project although very simple but it has attracted several users. Often I check my logs to find the source of traffic from Zoho and Freshworks, two IT giants in India which give me immense happiness.

So I decided to find a way to incentivize the developers and curious minds who try to check out the developers console. So I started placing easter eggs such as, Random dialogs from Vadivelu movies and
GIFs in developers console. Nesamani vs Hammer (tic-tac-toe) on the console.

This article is going to cover only the tic-tac-toe game not in the UI but in the console. The game is simple to play but coding it is a good exercise in any language. Most examples were using arrays and 2d arrays but I am going to use objects (There isn’t anything objects can’t do that arrays can, it just gives you a little more control and produces a cleaner code imo). Let’s dive into the code now. But if you are in a hurry to see the game go here and type play(1,1) enter your own number.

The base setup

//prompt the player.
console.log("Pssst!.... Want to play tic-tac-toe?\
nUse play(r,c) First argument is Row, Second argument is Column"); 
const player = "🏃🏾"; // ❌ if you need the classic
const computer = "🔨"; // ⭕
const noplayer = "➖";
let maxMoves = 9;
let currentMove = 0;

let boardobject = {
  "0_0": noplayer,
  "0_1": noplayer,
  "0_2": noplayer,
  "1_0": noplayer,
  "1_1": noplayer,
  "1_2": noplayer,
  "2_0": noplayer,
  "2_1": noplayer,
  "2_2": noplayer,
}

The game logic is pretty straight forward

function validateMove(x, y, z) {

  let currentPlayer = z;
  let check = boardobject[`${x}_${y}`]
  if (check == noplayer) {
    currentMove = currentMove+1;
    boardobject[`${x}_${y}`] = currentPlayer;
    if (victory(z)) {
      console.log("%c GGWP", `font-size:40px`)
      return 2;
    } else {
      console.clear();
      return 1;
    }
  } else {

    if(currentMove < maxMoves) {
      console.log("%c INVALID MOVE!", `font-size:40px;color:crimson`)
      return 0;
    }


    else {
      console.log("%c Game over!", `font-size:40px;color:crimson`)
    }
  }

}

This is code for computer without AI. Makes possible move using Math().

function computerTurn() {
  if(currentMove === 9) {
    console.log("%c Game Tie!", `font-size:40px;color:crimson`)
    return 2;
  }
  let nextMove = []
  for(let key in boardobject) {
    if(boardobject[key] == noplayer) {
      let index = key.split("_");
      let pos = [index[0],index[1]];
      nextMove.push(pos);
    }
  }
  let computerMove = nextMove[Math.floor(Math.random() * nextMove.length)];


  let c = validateMove(computerMove[0], computerMove[1], computer);
  if (c === 0) {
    computerTurn();
  }

}

The rest of the code is in the repo https://github.com/anoram/http-vadivelu

The code that triggers the game play(row,col) . 3x3 so it starts from 0,0 to 2,2 which are the coordinates. So executing play(0,0) will result in this and the computer will make a valid move on available spaces and eventually you will run out of moves and trigger either a win state or tie state.

Win State

Loss State

Draw State

PS. The image in console is from this library it makes the job little easier. I have slightly modified it. Check of the issue in that repo. Also this only works on Chromium based browsers!

PPS. There isn't a CPU AI yet. But it was a fun little project.

Link to the repo https://github.com/anoram/http-vadivelu

Enjoy.