Understanding how to monitor a Boolean value that fluctuates in real-time within a three.js

Question

Understanding how to monitor a Boolean value that fluctuates in real-time within a three.js

Currently, I am working on developing a 3D 4x4x4 tic tac toe game using three.js. In order to determine the win condition for combinations, I have created a boolean array. With a total of 64 blocks (16*4), I have initialized a boolean array of size 64 with default values set to false. Whenever a user clicks on a block, it dynamically changes the corresponding object to true.

For checking the horizontal win condition, I have implemented the following logic:

var camera, scene, renderer, mesh, material, controls;
var targetList = [];
var targetListBool = new Array(64).fill(false);
console.log(targetListBool);

// Other code segments omitted for brevity

However, I seem to be facing an issue with the final for loop that checks for horizontal win combinations. The goal is to alert 'win' if there are 4 consecutive horizontal blocks clicked in each plane. It appears that the if statement within the for loop is not properly detecting the changed values from the click events. Any assistance or guidance on resolving this would be greatly appreciated as I am relatively new to three.js and JavaScript. Thank you.

javascript arrays three.js boolean

Answer 1

Answer №1

Your strategy for winning involves getting 4 in a row on either the x, y, or z axis. However, the current function only checks the booleans in one direction. To improve efficiency, it is recommended to track the data in a 3 dimensional manner. An example is provided where 4 values are manually set in a row on the z axis for testing purposes.

Although the check process can be enhanced, it is currently kept simple due to the lack of clarity on specific intentions. Consider whether diagonals should also be included in the check.

//Initialize a variable with x, y, z coordinates along with a boolean value set to false.
var locations = {};

for (var x = 1; x <= 4; x++) {
  locations[x] = {};
  for (var y = 1; y <= 4; y++) {
    locations[x][y] = {};
    for (var z = 1; z <= 4; z++) {
      locations[x][y][z] = false;
    }
  }
}

//Set 4 values on the X axis to true for testing
locations[1][2][3] = true;
locations[2][2][3] = true;
locations[3][2][3] = true;
locations[4][2][3] = true;

//Set 4 values on the Z axis to true for testing
locations[1][2][1] = true;
locations[1][2][2] = true;
locations[1][2][3] = true;
locations[1][2][4] = true;


//Check for four in a row - note that this could be optimized further and currently does not account for diagonals
var winX = false;
var winY = false;
var winZ = false;
for (var x = 1; x <= 4; x++) {
  for (var y = 1; y <= 4; y++) {
    for (var z = 1; z <= 4; z++) {
      if(locations[x][y][z]) {
        //check X for current position
        if(locations[1][y][z] && locations[2][y][z] && locations[3][y][z] && locations[4][y][z]) {
          winX = true;
        }
        //check Y for current position
        if(locations[x][1][z] && locations[x][2][z] && locations[x][3][z] && locations[x][4][z]) {
          winY = true;
        }
        //check Z for current position
        if(locations[x][y][1] && locations[x][y][2] && locations[x][y][3] && locations[x][y][4]) {
          winZ = true;
        }
      }
    }
  }
}

//Display the results, where X and Z should return true while Y should return false
console.log("Win X: " + winX);
console.log("Win Y: " + winY);
console.log("Win Z: " + winZ);

Answer 2

Your strategy for winning involves getting 4 in a row on either the x, y, or z axis. However, the current function only checks the booleans in one direction. To improve efficiency, it is recommended to track the data in a 3 dimensional manner. An example is provided where 4 values are manually set in a row on the z axis for testing purposes.

Although the check process can be enhanced, it is currently kept simple due to the lack of clarity on specific intentions. Consider whether diagonals should also be included in the check.

//Initialize a variable with x, y, z coordinates along with a boolean value set to false.
var locations = {};

for (var x = 1; x <= 4; x++) {
  locations[x] = {};
  for (var y = 1; y <= 4; y++) {
    locations[x][y] = {};
    for (var z = 1; z <= 4; z++) {
      locations[x][y][z] = false;
    }
  }
}

//Set 4 values on the X axis to true for testing
locations[1][2][3] = true;
locations[2][2][3] = true;
locations[3][2][3] = true;
locations[4][2][3] = true;

//Set 4 values on the Z axis to true for testing
locations[1][2][1] = true;
locations[1][2][2] = true;
locations[1][2][3] = true;
locations[1][2][4] = true;


//Check for four in a row - note that this could be optimized further and currently does not account for diagonals
var winX = false;
var winY = false;
var winZ = false;
for (var x = 1; x <= 4; x++) {
  for (var y = 1; y <= 4; y++) {
    for (var z = 1; z <= 4; z++) {
      if(locations[x][y][z]) {
        //check X for current position
        if(locations[1][y][z] && locations[2][y][z] && locations[3][y][z] && locations[4][y][z]) {
          winX = true;
        }
        //check Y for current position
        if(locations[x][1][z] && locations[x][2][z] && locations[x][3][z] && locations[x][4][z]) {
          winY = true;
        }
        //check Z for current position
        if(locations[x][y][1] && locations[x][y][2] && locations[x][y][3] && locations[x][y][4]) {
          winZ = true;
        }
      }
    }
  }
}

//Display the results, where X and Z should return true while Y should return false
console.log("Win X: " + winX);
console.log("Win Y: " + winY);
console.log("Win Z: " + winZ);

Understanding how to monitor a Boolean value that fluctuates in real-time within a three.js

Answer №1

Similar questions

Building a collection of class pointers within a hierarchy

Vue component encounters issue with exporting JavaScript functions

How can I use AJAX to read an image file and display it on a Canvas?

Having trouble with the unresponsive sticky top-bar feature in Zurb Foundation 5?

The dropdown on my website is malfunctioning

Enhance user experience with a dynamic Bootstrap combo box that updates based on

Issue with Vue JS: e.preventDefault not functioning correctly when using Axios

Guide on utilizing getelementsbytagname for retrieving LI values

The $watch feature in AngularJS does not function properly within a directive when a controller is used to update data

Commitment of service within AngularJS controller using the "as" syntax

Can you please provide a detailed list of all the events that are compatible with the updateOn feature in Angular's ngModelOptions?

Tips for incorporating PHP $_SESSION data into a JavaScript file

Top scenario and illustration of utilizing clusters in nodejs

Initializing start scripts in the package.json file

JavaScript allows you to set an expiration date for a specific item

Nodemon has encountered an issue: Unable to listen on port 5000. The address is already in use

Press on the div to reveal its content at the clicked position

In Javascript, assign default values to an array and update them with new values upon the click of a

Is there a need to remove whitespace for additional characters?

In Perl, locate and store word and its surrounding context in a hash table