Workshop › Tic-tac-toe › Step 15 of 33
The click event says where the mouse was, measured from the page's corner. We subtract where the canvas starts, then turn the point into a column, a row and a cell number.
```js
const rect = canvas.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
const index = Math.floor(y / CELL) * 3 + Math.floor(x / CELL)
play(index)
```getBoundingClientRect() tells where the canvas is on the page (left, top).event.clientX - rect.left is the click's x inside the canvas; the same for y.Math.floor(x / CELL) is the column (0 to 2), Math.floor(y / CELL) the row; row * 3 + column is the cell number.In the listener, replace play(4) with the four new lines and play(index). Run and play a whole game against
yourself.
Skills: Keyboard and mouse input
← Listen for clicks Clicks on any screen size →