Searching for words in a Javascript based game

Question

Searching for words in a Javascript based game

Currently, I am in the process of developing a Word Search Game and one obstacle I am facing is how to display my selected words on the HTML grid that I have created. While someone did assist me with randomly generating the words into rows and columns, the issue is that it places the entire word in a single cell, when what I actually need is for each letter of the word to be distributed randomly among individual cells (hopefully that makes sense).

const myWords = ["LOL", "HEY", "TOYS", "YES", "SIR", "JOY"]; 

for (let i = 0; i < myWords.length; i++) {
    const randomIndex = length => Math.floor(Math.random() * length);
    const table = document.querySelector('table');
    const randomRow = table.rows[randomIndex(myWords.length)];
    const randomCell = randomRow.cells[randomIndex(myWords.length)];
    const randomWord = myWords[Math.floor(Math.random() * myWords.length)];
    randomCell.innerText = randomWord;   
}

I had initially planned on having the words aligned horizontally, vertically, and diagonally but my efforts to find a solution on platforms like Stack Overflow and Github have been fruitless. Is there anyone out there who can provide some guidance?

javascript html css

Answer 1

Answer №1

Welcome, The code is fully complete and operational, Credits to lizhineng

/**
 * Generates a random integer between min and max
 *
 * @param {Number} min
 * @param {Number} max
 * @return {Number}
 */
