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.