Game on console.log()?
Tags: javascript, tutorial
Published: 2020-06-14 18:47:33

{%youtube SSejHHw9zzY%}


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](https://vadivelu.anoram.com/?source=devto) 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](https://en.wikipedia.org/wiki/Pray_for_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](https://vadivelu.anoram.com/?source=devto) and type play(1,1) enter your own number.

The base setup
```js
//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

```js
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().

```js
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
![Win State](https://dev-to-uploads.s3.amazonaws.com/i/qpbin81xh0xz2qg1v657.jpg)

#### Loss State
![Loss State](https://dev-to-uploads.s3.amazonaws.com/i/q4u6miejej28epkr6yh1.jpg)

#### Draw State
![Draw State](https://dev-to-uploads.s3.amazonaws.com/i/hpdkettab1ad8l9okytl.jpg)


###### PS. The image in console is from this [library](https://github.com/adriancooney/console.image) 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.