Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vowel Team Connect 4</title>
<style>
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background: #f0f8ff;
}
h1 {
  margin-bottom: 5px;
}
#currentPlayer {
  font-size: 20px;
  margin: 10px;
}
.board {
  display: grid;
  grid-template-columns: repeat(7, 80px);
  grid-template-rows: repeat(6, 80px);
  gap: 5px;
  justify-content: center;
  margin: 20px auto;
}
.cell {
  width: 80px;
  height: 80px;
  background: #ffffff;
  border-radius: 10px;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
.ee { background-color: #4CAF50; color: white; }
.ea { background-color: #2196F3; color: white; }
.ey { background-color: #FF9800; color: white; }
button {
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 10px;
}
</style>
</head>
<body>

<h1>Vowel Team Connect 4</h1>
<div id="currentPlayer">Current Team: EE</div>
<div class="board" id="board"></div>
<button onclick="resetGame()">Restart Game</button>

<script>
const rows = 6;
const cols = 7;
let currentPlayer = "ee";
let board = [];

const words = [
  "tree","play","seat","bee","leaf","key","feet",
  "team","green","day","meal","see","read","they",
  "sleep","eat","three","gray","sea","need","way",
  "dream","keep","lead","hey","mean","week","stay",
  "deep","teach","street","peach","free","break","eyelid",
  "clean","heat","sheep","year","real","meet","prey"
];

function createBoard() {
  const boardDiv = document.getElementById("board");
  boardDiv.innerHTML = "";
  board = [];
  let wordIndex = 0;

  for (let r = 0; r < rows; r++) {
    board[r] = [];
    for (let c = 0; c < cols; c++) {
      const cell = document.createElement("div");
      cell.classList.add("cell");
      cell.dataset.row = r;
      cell.dataset.col = c;
      cell.textContent = words[wordIndex];
      board[r][c] = "";
      wordIndex++;
      cell.addEventListener("click", () => handleMove(r, c, cell));
      boardDiv.appendChild(cell);
    }
  }
}

function handleMove(row, col, cell) {
  if (board[row][col] !== "") return;

  let correct = false;
  const word = cell.textContent;

  if (currentPlayer === "ee" && word.includes("ee")) correct = true;
  if (currentPlayer === "ea" && word.includes("ea")) correct = true;
  if (currentPlayer === "ey" && word.includes("ey")) correct = true;

  if (!correct) {
    alert("Oops! That word does not match your vowel team.");
    return;
  }

  board[row][col] = currentPlayer;
  cell.classList.add(currentPlayer);

  if (checkWin(row, col)) {
    setTimeout(() => {
      alert(currentPlayer.toUpperCase() + " Team Wins!");
      resetGame();
    }, 100);
    return;
  }

  switchPlayer();
}

function switchPlayer() {
  if (currentPlayer === "ee") currentPlayer = "ea";
  else if (currentPlayer === "ea") currentPlayer = "ey";
  else currentPlayer = "ee";
  document.getElementById("currentPlayer").textContent =
    "Current Team: " + currentPlayer.toUpperCase();
}

function checkWin(row, col) {
  return (
    count(row, col, 1, 0) + count(row, col, -1, 0) > 2 ||
    count(row, col, 0, 1) + count(row, col, 0, -1) > 2 ||
    count(row, col, 1, 1) + count(row, col, -1, -1) > 2 ||
    count(row, col, 1, -1) + count(row, col, -1, 1) > 2
  );
}

function count(row, col, rStep, cStep) {
  let r = row + rStep;
  let c = col + cStep;
  let total = 0;

  while (
    r >= 0 && r < rows &&
    c >= 0 && c < cols &&
    board[r][c] === currentPlayer
  ) {
    total++;
    r += rStep;
    c += cStep;
  }
  return total;
}

function resetGame() {
  currentPlayer = "ee";
  document.getElementById("currentPlayer").textContent =
    "Current Team: EE";
  createBoard();
}

createBoard();
</script>

</body>
</html>
Editor is loading...