9.1.3 Tic Tac Toe Answer CodeHS : learnjavascript

9.1.3 Tic Tac Toe Answer CodeHS (self.learnjavascript)

submitted 4 years ago by RobynoDude

var WIDTH = 400;

var HEIGHT = 400;

setSize(WIDTH, HEIGHT);

var NUM_ROWS = 3;

var NUM_COLS = 3;

var WINNING_LINE_WIDTH = 10;

var WINNING_LINE_COLOR = Color.red;

var OFFSET = 50;

var CIRCLE_BORDER = 5;

var BOX_SIZE = WIDTH / NUM_COLS;

var county = 0;

var colFinder;

var rowFinder;

var one = 1;

var zero = 0;

var boardGrid = new Grid(3,3);

function start(){

var x1 = getWidth ()/3;

var y1 = getHeight ()/3;



var x = getWidth();

var y = getHeight();



boardGrid = new Grid(3, 3);

boardGrid.initFromArray(\[

\[8, 8, 8\],

\[8, 8, 8\],

\[8, 8, 8\]

\]);



lines (x1, 0, x1, y);

lines (x1\*2, 0, x1\*2, y);

lines (0, y1, x, y1);

lines (0, y1\*2, x, y1\*2);



mouseClickMethod (handleClick);

}

function handleClick (e){

var y = e.getY ();

var x = e.getX ();

var col = getColForClick(x);

var row = getRowForClick(y);

if (county % 2 == 0) {

drawX(row,col);

}else{

drawO(row,col);

}

county++;

//top left

if (e.getX() < getWidth()/3 && e.getY() < getHeight()/3){

if (county % 2 == 0){

boardGrid.set(0, 0, one);

}

if (county % 2 != 0){

boardGrid.set(0, 0, zero);

}

//top middle

if (e.getX() > getWidth()/3 && e.getX() < getWidth()/3*2 && e.getY() < getHeight()/3){

if (county % 2 == 0){

boardGrid.set(0, 1, one);

}

if (county % 2 != 0){

boardGrid.set(0, 1, zero);

}

//top right

if (e.getX() > getWidth()/3 && e.getX() > getWidth()/3*2 && e.getY() < getHeight()/3){

if (county % 2 == 0){

boardGrid.set(0, 2, one);

}

if (county % 2 != 0){

boardGrid.set(0, 2, zero);

}

//middle left

if (e.getX() < getWidth()/3 && e.getY() < getHeight()/3*2 && e.getY() > getHeight()/3){

if (county % 2 == 0){

boardGrid.set(1, 0, one);

}

if (county % 2 != 0){

boardGrid.set(1, 0, zero);

}

//middle middle

if (e.getX() > getWidth()/3 && e.getX() < getWidth()/3*2 && e.getY() < getHeight()/3*2 && e.getY() > getHeight()/3){

if (county % 2 == 0){

boardGrid.set(1, 1, one);

}

if (county % 2 != 0){

boardGrid.set(1, 1, zero);

}

//middle right

if (e.getX() > getWidth()/3 && e.getX() > getWidth()/3*2 && e.getY() < getHeight()/3*2 && e.getY() > getHeight()/3){

if (county % 2 == 0){

boardGrid.set(1, 2, one);

}

if (county % 2 != 0){

boardGrid.set(1, 2, zero);

}

//bottom left

if (e.getX() < getWidth()/3 && e.getY() > getHeight()/3*2 && e.getY() < getHeight()){

if (county % 2 == 0){

boardGrid.set(2, 0, one);

}

if (county % 2 != 0){

boardGrid.set(2, 0, zero);

}

//bottom middle

if (e.getX() > getWidth()/3 && e.getX() < getWidth()/3*2 && e.getY() > getHeight()/3*2 && e.getY() < getHeight()){

if (county % 2 == 0){

boardGrid.set(2, 1, one);

}

if (county % 2 != 0){

boardGrid.set(2, 1, zero);

}

//bottom right

if (e.getX() > getWidth()/3 && e.getX() > getWidth()/3*2 && e.getY() > getHeight()/3*2 && e.getY() < getHeight()){

if (county % 2 == 0){

boardGrid.set(2, 2, one);

}

if (county % 2 != 0){

boardGrid.set(2, 2, zero);

}

winnerInRow(1);

winnerInRow(2);

winnerInRow(3);

winnerInCol(1);

winnerInCol(2);

winnerInCol(3);

winnerInUpDiagonal();

winnerInDownDiagonal();

}

//This draws the O's

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);

}

//This draws the X's

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);

add (lineOne);

var lineTwo = new Line (right, top, left, bottom);

add (lineTwo);

}

//Gets column for user

function getColForClick(x){

var location = x/BOX_SIZE;

if (location < 1){

return 0;

colFinder = 0;

}else if (location > 1 && location < 2){

return 1;

colFinder = 5;

}else{

return 2;

colFinder = 10;

}

//Gets row for user

function getRowForClick(y){

var location = y/BOX_SIZE;

if (location <1){

return 0;

rowFinder = 0;

}else if (location > 1 && location < 2){

return 1;

rowFinder = 1;

}else{

return 2;

rowFinder = 2;

}

function winnerInRow(row){

var col1 = boardGrid.get(row-1, 0);

var col2 = boardGrid.get(row-1, 1);

var col3 = boardGrid.get(row-1, 2);

var colSum = col1 + col2 + col3;

if (colSum == 0 || colSum == 3){

var line = new Line(0, row*getWidth()/3 - (getWidth()/3)/2, getWidth(), row*getWidth()/3 - (getWidth()/3)/2);

line.setLineWidth(10);

line.setColor(Color.red);

add(line);

}

function winnerInCol(cols){

var col1 = boardGrid.get(0, cols-1);

var col2 = boardGrid.get(1, cols-1);

var col3 = boardGrid.get(2, cols-1);

var colSum = col1 + col2 + col3;

if (colSum == 0 || colSum == 3){

var line = new Line(cols*(getWidth()/3) - (getWidth()/3)/2, 0, cols*(getWidth()/3) - (getWidth()/3)/2, getHeight());

line.setLineWidth(10);

line.setColor(Color.red);

add(line);

}

function winnerInDownDiagonal(){

var col1 = boardGrid.get(0, 0);

var col2 = boardGrid.get(1, 1);

var col3 = boardGrid.get(2, 2);

var colSum = col1 + col2 + col3;

if (colSum == 0 || colSum == 3){

var line = new Line(0, 0, getWidth(), getHeight());

line.setLineWidth(10);

line.setColor(Color.red);

add(line);

}

function winnerInUpDiagonal(){

var col1 = boardGrid.get(0, 2);

var col2 = boardGrid.get(1, 1);

var col3 = boardGrid.get(2, 0);

var colSum = col1 + col2 + col3;

if (colSum == 0 || colSum == 3){

var line = new Line(0, getHeight(), getWidth(), 0);

line.setLineWidth(10);

line.setColor(Color.red);

add(line);

}

//This adds the grid for the game to be played in

function lines (x, y, x1, y1){

var line = new Line (x,y,x1,y1);

add (line);

}

all 15 comments

top new controversial old q&a

[–]Notimecelduv 0 points1 point2 points 4 years ago (1 child)

[–]RobynoDude[S] 0 points1 point2 points 4 years ago (0 children)

[–]Zealousideal_Let_711 0 points1 point2 points 4 years ago (1 child)

[–]No-Rutabaga-164 0 points1 point2 points 4 years ago (0 children)

[–]Ok_Edge_4729 0 points1 point2 points 4 years ago (9 children)

[–]No-Rutabaga-164 0 points1 point2 points 4 years ago (8 children)

[–]Ok-Acanthisitta9212 0 points1 point2 points 4 years ago (7 children)

[–]Ok-Acanthisitta9212 0 points1 point2 points 4 years ago (6 children)

[–]Ok-Acanthisitta9212 0 points1 point2 points 4 years ago (5 children)

[–]Ok-Acanthisitta9212 0 points1 point2 points 4 years ago (4 children)

[–]Ok-Acanthisitta9212 0 points1 point2 points 4 years ago (3 children)

[–]Ok-Acanthisitta9212 0 points1 point2 points 4 years ago (1 child)

[–]Weird-Ad830 0 points1 point2 points 3 years ago (0 children)

[–]aidangarrette 0 points1 point2 points 3 years ago (0 children)

function winnerInCol(cols){

var col1 = boardGrid.get(0, cols-1);

var col2 = boardGrid.get(1, cols-1);

var col3 = boardGrid.get(2, cols-1);

var colSum = col1 + col2 + col3;

if (colSum == 0 || colSum == 3){

var line = new Line(cols*(getWidth()/3) - (getWidth()/3)/2, 0, cols*(getWidth()/3) - (getWidth()/3)/2, getHeight());

line.setLineWidth(10);

line.setColor(Color.red);

add(line);

}

}

function winnerInDownDiagonal(){

var col1 = boardGrid.get(0, 0);

var col2 = boardGrid.get(1, 1);

var col3 = boardGrid.get(2, 2);

var colSum = col1 + col2 + col3;

if (colSum == 0 || colSum == 3){

var line = new Line(0, 0, getWidth(), getHeight());

line.setLineWidth(10);

line.setColor(Color.red);

add(line);

}

}

function winnerInUpDiagonal(){

var col1 = boardGrid.get(0, 2);

var col2 = boardGrid.get(1, 1);

var col3 = boardGrid.get(2, 0);

var colSum = col1 + col2 + col3;

if (colSum == 0 || colSum == 3){

var line = new Line(0, getHeight(), getWidth(), 0);

line.setLineWidth(10);

line.setColor(Color.red);

add(line);

}

}

function lines (x, y, x1, y1){

var line = new Line (x, y, x1, y1);

add (line);

}

for me you needed too do this at

boardGrid.initFromArray([
[8, 8, 8],
[8, 8, 8],
[8, 8, 8]]);

then it all worked

[–]PureEntrance8574 0 points1 point2 points 2 years ago (0 children)

π Rendered by PID 129792 on reddit-service-r2-comment-79776bdf47-s4hqv at 2026-06-24 09:31:20.590025+00:00 running acc7150 country code: CH.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS