// Over a few chapters, we are working up to a "Battleship" style Websocket game.
// Ch.6
// Visually no different. But we are putting in things behind the scenes to support the final game.
// --- We need a new data structure: --------------
// Previously we made ships but did not keep track of what we made.
// Now we need to know if a guess is right, so we need a list of our ships.
// We set up a new variable GRID to keep track of ship positions, player clicks, misses and hits
// This introduces the concept of an "array".
// In fact, this is a 2-dimensional array, which is a challenge if you are new to arrays.
// So we suggest at this point you go to w3schools and experiment with a 1-dimensional array:
// https://www.w3schools.com/js/js_arrays.asp
// === start of code ===========================================================================================================
const gridsize = 10;
const squaresize = 100;
const MAXPOS = gridsize * squaresize;
const startRadiusConst = MAXPOS * 2 ;
const maxRadiusConst = MAXPOS * 10 ;
const SKYCOLOR = 'lightyellow';
AB.maxSteps = 1000000;
AB.drawRunControls = false;
ABWorld.drawCameraControls = false;
const TEXTURE_WALL = '/uploads/chapters/stone.png' ;
const TEXTURE_SHIP = '/uploads/chapters/ship.png' ;
const TEXTURE_FIRE = '/uploads/chapters/fire.png' ;
// credit:
// https://commons.wikimedia.org/wiki/File:Square_stone_brick_Texture.jpg
// https://commons.wikimedia.org/wiki/File:Regina_Maris.JPG
// https://commons.wikimedia.org/wiki/File:FIRE_01.JPG
var wall_texture, ship_texture, fire_texture;
var thesea;
// introduce GRID to keep track of ships
// GRID is an "array" that will keep track of whether squares are:
// empty, wall, ship, burnt ship, or opponent failed attempt
// in fact need 2 such variables:
var GRID1 = new Array(gridsize); // my grid
var GRID2 = new Array(gridsize); // my (initially blank) map of opponent grid
// GRID will in fact be a 2-dimensional array (an array where each element is an array)
// e.g. for 100 squares, GRID is an array of size 10, where each element is an array of size 10
// types of square (can give these any numbers so long as they are different):
const GRID_EMPTY = 0;
const GRID_WALL = 1;
const GRID_SHIP = 2;
const GRID_BURNT = 3;
const GRID_FAIL = 4;
ABWorld.init3d ( startRadiusConst, maxRadiusConst, SKYCOLOR );
loadTextures();
function loadTextures() // now has 3 textures to load
{
var loader1 = new THREE.TextureLoader();
var loader2 = new THREE.TextureLoader();
var loader3 = new THREE.TextureLoader();
loader1.load ( TEXTURE_SHIP, function ( texture )
{
ship_texture = texture;
if ( ship_texture && wall_texture && fire_texture ) makeEverything(); // if all textures loaded from files
});
loader2.load ( TEXTURE_WALL, function ( texture )
{
wall_texture = texture;
if ( ship_texture && wall_texture && fire_texture ) makeEverything();
});
loader3.load ( TEXTURE_FIRE, function ( texture )
{
fire_texture = texture;
if ( ship_texture && wall_texture && fire_texture ) makeEverything();
});
}
//--- two 2D grids -------------------------------------------------------------------------------
function translateMy ( i, j )
// the absolute 3D position of an (i,j) square on my grid is:
// width x = (i * squaresize)
// height y = 0
// depth z = (j * squaresize)
{
var v = new THREE.Vector3();
v.x = (i * squaresize) ;
v.y = 0 ;
v.z = (j * squaresize) ;
return v;
}
function translateOpponent ( i, j )
// put 2nd grid beside the 1st grid, offset on the x dimension
{
var v = new THREE.Vector3();
v.x = (i * squaresize) + MAXPOS ;
v.y = 0 ;
v.z = (j * squaresize) ;
return v;
}
//--- translate 3D point to a square in opponent's grid ----------------------------------
// this looks more complicated than it is!
// all explained previously
const minOpponentX = MAXPOS + (1 * squaresize) - squaresize/2;
const maxOpponentX = MAXPOS + ((gridsize-2) * squaresize) + squaresize/2;
const minOpponentZ = (1 * squaresize) - squaresize/2;
const maxOpponentZ = ((gridsize-2) * squaresize) + squaresize/2;
function point2address ( p )
{
if ( p.x < minOpponentX ) return null;
if ( p.x > maxOpponentX ) return null;
if ( p.z < minOpponentZ ) return null;
if ( p.z > maxOpponentZ ) return null;
// else we are within the non-wall part of the opponent's grid
var i = ( p.x - MAXPOS ) / squaresize;
var j = p.z / squaresize;
i = Math.round ( i );
j = Math.round ( j );
return ( new THREE.Vector2 ( i, j ) );
}
function makeEverything()
{
makeGrids();
makeSea();
makeShips();
}
function makeGrids()
{
var i,j, shape, thecube, position, lookat;
shape = new THREE.BoxGeometry ( squaresize, squaresize, squaresize );
for ( i = 0; i < gridsize ; i++ )
{
GRID1[i] = new Array(gridsize); // make each element an array of size "gridsize"
GRID2[i] = new Array(gridsize);
for ( j = 0; j < gridsize ; j++ )
{
if ( ( i==0 ) || ( i==gridsize-1 ) || ( j==0 ) || ( j==gridsize-1 ) )
{
GRID1[i][j] = GRID_WALL;
GRID2[i][j] = GRID_WALL;
thecube = new THREE.Mesh( shape );
thecube.material = new THREE.MeshBasicMaterial( { map: wall_texture } );
position = translateMy(i,j);
thecube.position.copy ( position );
ABWorld.scene.add(thecube);
thecube = new THREE.Mesh( shape );
thecube.material = new THREE.MeshBasicMaterial( { map: wall_texture } );
position = translateOpponent(i,j);
thecube.position.copy ( position );
ABWorld.scene.add(thecube);
}
else
{
GRID1[i][j] = GRID_EMPTY;
GRID2[i][j] = GRID_EMPTY;
}
}
}
// position and "lookat" of camera explained previously:
position = new THREE.Vector3 ( MAXPOS, MAXPOS * 1.2, MAXPOS * 1.3 );
lookat = translateMy ( gridsize, gridsize/2 );
ABWorld.cameraCustom ( position, lookat );
}
function makeSea()
{
var shape = new THREE.PlaneGeometry ( MAXPOS * 2, MAXPOS ); // make a "sea" plane for 2 grids side by side
thesea = new THREE.Mesh ( shape );
thesea.material = new THREE.MeshBasicMaterial ( { color: 'lightblue', side: THREE.DoubleSide } );
thesea.rotation.set ( Math.PI / 2, 0, 0 ); // rotate it 90 degrees
// "position" of sea explained previously
thesea.position.set ( MAXPOS - squaresize/2, - squaresize * 0.4 , MAXPOS/2 - squaresize/2 );
ABWorld.scene.add ( thesea );
}
function makeShips()
// make randomised ships in my grid
{
var p, i, j, shape, thecube, position;
shape = new THREE.BoxGeometry ( squaresize, squaresize, squaresize );
for ( p = 1; p <=5 ; p++ )
{
thecube = new THREE.Mesh( shape );
thecube.material = new THREE.MeshBasicMaterial( { map: ship_texture } );
i = AB.randomIntAtoB ( 1, gridsize-2 ); // positions 0 and (gridsize-1) are walls
j = AB.randomIntAtoB ( 1, gridsize-2 );
position = translateMy ( i, j );
thecube.position.copy ( position );
ABWorld.scene.add(thecube);
GRID1[i][j] = GRID_SHIP;
}
}
// Mouse click all explained previously:
ABHandler.initMouseDrag = function ( x, y )
{
trySquare ( x, y );
ABHandler.initCameraDrag ( x, y );
};
function trySquare ( x, y )
{
if ( ABWorld.hitsObject ( x, y, thesea ) )
{
var p = ABWorld.hitsObjectPoint ( x, y, thesea );
var a = point2address ( p );
if ( a )
{
// write some HTML to the "run header"
AB.msg ( "<h3 style='color:green'> select opponent square (" + a.x + "," + a.y + ") </h3>" );
// make a square of fire at that location
var i = a.x;
var j = a.y;
GRID2[i][j] = GRID_BURNT;
var shape = new THREE.BoxGeometry ( squaresize, squaresize, squaresize );
var thecube = new THREE.Mesh( shape );
thecube.material = new THREE.MeshBasicMaterial( { map: fire_texture } );
var position = translateOpponent ( i, j );
thecube.position.copy ( position );
ABWorld.scene.add(thecube);
}
}
}
// === end of code ===========================================================================================================
// Exercise:
// At the start of the run, and during the run, look at the contents of GRID1 in the console by typing its name. Then click arrow to expand.
// Same for GRID2 and any other variable.
// Outcomes: Student can:
// Learn how to construct an array and access elements in it.
// Learn how to examine complex objects in the console.