js实现填字

实现填字游戏的JavaScript方法

创建HTML结构

在HTML中设置一个容器用于放置填字游戏的格子，可以使用<table>或<div>网格布局。每个格子用<input>元素表示，方便用户输入字母。

<div id="crossword-container"></div>

初始化游戏数据

定义填字游戏的布局和单词数据，包括横向和纵向单词的位置、提示信息等。可以使用二维数组表示游戏板。

const crosswordData = {
  board: [
    [1, 0, 0, 1, 0],
    [0, 0, 0, 0, 0],
    [0, 0, 1, 0, 0],
    [1, 0, 0, 0, 1],
    [0, 0, 0, 0, 0]
  ],
  words: [
    { id: 1, clue: "横向1", answer: "HELLO", start: [0, 0], direction: "across" },
    { id: 2, clue: "纵向1", answer: "WORLD", start: [0, 3], direction: "down" }
  ]
};

渲染游戏板

使用JavaScript动态生成填字游戏的界面，根据数据创建输入框和编号。

function renderCrossword() {
  const container = document.getElementById('crossword-container');
  const board = crosswordData.board;

  for (let i = 0; i < board.length; i++) {
    const row = document.createElement('div');
    row.className = 'crossword-row';

    for (let j = 0; j < board[i].length; j++) {
      const cell = document.createElement('input');
      cell.type = 'text';
      cell.maxLength = 1;
      cell.className = 'crossword-cell';

      if (board[i][j] === 0) {
        cell.style.visibility = 'hidden';
      } else {
        // 检查是否需要显示编号
        if (isStartOfWord(i, j)) {
          const number = document.createElement('span');
          number.className = 'cell-number';
          number.textContent = board[i][j];
          cell.appendChild(number);
        }
      }

      row.appendChild(cell);
    }

    container.appendChild(row);
  }
}

添加交互逻辑

实现用户输入验证、自动跳转和答案检查功能。

function setupInputHandlers() {
  const cells = document.querySelectorAll('.crossword-cell');

  cells.forEach(cell => {
    cell.addEventListener('input', (e) => {
      if (e.target.value) {
        // 自动跳转到下一个单元格
        const nextCell = findNextCell(e.target);
        if (nextCell) nextCell.focus();
      }
    });

    cell.addEventListener('keydown', (e) => {
      // 处理方向键导航
      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
        e.preventDefault();
        const newCell = navigateWithArrowKeys(e.target, e.key);
        if (newCell) newCell.focus();
      }
    });
  });
}

样式设计

添加CSS样式美化填字游戏界面，包括单元格大小、边框和编号样式。

.crossword-container {
  display: inline-block;
  border: 2px solid #333;
}

.crossword-row {
  display: flex;
}

.crossword-cell {
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 20px;
  border: 1px solid #ccc;
  position: relative;
}

.cell-number {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 10px;
}

游戏逻辑完善

实现单词检查、游戏完成判断和提示功能。

function checkAnswers() {
  const cells = document.querySelectorAll('.crossword-cell');
  let allCorrect = true;

  crosswordData.words.forEach(word => {
    const userAnswer = getCurrentAnswer(word);
    if (userAnswer !== word.answer) {
      allCorrect = false;
      highlightIncorrect(word);
    }
  });

  if (allCorrect) {
    alert('恭喜！所有答案都正确！');
  }
}

function getCurrentAnswer(word) {
  let answer = '';
  let [row, col] = word.start;

  for (let i = 0; i < word.answer.length; i++) {
    const cell = document.querySelector(`.crossword-cell:nth-child(${col + 1})`, 
      `.crossword-row:nth-child(${row + 1})`);
    answer += cell.value || ' ';

    if (word.direction === 'across') col++;
    else row++;
  }

  return answer.trim().toUpperCase();
}

初始化游戏

在页面加载完成后调用初始化函数。

document.addEventListener('DOMContentLoaded', () => {
  renderCrossword();
  setupInputHandlers();
});

这个实现提供了填字游戏的基本功能，包括动态生成游戏板、用户输入处理、答案验证和简单的界面交互。可以根据需要扩展更多功能，如计时器、保存进度或生成随机填字游戏等。