Click here for free DL of the app version that can save data.

No:40056

←

Prev Next

→

Cross word puzzle game
Developer User17955｜Date and time 24/1/31 21:31:11
Build time 37.062 sec｜Game capacity 7.023KB｜

Script

Crossword Puzzle Game

Explanation: This is an HTML-based crossword puzzle game implemented within a single HTML file. It contains JavaScript code enclosed in script tags. The crossword puzzle grid is defined using a 2D array of pictograms. The clues are also defined as an array of objects containing the word, direction, row, and column information. The game functionality includes rendering the crossword grid and the clues, as well as activating cells when clicked and selecting clues by clicking on them. The active clue is highlighted in bold. The grid is displayed as a series of cells with each cell containing a pictogram. Clicking on a cell activates it, allowing the user to navigate through the crossword puzzle. The clues are displayed below the crossword grid and can be selected by clicking on them. The selected clue is rendered in bold.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Crossword Puzzle Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    
    #crossword-grid {
      display: inline-block;
      border: 1px solid #ccc;
      padding: 10px;
    }
    
    .cell {
      display: inline-block;
      width: 30px;
      height: 30px;
      vertical-align: top;
      text-align: center;
      border: 1px solid #ccc;
      font-size: 14px;
    }
    
    .cell.active {
      background-color: lightblue;
    }
    
    #clues {
      margin-top: 20px;
    }
    
    .clue {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Crossword Puzzle Game</h1>
  
  <div id="crossword-grid"></div>
  
  <div id="clues"></div>
  
  <script>
    // Define the crossword puzzle grid
    const GRID_SIZE = 10;
    const crosswordGrid = [
      ['🦊', '🦉', '🐥', ' ', '🌵', ' ', '🐟', ' ', '🌸', ' ',],
      [' ', ' ', '🐍', ' ', ' ', ' ', '🌸', ' ', ' ', ' '],
      [' ', '🏔️', ' ', '🌸', '🌳', ' ', ' ', ' ', ' ', ' '],
      [' ', ' ', '🌸', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
      [' ', ' ', ' ', ' ', '🌸', ' ', ' ', ' ', ' ', ' '],
      ['🐱', ' ', ' ', ' ', ' ', ' ', '🌸', ' ', ' ', '🕊️'],
      [' ', ' ', '🐶', ' ', '🌸', ' ', ' ', '🚗', ' ', ' '],
      ['🦆', '🍉', '🌵', '🌸', '🍇', ' ', ' ', ' ', ' ', ' '],
      [' ', ' ', ' ', '🌸', '🌳', ' ', ' ', ' ', ' ', ' '],
      [' ', '🦀', ' ', ' ', ' ', '🌸', ' ', ' ', ' ', '🦋'],
    ];
    
    // Define the clues
    const clues = [
      { word: 'FOX', direction: 'across', row: 0, col: 0 },
      { word: 'OWL', direction: 'across', row: 0, col: 2 },
      { word: 'CHICK', direction: 'across', row: 0, col: 4 },
      { word: 'CACTUS', direction: 'across', row: 0, col: 6 },
      { word: 'FISH', direction: 'across', row: 0, col: 8 },
      { word: 'SNAKE', direction: 'down', row: 1, col: 2 },
      { word: 'MOUNTAIN', direction: 'down', row: 2, col: 1 },
      { word: 'TREE', direction: 'down', row: 4, col: 4 },
      { word: 'CAT', direction: 'across', row: 5, col: 0 },
      { word: 'BIRD', direction: 'down', row: 5, col: 2 },
      { word: 'DOG', direction: 'down', row: 6, col: 2 },
      { word: 'CAR', direction: 'across', row: 6, col: 7 },
      { word: 'DUCK', direction: 'across', row: 7, col: 0 },
      { word: 'WATERMELON', direction: 'across', row: 7, col: 2 },
      { word: 'GRAPE', direction: 'across', row: 7, col: 6 },
      { word: 'CRAB', direction: 'down', row: 8, col: 1 },
      { word: 'BUTTERFLY', direction: 'down', row: 9, col: 5 },
    ];
    
    let activeClueIndex = 0; // Index of the currently active clue
    
    // Function to render the crossword grid
    function renderGrid() {
      const crosswordGridElement = document.getElementById('crossword-grid');
      crosswordGridElement.innerHTML = '';
      
      for (let row = 0; row < crosswordGrid.length; row++) {
        for (let col = 0; col < crosswordGrid[row].length; col++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');
          
          // Add corresponding pictogram to the cell
          cell.innerText = crosswordGrid[row][col];
          
          // Add click event listener to activate the cell
          cell.addEventListener('click', function() {
            activateCell(row, col);
          });
          
          // Add active class to currently active cells
          if (clues[activeClueIndex].direction === 'across') {
            if (row === clues[activeClueIndex].row && col >= clues[activeClueIndex].col && col < clues[activeClueIndex].col + clues[activeClueIndex].word.length) {
              cell.classList.add('active');
            }
          } else {
            if (col === clues[activeClueIndex].col && row >= clues[activeClueIndex].row && row < clues[activeClueIndex].row + clues[activeClueIndex].word.length) {
              cell.classList.add('active');
            }
          }
          
          crosswordGridElement.appendChild(cell);
        }
      }
    }
    
    // Function to activate a cell
    function activateCell(row, col) {
      const clueDirection = clues[activeClueIndex].direction;
      
      if (clueDirection === 'across') {
        if (col < clues[activeClueIndex].col || col >= clues[activeClueIndex].col + clues[activeClueIndex].word.length) {
          return;
        }
      } else {
        if (row < clues[activeClueIndex].row || row >= clues[activeClueIndex].row + clues[activeClueIndex].word.length) {
          return;
        }
      }
      
      const crosswordGridElement = document.getElementById('crossword-grid');
      const clickedCell = crosswordGridElement.children[row * GRID_SIZE + col];
      
      // Remove active class from all cells
      const allCells = crosswordGridElement.getElementsByClassName('cell');
      Array.prototype.forEach.call(allCells, function(cell) {
        cell.classList.remove('active');
      });
      
      // Add active class to the clicked cell
      clickedCell.classList.add('active');
    }
    
    // Function to render the clues
    function renderClues() {
      const cluesElement = document.getElementById('clues');
      cluesElement.innerHTML = '';
      
      clues.forEach(function(clue, index) {
        const clueElement = document.createElement('div');
        clueElement.classList.add('clue');
        
        // Show active clue in bold
        if (index === activeClueIndex) {
          clueElement.style.fontWeight = 'bold';
        }
        
        clueElement.innerHTML = `<span>${clue.word}</span> - ${clue.direction}`;
        
        // Add click event listener to select the clue
        clueElement.addEventListener('click', function() {
          selectClue(index);
        });
        
        cluesElement.appendChild(clueElement);
      });
    }
    
    // Function to select a clue
    function selectClue(index) {
      activeClueIndex = index;
      
      renderGrid();
      renderClues();
    }
    
    // Initial rendering
    renderGrid();
    renderClues();
  </script>
</body>
</html>
```

The game functionality includes rendering the crossword grid and the clues, as well as activating cells when clicked and selecting clues by clicking on them. The active clue is highlighted in bold.

The grid is displayed as a series of cells with each cell containing a pictogram. Clicking on a cell activates it, allowing the user to navigate through the crossword puzzle.

The clues are displayed below the crossword grid and can be selected by clicking on them. The selected clue is rendered in bold.