random

by MD Hasan Patwary

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Creature Patterns with Numbers</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="number-container"></div>
  <script src="script.js"></script>
</body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

#number-container {
  display: grid;
  grid-template-columns: repeat(30, 1fr); /* 100 numbers per row */
  grid-gap: 1px;
}

.number {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  cursor: pointer;
}

.active {
  background-color: #4caf50;
  color: white;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const numberContainer = document.getElementById('number-container');
  const totalNumbers = 660; // 14 rows of 100 numbers each
  const columns = 30; // Number of columns in the grid

  // Create and append numbers from 1 to 100
  for (let i = 1; i <= totalNumbers; i++) {
    const numberElement = document.createElement('div');
    numberElement.classList.add('number');
    numberElement.textContent = i;
    numberContainer.appendChild(numberElement);
  }

  // Predefined creature patterns (e.g., 4x4 grid patterns using numbers)
  const creatures = [
    [
      [true, false, true, false],
      [false, true, false, true],
      [true, false, true, false],
      [false, true, false, true],
    ],
    [
      [true, true, false, false],
      [true, false, false, true],
      [false, true, true, false],
      [false, false, true, true],
    ],
    [
      [false, false, false, true],
      [false, true, true, false],
      [false, true, false, false],
      [true, false, false, false],
    ],
  ];

  // Function to clear all active classes from numbers
  function clearNumbers() {
    for (let i = 0; i < totalNumbers; i++) {
      numberContainer.children[i].classList.remove('active');
    }
  }

  // Function to place a creature pattern at a random position
  function placeCreature() {
    clearNumbers(); // Clear previous creature
    const randomCreature = creatures[Math.floor(Math.random() * creatures.length)];
    const creatureRows = randomCreature.length;
    const creatureCols = randomCreature[0].length;

    // Calculate a random position to place the creature in the grid
    const randomRow = Math.floor(Math.random() * (totalNumbers / columns - creatureRows));
    const randomCol = Math.floor(Math.random() * (columns - creatureCols));

    // Place the creature in the grid by adding the 'active' class
    for (let row = 0; row < creatureRows; row++) {
      for (let col = 0; col < creatureCols;...