Question

Challenge: Tic-Tac-Toe (Report a problem) Detecting mouse clicks For this step of the challenge you will complete Tile's handleMouseClick method. The handleMouseClick method has two parameters: x and y which represent the coordinates of where the user clicked the mouse. When a user clicks inside a tile, that tile's handleMouseClick method should call that tile's onClick method. To check if the mouse click is inside of the tile, you will need an if statement that checks if: - the mouse click is on, or right of, the left edge of the tile - the mouse click is on, or left of, the right edge of the tile - the mouse click is on, or below, the upper edge of the tile - the mouse click is on, or above, the lower edge of the tile

Answer 1

Answer:

var playerTurn;

var NUM_COLS;

var NUM_ROWS;

var SYMBOLS;

var tiles = [];

var checkWin = function()

{    };

var Tile = function(x, y)

{

 this.x = x;

 this.y = y;

 this.size = width/NUM_COLS;

 this.label = "";

};

Tile.prototype.draw = function()

{

   fill(214, 247, 202);

   strokeWeight(2);

   rect(this.x, this.y, this.size, this.size, 10);

   textSize(100);

   textAlign(CENTER, CENTER);

   fill(0, 0, 0);

   text(this.label, this.x+this.size/2, this.y+this.size/2);

};

Tile.prototype.empty = function()

{

   return this.label === "";

};

Tile.prototype.onClick = function()

{

   // If the tile is not empty, exit the function

   // Put the player's symbol on the tile

   // Change the turn

};

Tile.prototype.handleMouseClick = function(x, y)

{

   // Check for mouse clicks inside the tile

};

for (var i = 0; i < NUM_COLS; i++)

{

   for (var j = 0; j < NUM_ROWS; j++)

  {

       tiles.push(new Tile(i * (width/NUM_COLS-1), j * (height/NUM_ROWS-1)));

   }

}

var drawTiles = function()

{

   for (var i in tiles)

  {

       tiles[i].draw();

   }

};

mouseReleased = function()

  {

   for (var i in tiles)

       {

       tiles[i].handleMouseClick(mouseX, mouseY);

       }

 };

draw = function()

{

   background(143, 143, 143);

   drawTiles();

};

Explanation: