Scribd
Upload
72 views

Tic-Tac-Toe Part 2 Javascript Answer

This document defines variables and functions to create a tic-tac-toe game. It sets the width and height of the canvas, defines the number of rows and columns on the game board. Functions are defined to draw the game board lines, an X or O shape depending on the player's turn, and to handle mouse clicks to place shapes on the board and alternate turns. It also includes functions to determine what column and row was clicked to place a shape.

Uploaded by

Elena Nobrega
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
72 views

Tic-Tac-Toe Part 2 Javascript Answer

This document defines variables and functions to create a tic-tac-toe game. It sets the width and height of the canvas, defines the number of rows and columns on the game board. Functions are defined to draw the game board lines, an X or O shape depending on the player's turn, and to handle mouse clicks to place shapes on the board and alternate turns. It also includes functions to determine what column and row was clicked to place a shape.

Uploaded by

Elena Nobrega
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
You are on page 1/ 2

var WIDTH = 400;

var HEIGHT = 400;


setSize(WIDTH, HEIGHT);

var NUM_ROWS = 3;
var NUM_COLS = 3;
var OFFSET= 50;
var CIRCLE_BORDER = 5;
var BOX_SIZE = WIDTH / NUM_COLS;
var board = new Grid(NUM_ROWS, NUM_COLS);
var turn = true;
var inPlay = true;

function start(){
drawBoard();
mouseClickMethod(handleClick);
}

function drawBoard() {
var vert = WIDTH / 3;
var horz = HEIGHT / 3;
add(new Line(vert, 0, vert, HEIGHT));
add(new Line(WIDTH - vert, 0, WIDTH - vert, HEIGHT));
add(new Line(0, horz, WIDTH, horz));
add(new Line(0, HEIGHT - horz, WIDTH, HEIGHT - horz));
}

function drawX(row, col) {


var centerX = col * BOX_SIZE + BOX_SIZE / 2;
var centerY = row * BOX_SIZE + BOX_SIZE / 2;
var left = centerX - OFFSET;
var right = centerX + OFFSET;
var top = centerY - OFFSET;
var bottom = centerY + OFFSET;
var lineOne = new Line(left, top, right, bottom);
var lineTwo = new Line(right, top, left, bottom);
add(lineOne);
add(lineTwo);
}

function drawO(row, col) {


var centerX = col * BOX_SIZE + BOX_SIZE / 2;
var centerY = row * BOX_SIZE + BOX_SIZE / 2;
var circle = new Circle(OFFSET);
circle.setPosition(centerX, centerY);
circle.setColor(Color.white);
circle.setBorderWidth(CIRCLE_BORDER);
add(circle);
}

function handleClick(e) {
if (inPlay) {
var xPos = e.getX();
var yPos = e.getY();
var col = getColForClick(xPos);
var row = getRowForClick(yPos);
if (!board.get(row, col)) {
if (turn) {
board.set(row, col, "X");
drawX(row, col); }
else {
board.set(row, col, "O");
drawO(row, col);
}
turn= !turn;
}
}
}

function getColForClick(xPos) {
var xtab = xPos / BOX_SIZE;
if(xtab < 1) {
return 0;
}
else
if(xtab > 1 && xtab < 2) {
return 1;
}
else {
return 2;
}
}

function getRowForClick(yPos) {
var ytab = yPos / BOX_SIZE;
if(ytab < 1) {
return 0;
} else
if(ytab > 1 && ytab < 2) {
return 1; }
else {
return 2;
}
}

You might also like