if (typeof Math.rangeInt != 'function') {
  Math.rangeInt = function(min, max){
    if (max == undefined) {
        max = min;
        min = 0;
    }
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
}

/**
 * Merges two objects
 *
 * @param {Object} o1 Object 1
 * @param {Object} o2 Object 2
 * @return {Object}
 */
if (typeof Object.merge != 'function') {
  Object.merge = function(o1, o2) {
    for (var i in o1) {
      o2[i] = o1[i];
    }
    return o2;
  }
}
(function(){
  'use strict';

  // Extend the element method
  Element.prototype.wordSearch = function(settings) {
    return new WordSearch(this, settings);
  }

  /**
   * Word search
   *
   * @param {Element} wrapWl the game's wrap element
   * @param {Array} settings
   * constructor
   */
  function WordSearch(wrapEl, settings) {
    this.wrapEl = wrapEl;

    // Add `.ws-area` to wrap element
    this.wrapEl.classList.add('ws-area');

    //Words solved.
    this.solved = 0;

    // Default settings
    var default_settings = {
      'directions': ['W', 'N', 'WN', 'EN'],
      'gridSize': 10,
      'words': ['one', 'two', 'three', 'four', 'five'],
      'wordsList' : [],
      'debug': false
    }
    this.settings = Object.merge(settings, default_settings);

    // Check the words' length if it is overflow the grid
    if (this.parseWords(this.settings.gridSize)) {
      // Add words into the matrix data
      var isWorked = false;

      while (isWorked == false) {
        // initialize the application
        this.initialize();

        isWorked = this.addWords();
      }

      // Fill up the remaining blank items
      if (!this.settings.debug) {
        this.fillUpFools();
      }

      // Draw the matrix into wrap element
      this.drawmatrix();
    }
  }

  ...
  
  })();
//-----------------------------Remove accent for latin/hebrew letters---------------------------------------------------//

// Code for removing accents from Latin and Hebrew characters

...

//------------------------------Search language--------------------------------------------------//

// Function to determine what letters should be injected on the grid based on the first letter

...

// Initialize the game area element and create the word search game instance

...

...

Answer 2

Welcome, The code is fully complete and operational, Credits to lizhineng

/**
 * Generates a random integer between min and max
 *
 * @param {Number} min
 * @param {Number} max
 * @return {Number}
 */
if (typeof Math.rangeInt != 'function') {
  Math.rangeInt = function(min, max){
    if (max == undefined) {
        max = min;
        min = 0;
    }
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
}

/**
 * Merges two objects
 *
 * @param {Object} o1 Object 1
 * @param {Object} o2 Object 2
 * @return {Object}
 */
if (typeof Object.merge != 'function') {
  Object.merge = function(o1, o2) {
    for (var i in o1) {
      o2[i] = o1[i];
    }
    return o2;
  }
}
(function(){
  'use strict';

  // Extend the element method
  Element.prototype.wordSearch = function(settings) {
    return new WordSearch(this, settings);
  }

  /**
   * Word search
   *
   * @param {Element} wrapWl the game's wrap element
   * @param {Array} settings
   * constructor
   */
  function WordSearch(wrapEl, settings) {
    this.wrapEl = wrapEl;

    // Add `.ws-area` to wrap element
    this.wrapEl.classList.add('ws-area');

    //Words solved.
    this.solved = 0;

    // Default settings
    var default_settings = {
      'directions': ['W', 'N', 'WN', 'EN'],
      'gridSize': 10,
      'words': ['one', 'two', 'three', 'four', 'five'],
      'wordsList' : [],
      'debug': false
    }
    this.settings = Object.merge(settings, default_settings);

    // Check the words' length if it is overflow the grid
    if (this.parseWords(this.settings.gridSize)) {
      // Add words into the matrix data
      var isWorked = false;

      while (isWorked == false) {
        // initialize the application
        this.initialize();

        isWorked = this.addWords();
      }

      // Fill up the remaining blank items
      if (!this.settings.debug) {
        this.fillUpFools();
      }

      // Draw the matrix into wrap element
      this.drawmatrix();
    }
  }

  ...
  
  })();
//-----------------------------Remove accent for latin/hebrew letters---------------------------------------------------//

// Code for removing accents from Latin and Hebrew characters

...

//------------------------------Search language--------------------------------------------------//

// Function to determine what letters should be injected on the grid based on the first letter

...

// Initialize the game area element and create the word search game instance

...

...

Answer 3

Answer №2

const list = document.querySelector("#list");
const items = ["CAR", "DOG", "CUP", "FAT", "RUG", "LAP"]; 

let counter = items.length;
while (counter>0) {
  chosenItem = Math.floor(Math.random() * counter);
  counter--;
    [items[counter], items[chosenItem]] = [items[chosenItem], items[counter]];
  var item = items[counter];
  var len = item.length;

  var display = '';
  while(len > 0){
    var randomIndex = Math.floor(Math.random() * len);
    display += item.charAt(randomIndex);
    item = item.substring(0, randomIndex) + item.substring(randomIndex + 1, len);
    len--;
  }
  display += "<br>";
  list.innerHTML += display;
}

<div id="list"></div>

Was this information useful?

Answer 4

const list = document.querySelector("#list");
const items = ["CAR", "DOG", "CUP", "FAT", "RUG", "LAP"]; 

let counter = items.length;
while (counter>0) {
  chosenItem = Math.floor(Math.random() * counter);
  counter--;
    [items[counter], items[chosenItem]] = [items[chosenItem], items[counter]];
  var item = items[counter];
  var len = item.length;

  var display = '';
  while(len > 0){
    var randomIndex = Math.floor(Math.random() * len);
    display += item.charAt(randomIndex);
    item = item.substring(0, randomIndex) + item.substring(randomIndex + 1, len);
    len--;
  }
  display += "<br>";
  list.innerHTML += display;
}

<div id="list"></div>

Was this information useful?

Searching for words in a Javascript based game

Answer №1

Answer №2

Similar questions

The value could not be retrieved because the input name depends on the array index

Is it possible to save an HTML5 Canvas screenshot directly onto the page?

A reliable cross-browser solution for CSS sticky positioning

Attempting to retrieve JSON data and present it in a grid layout

Define a new type in Typescript that is equal to another type, but with the added flexibility of having optional

What are the most effective methods for reorganizing and transforming database data?

Issue with the final transition of the last image in the Bootstrap carousel

Setting the CSS property `position: absolute; bottom: 0`, will move the div to the bottom of the screen rather than the bottom of

Visit the embedded AJAX feature that is failing to show any results

Ways to run scripts or commands during the installation process of my Electron JS software on different operating systems

Innovative solutions for seamless transformation of HTML designs into Silverlight 3.0

Find all paragraphs with the CSS property "background-color" using JQuery

Tips for customizing the event target appearance in Angular 2?

One easy method to verify a visitor's Facebook login status

Unable to retrieve information from server

Is there a way to enhance the functional purity by creating a single function that subscribes and returns a

Error encountered: Java NullPointerException in Applet

Struggling to store the selected image as the featured image on Wordpress

Flickering transitions in Phonegap and jQuery Mobile pages

The onClick event in React/NextJS is not functioning properly when applied to an external component