Code viewer for World:
Test
// Cloned by Masuab Khan on 7 Dec 2022 from World "Test" by Masuab Khan
// Please leave this clone trail here.
// This assignment will be a 3D designed TicTacToe with Tioluwalase Joseph - 20340346
// Cloned by Masuab Khan on 5 Dec 2022 from World "Connect4 2 Player " by Daniel O'Sullivan
// Please leave this clone trail here.
//const CLOCKTICK = 100; // speed of run - move things every n milliseconds
//const MAXSTEPS = 1000; // length of a run before final score
//---- global constants: -------------------------------------------------------
const gridsize = 3; // number of squares along side of world
const squaresize = 100; // size of square in pixels
const MAXPOS = gridsize * squaresize; // length of one side in pixels
const SKYCOLOR = 0xffffcc; // a number, not a string
const BLANKCOLOR = SKYCOLOR ; // make objects this color until texture arrives (from asynchronous file read)
const startRadiusConst = 500 ; // distance from centre to start the camera at
const maxRadiusConst = 1000 * 3 ; // maximum distance from camera we will render things
const ACTION_1 = 0;
const ACTION_2 = 1;
const ACTION_3 = 2;
const ACTION_4 = 3;
const ACTION_5 = 4;
const ACTION_6 = 5;
const ACTION_7 = 6;
const ACTION_8 = 7;
const ACTION_9 = 8;
//---- start of World class -------------------------------------------------------
function World()
{
// most of World can be private
// regular "var" syntax means private variables:
var GRID = new Array(gridsize); // can query GRID about whether squares are occupied, will in fact be initialised as a 2D array
var WALLS = new Array ( 3 * gridsize ); // need to keep handle to each wall block object so can find it later to paint it
var VALUES = new Array (64);
var self = this;
/*function initGrid()
{
for (var i = 0; i < gridsize ; i++)
{
GRID[i] = new Array(gridsize); // each element is an array
for (var j = 0; j < gridsize ; j++)
{
GRID[i][j] = false;
}
}
}*/
function translate ( x )
{
return ( x - ( MAXPOS/2 ) );
}
function loadTextures()
{
var loader1 = new THREE.TextureLoader();
loader1.load ( '/uploads/khanm25/1670328834.png',
function ( thetexture )
{
thetexture.minFilter = THREE.LinearFilter;
paintWalls ( new THREE.MeshBasicMaterial( { map: thetexture } ) );
} );
}
function initThreeWalls() // graphical run only, set up blank boxes, painted later
{
var t = 0;
for (var i = 0; i < gridsize ; i++)
{
for (var j = 0; j < gridsize ; j++)
{
var shape = new THREE.CubeGeometry( squaresize, squaresize, squaresize );
var thecube = new THREE.Mesh( shape );
thecube.material.color.setHex( BLANKCOLOR );
thecube.position.x = translate ( i * squaresize ); // translate my simple (i,j) block-numbering coordinates to three.js (x,y,z) coordinates
thecube.position.z = translate ( j * squaresize );
thecube.position.y = 0;
threeworld.scene.add(thecube);
WALLS[t] = thecube; // save it for later
t++;
}
}
}
function paintWalls ( material ) // paint blank boxes
{
for ( var i = 0; i < WALLS.length; i++ )
{
if ( WALLS[i] )
WALLS[i].material = material;
}
}
function initValArray()
{
for(var i = 0; i < VALUES.length; i++)
{
VALUES[i] = -1;
}
}
// all the spaces on the board
var space1 = 0;
var space2 = 1;
var space3 = 2;
var space4 = 3;
var space5 = 4;
var space6 = 5;
var space7 = 6;
var space8 = 7;
var space9 = 8;
var xTurn = true;
var winCheck = false;
// PLACE X OR O ON BOARD using the space number and keys 1 - 9 no overwritting the X or O
function moveLogicalAgent ( a )
{
if ( a == ACTION_1 && VALUES[space1] == -1)
{
if (xTurn)
{
WALLS[space1].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1670337277.png" )}));
VALUES[space1] = 1;
xTurn = false;
$("#user_span6").html( " <font color=Red> <B> X's Turn </B> </font> ");
}
else
{
WALLS[space1].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1102131.png" )}));
VALUES[space1] = 0;
xTurn = true;
$("#user_span6").html( " <font color=Blue> <B> O's Turn </B> </font> ");
}
}
else if ( a == ACTION_2 && VALUES[space2] == -1)
{
if (xTurn)
{
$("#user_span6").html( " <font color=Red> <B> X's Turn </B> </font> ");
WALLS[space2].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1670337277.png" )}));
VALUES[space2] = 1;
xTurn = false;
}
else
{
$("#user_span6").html( " <font color=Blue> <B> O's Turn </B> </font> ");
WALLS[space2].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1102131.png" )}));
VALUES[space2] = 0;
xTurn = true;
}
}
else if ( a == ACTION_3 && VALUES[space3] == -1)
{
if (xTurn)
{
$("#user_span6").html( " <font color=Red> <B> X's Turn </B> </font> ");
WALLS[space3].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1670337277.png" )}));
VALUES[space3] = 1;
xTurn = false;
}
else
{
$("#user_span6").html( " <font color=Blue> <B> O's Turn </B> </font> ");
WALLS[space3].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1102131.png" )}));
VALUES[space3] = 0;
xTurn = true;
}
}
else if ( a == ACTION_4 && VALUES[space4] == -1)
{
if (xTurn)
{
$("#user_span6").html( " <font color=Red> <B> X's Turn </B> </font> ");
WALLS[space4].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1670337277.png" )}));
VALUES[space4] = 1;
xTurn = false;
}
else
{
$("#user_span6").html( " <font color=Blue> <B> O's Turn </B> </font> ");
WALLS[space4].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1102131.png" )}));
VALUES[space4] = 0;
xTurn = true;
}
}
else if ( a == ACTION_5 && VALUES[space5] == -1)
{
if (xTurn)
{
$("#user_span6").html( " <font color=Red> <B> X's Turn </B> </font> ");
WALLS[space5].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1670337277.png" )}));
VALUES[space5] = 1;
xTurn = false;
}
else
{
$("#user_span6").html( " <font color=Blue> <B> O's Turn </B> </font> ");
WALLS[space5].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1102131.png" )}));
VALUES[space5] = 0;
xTurn = true;
}
}
else if ( a == ACTION_6 && VALUES[space6] == -1)
{
if (xTurn)
{
$("#user_span6").html( " <font color=Red> <B> X's Turn </B> </font> ");
WALLS[space6].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1670337277.png" )}));
VALUES[space6] = 1;
xTurn = false;
}
else
{
$("#user_span6").html( " <font color=Blue> <B> O's Turn </B> </font> ");
WALLS[space6].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1102131.png" )}));
VALUES[space6] = 0;
xTurn = true;
}
}
else if ( a == ACTION_7 && VALUES[space7] == -1)
{
if (xTurn)
{
$("#user_span6").html( " <font color=Red> <B> X's Turn </B> </font> ");
WALLS[space7].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1670337277.png" )}));
VALUES[space7] = 1;
xTurn = false;
}
else
{
$("#user_span6").html( " <font color=Blue> <B> O's Turn </B> </font> ");
WALLS[space7].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1102131.png" )}));
VALUES[space7] = 0;
xTurn = true;
}
}
else if ( a == ACTION_8 && VALUES[space8] == -1)
{
if (xTurn)
{
$("#user_span6").html( " <font color=Red> <B> X's Turn </B> </font> ");
WALLS[space8].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1670337277.png" )}));
VALUES[space8] = 1;
xTurn = false;
}
else
{
$("#user_span6").html( " <font color=Blue> <B> O's Turn </B> </font> ");
WALLS[space8].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1102131.png" )}));
VALUES[space8] = 0;
xTurn = true;
}
}
else if ( a == ACTION_9 && VALUES[space9] == -1)
{
if (xTurn)
{
$("#user_span6").html( " <font color=Red> <B> X's Turn </B> </font> ");
WALLS[space9].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1670337277.png" )}));
VALUES[space9] = 1;
xTurn = false;
}
else
{
$("#user_span6").html( " <font color=Blue> <B> O's Turn </B> </font> ");
WALLS[space9].material = ( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/khanm25/1102131.png" )}));
VALUES[space9] = 0;
xTurn = true;
}
}
else{
;
}
if(checkWinner())
{
winCheck = true;
if(xTurn)
{
$("#user_span6").html( " <font color=Red> <B> X Wins! </B> </font> ");
}
else
{
$("#user_span6").html( " <font color=Blue> <B> O Wins! </B> </font> ");
}
}
}
function keyHandler(e)
// user control
// Note that this.takeAction(a) is constantly running at same time, redrawing the screen.
{
if(winCheck) this.endCondition = true;
else if (e.keyCode == 49) moveLogicalAgent ( ACTION_1);
else if (e.keyCode == 50) moveLogicalAgent ( ACTION_2);
else if (e.keyCode == 51) moveLogicalAgent ( ACTION_3);
else if (e.keyCode == 52) moveLogicalAgent ( ACTION_4);
else if (e.keyCode == 53) moveLogicalAgent ( ACTION_5);
else if (e.keyCode == 54) moveLogicalAgent ( ACTION_6);
else if (e.keyCode == 55) moveLogicalAgent ( ACTION_7);
else if (e.keyCode == 56) moveLogicalAgent ( ACTION_8);
else if (e.keyCode == 57) moveLogicalAgent ( ACTION_9);
}
function checkWinner()
{
if(VALUES[space1] == VALUES[space2] && VALUES[space2] == VALUES[space3] && VALUES[space3] != -1)
{
return true;
}
if(VALUES[space4] == VALUES[space5] && VALUES[space5] == VALUES[space6] && VALUES[space6] != -1)
{
return true;
}
if(VALUES[space7] == VALUES[space8] && VALUES[space8] == VALUES[space9] && VALUES[space9] != -1)
{
return true;
}
if(VALUES[space1] == VALUES[space4] && VALUES[space4] == VALUES[space7] && VALUES[space7] != -1)
{
return true;
}
if(VALUES[space2] == VALUES[space5] && VALUES[space5] == VALUES[space8] && VALUES[space8] != -1)
{
return true;
}
if(VALUES[space3] == VALUES[space6] && VALUES[space6] == VALUES[space9] && VALUES[space9] != -1)
{
return true;
}
if(VALUES[space1] == VALUES[space5] && VALUES[space5] == VALUES[space9] && VALUES[space9] != -1)
{
return true;
}
if(VALUES[space3] == VALUES[space5] && VALUES[space5] == VALUES[space7] && VALUES[space7] != -1)
{
return true;
}
return false;
}
//--- public functions / interface / API ----------------------------------------------------------
// must have this public variable:
this.endCondition; // If set to true, run will end.
this.newRun = function()
{
// (subtle bug) must reset variables like these inside newRun (in case do multiple runs)
this.endCondition = false;
$("#user_span3").html( " <font color=black> <B> Use keys 1-8 on the top of the keyboard to put checkers into grid. Leftmost column is 1, next is 2 and so on. Once you press a button, move your mouse to update the screen! <br></B> </font> " );
$("#user_span6").html( " <font color=red> <B> Red Turn </B> </font> ");
// define logical data structure for the World, even if no graphical representation:
//initGrid();
initValArray();
//initLogicalWalls();
// if Three.js graphical representation:
if ( true )
{
threeworld.init3d ( startRadiusConst, maxRadiusConst, SKYCOLOR );
// Set up blank objects first:
initThreeWalls();
// Then paint them with textures - asynchronous load of textures from files.
// The texture file loads return at some unknown future time in some unknown order.
// Because of the unknown order, it is probably best to make objects first and later paint them, rather than have the objects made when the file reads return.
// It is safe to paint objects in random order, but might not be safe to create objects in random order.
loadTextures(); // will return sometime later, but can go ahead and render now
}
document.onkeydown = keyHandler;
};
this.endRun = function()
{
};
}