Bulls & Cows — Bringing a Pen-and-Paper Classic to the Browser (No AI, No Frameworks, Just JS)

#javascript #webdev #gamedev #programming

Lately, I’ve been feeling nostalgic 🤓.

When I was a kid, I used to play a pen-and-paper logic game called Picas y Fijas (also known as Bulls and Cows). So, I decided to build my own digital version — no AI, no frameworks, just pure HTML, CSS, and vanilla JavaScript.

🎮 Try it here: bulls.yosola.co
💻 Source code: github.com/Yosolita1978/bullsandcows

It’s a quick game (around 3 minutes per round), bilingual (English/Spanish), and requires no registration. Just open it and start guessing!

✨ How It Works (and Why It’s So Simple)

The entire game runs on basic JavaScript — no frameworks, no libraries, and no AI logic under the hood.
It’s the kind of code you can actually read, understand, and modify in one sitting.

Here are the main functions that power the logic 👇

1️⃣ Generating the Secret Number

function generateSecretNumber() {
  const digits = [];
  while (digits.length < 4) {
    const randomDigit = Math.floor(Math.random() * 10).toString();
    if (!digits.includes(randomDigit)) digits.push(randomDigit);
  }
  return digits.join('');
}

Creates a 4-digit number with no repeated digits.
Simple Math.random() and array checking — no fancy imports.

2️⃣ Comparing the Guess

function getBullsAndCows(secret, guess) {
  let bulls = 0, cows = 0;
  for (let i = 0; i < secret.length; i++) {
    if (guess[i] === secret[i]) bulls++;
    else if (secret.includes(guess[i])) cows++;
  }
  return { bulls, cows };
}

Checks exact matches (bulls) and misplaced matches (cows).
Uses a classic double-loop logic that every coder has probably written once in their life.

3️⃣ Updating the UI

function updateResult(guess, bulls, cows) {
  const row = document.createElement('tr');
  row.innerHTML = `
    <td>${guess}</td>
    <td>${bulls}</td>
    <td>${cows}</td>
  `;
  document.querySelector('#results tbody').appendChild(row);
}

Minimal DOM manipulation — just creating and appending rows to show your guesses.
Keeps the focus on logic, not on libraries.

🧬 Why I Built It This Way

With so many projects relying on AI and frameworks today, I wanted to build something that reminds us of the joy of pure logic and simplicity.
No dependencies, no build tools — just a small web app that works anywhere.

You can even view source, copy the code, and tweak it for your own version (like changing the number of digits or styling your own board).

🎯 Challenge for You

Try to guess the secret number in fewer than 7 attempts.
I’d love to hear how you did — comment your best score below 👇

👉 Play Bulls & Cows

🧩 Tech Summary

Feature	Details
Stack	HTML, CSS, Vanilla JS
Languages	English / Spanish toggle
Repo	Yosolita1978/bullsandcows
Gameplay	4-digit logic puzzle, “bulls” = right place, “cows” = right number wrong place