Code viewer for World: Batman VS Joker (clone by ...

// Cloned by Rajesab Nadaf on 9 Nov 2023 from World "Complex World" by Starter user 
// Please leave this clone trail here.
 



// ==== Starter World =================================================================================================
// This code is designed for use on the Ancient Brain site.
// This code may be freely copied and edited by anyone on the Ancient Brain site.
// To include a working run of this program on another site, see the "Embed code" links provided on Ancient Brain.
// ====================================================================================================================



// =============================================================================================
// More complex starter World 
// 3d-effect Maze World (really a 2-D problem)
// Movement is on a semi-visible grid of squares 
//
// This more complex World shows:
// - Skybox
// - Internal maze (randomly drawn each time)
// - Enemy actively chases agent
// - Music/audio
// - 2D world (clone this and set show3d = false)
// - User keyboard control (clone this and comment out Mind actions to see)
// =============================================================================================


// =============================================================================================
// Scoring:
// Bad steps = steps where enemy is within one step of agent.
// Good steps = steps where enemy is further away. 
// Score = good steps as percentage of all steps.
//
// There are situations where agent is trapped and cannot move.
// If this happens, you score zero.
// =============================================================================================


 





// ===================================================================================================================
// === Start of tweaker's box ======================================================================================== 
// ===================================================================================================================

// The easiest things to modify are in this box.
// You should be able to change things in this box without being a JavaScript programmer.
// Go ahead and change some of these. What's the worst that could happen?


AB.clockTick       = 100;    

	// Speed of run: Step every n milliseconds. Default 100.
	
AB.maxSteps        = 1000;    

	// Length of run: Maximum length of run in steps. Default 1000.

AB.screenshotStep  = 50;   
  
	// Take screenshot on this step. (All resources should have finished loading.) Default 50.




//---- global constants: -------------------------------------------------------

 const show3d = !0; // Switch between 3d and 2d view (both using Three.js)
//  const show3d = !1;
 const TEXTURE_WALL 	= '/uploads/rajesabnadaf/ep-henry-single-sided.jpeg' ;
 const TEXTURE_MAZE 	= '/uploads/rajesabnadaf/fullsizeoutput_a8bd.jpeg' ;
 const TEXTURE_AGENT 	= '/uploads/rajesabnadaf/icons8-batman-500.png' ;
 const TEXTURE_ENEMY 	= '/uploads/rajesabnadaf/logo-joker-face-on-black-background-vector-47361294.jpg' ;

 
const MUSIC_BACK  = '/uploads/rajesabnadaf/205936__pikachu09__im-batman.wav' ;
const SOUND_ALARM = '/uploads/rajesabnadaf/345876__littlerainyseasons__crazy-villain-laugh.mp3' ;

const gridsize = 40; // 20; // number of squares along side of world  

const NOBOXES =  Math.trunc ( (gridsize * gridsize) / 4 );  // 5 
// density of maze - number of internal boxes
// (bug) use trunc or can get a non-integer

const squaresize = 100; // size of square in pixels

const MAXPOS = gridsize * squaresize; // length of one side in pixels

const SKYCOLOR = 0xddffdd; // a number, not a string

 
const startRadiusConst = MAXPOS * 0.8 ; // distance from centre to start the camera at
const maxRadiusConst = MAXPOS * 10  ; // maximum distance from camera we will render things  



//--- change ABWorld defaults: -------------------------------

ABHandler.MAXCAMERAPOS = maxRadiusConst ;

ABHandler.GROUNDZERO = true; // "ground" exists at altitude zero



//--- skybox: -------------------------------
// skybox is a collection of 6 files
// x,y,z positive and negative faces have to be in certain order in the array
// https://threejs.org/docs/#api/en/loaders/CubeTextureLoader

// mountain skybox, credit:
// http://stemkoski.github.io/Three.js/Skybox.html

 const SKYBOX_ARRAY = [
                "/uploads/rajesabnadaf/px2.png",
                "/uploads/rajesabnadaf/nx2.png",
                "/uploads/rajesabnadaf/py2.png",
                "/uploads/rajesabnadaf/ny2.png",
                "/uploads/rajesabnadaf/pz2.png",
                "/uploads/rajesabnadaf/nz2.png"
                
                ];



//--- Mind can pick one of these actions -----------------

const ACTION_LEFT = 0;  
const ACTION_RIGHT = 1;
const ACTION_UP = 2;
const ACTION_DOWN = 3;
const ACTION_STAYSTILL = 4;

// in initial view, (smaller-larger) on i axis is aligned with (left-right)
// in initial view, (smaller-larger) on j axis is aligned with (away from you - towards you)


// contents of a grid square

const GRID_BLANK = 0;
const GRID_WALL = 1;
const GRID_MAZE = 2;

var BOXHEIGHT; // 3d or 2d box height

var GRID = new Array(gridsize); // can query GRID about whether squares are occupied, will in fact be initialised as a 2D array  
var search_grid = new Array(gridsize);  //this grid will be used by the A* algorithm

var theagent, theenemy;
 
var wall_texture, agent_texture, enemy_texture, maze_texture;


// enemy and agent position on squares
var ei, ej, ai, aj;

var badsteps;
var goodsteps;



function loadResources() // asynchronous file loads - call initScene() when all finished
{
var loader1 = new THREE.TextureLoader();
var loader2 = new THREE.TextureLoader();
var loader3 = new THREE.TextureLoader();
var loader4 = new THREE.TextureLoader();

loader1.load ( TEXTURE_WALL, function ( thetexture )  
{
thetexture.minFilter  = THREE.LinearFilter;
wall_texture = thetexture;
if ( asynchFinished() ) initScene(); // if all file loads have returned
});

loader2.load ( TEXTURE_AGENT, function ( thetexture )  
{
thetexture.minFilter  = THREE.LinearFilter;
agent_texture = thetexture;
if ( asynchFinished() ) initScene();
});

loader3.load ( TEXTURE_ENEMY, function ( thetexture )  
{
thetexture.minFilter  = THREE.LinearFilter;
enemy_texture = thetexture;
if ( asynchFinished() ) initScene();
});

loader4.load ( TEXTURE_MAZE, function ( thetexture )  
{
thetexture.minFilter  = THREE.LinearFilter;
maze_texture = thetexture;
if ( asynchFinished() ) initScene();
});

}


function asynchFinished() // all file loads returned
{
if ( wall_texture && agent_texture && enemy_texture && maze_texture )   return true;
else return false;
}


 

//--- grid system -------------------------------------------------------------------------------
// my numbering is 0 to gridsize-1


function occupied ( i, j ) // is this square occupied
{
 if ( ( ei == i ) && ( ej == j ) ) return true; // variable objects
 if ( ( ai == i ) && ( aj == j ) ) return true;

 if ( GRID[i][j] == GRID_WALL ) return true; // fixed objects
 if ( GRID[i][j] == GRID_MAZE ) return true;

 return false;
}

//---------------------- CodeChanges  made by Rajesab Nadaf | Start ----------------------

// function to specifically check if the spot is either occupied
// by wall or maze
function isMazeWallBlocked ( i, j ) // is this square occupied
{

  if (GRID[i][j] == GRID_WALL || GRID[i][j] == GRID_MAZE) return true;
  return false;
}
//---------------------- CodeChanges  made by Rajesab Nadaf | End ----------------------
 
// translate my (i,j) grid coordinates to three.js (x,y,z) coordinates
// logically, coordinates are: y=0, x and z all positive (no negative)    
// logically my dimensions are all positive 0 to MAXPOS
// to centre everything on origin, subtract (MAXPOS/2) from all dimensions

function translate ( i, j )
{
var v = new THREE.Vector3();

v.y = 0;
v.x = ( i * squaresize ) - ( MAXPOS/2 );  
v.z = ( j * squaresize ) - ( MAXPOS/2 );  

return v;
}

//----------------------CodeChanges  made by Rajesab Nadaf | Start---------------------------

function FindPoint(i, j) {
  // Coordinates in the grid
  this.i = i;
  this.j = j;

  // A* algorithm values
  this.f = 0;
  this.g = 0;
  this.h = 0;

  // Flag to indicate if the spot is part of the maze
  this.maze = search_grid[i][j] === GRID_MAZE;

  // Neighboring spots
  this.neighbors = [];

  // Function to identify and add neighboring spots to the current spot
  this.addNeighbors = function () {
    // Define the possible directions for neighbors
    const directions = [
      { x: 1, y: 0 }, // Right
      { x: -1, y: 0 }, // Left
      { x: 0, y: 1 }, // Down
      { x: 0, y: -1 }, // Up
    ];

    // Loop through each direction to find neighbors
    for (const dir of directions) {
      const newX = i + dir.x;
      const newY = j + dir.y;

      // Check if the new coordinates are within the grid boundaries
      if (newX >= 0 && newX < gridsize && newY >= 0 && newY < gridsize) {
        // Add the neighboring spot to the array
        this.neighbors.push(search_grid[newX][newY]);
      }
    }
  };
}



//----------------------CodeChanges  made by Rajesab Nadaf | End---------------------------

function initScene() // all file loads have returned
{
var i,j, shape, thecube;

// set up GRID as 2D array

for ( i = 0; i < gridsize ; i++ )
GRID[i] = new Array(gridsize);


// set up walls

for ( i = 0; i < gridsize ; i++ )
 for ( j = 0; j < gridsize ; j++ )
if ( ( i==0 ) || ( i==gridsize-1 ) || ( j==0 ) || ( j==gridsize-1 ) )
{
GRID[i][j] = GRID_WALL;
shape    = new THREE.BoxGeometry ( squaresize, BOXHEIGHT, squaresize );
thecube  = new THREE.Mesh( shape );
thecube.material = new THREE.MeshBasicMaterial( { map: wall_texture } );

thecube.position.copy ( translate(i,j) );   // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates
ABWorld.scene.add(thecube);
}
else
    GRID[i][j] = GRID_BLANK;


   // set up maze
   
    for ( var c=1 ; c <= NOBOXES ; c++ )
{
i = AB.randomIntAtoB(1,gridsize-2); // inner squares are 1 to gridsize-2
j = AB.randomIntAtoB(1,gridsize-2);

GRID[i][j] = GRID_MAZE ;

shape    = new THREE.BoxGeometry ( squaresize, BOXHEIGHT, squaresize );
thecube  = new THREE.Mesh( shape );
thecube.material = new THREE.MeshBasicMaterial( { map: maze_texture } );  

thecube.position.copy ( translate(i,j) );   // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates
ABWorld.scene.add(thecube);
}

   
// set up enemy
// start in random location

do
{
 i = AB.randomIntAtoB(1,gridsize-2);
 j = AB.randomIntAtoB(1,gridsize-2);
}
while ( occupied(i,j) );    // search for empty square

ei = i;
ej = j;

shape    = new THREE.BoxGeometry ( squaresize, BOXHEIGHT, squaresize );
theenemy = new THREE.Mesh( shape );
theenemy.material =  new THREE.MeshBasicMaterial( { map: enemy_texture } );
ABWorld.scene.add(theenemy);
drawEnemy();  



// set up agent
// start in random location

do
{
 i = AB.randomIntAtoB(1,gridsize-2);
 j = AB.randomIntAtoB(1,gridsize-2);
}
while ( occupied(i,j) );    // search for empty square

ai = i;
aj = j;
 
shape    = new THREE.BoxGeometry ( squaresize, BOXHEIGHT, squaresize );
theagent = new THREE.Mesh( shape );
theagent.material =  new THREE.MeshBasicMaterial( { map: agent_texture } );
ABWorld.scene.add(theagent);
drawAgent();


//----------------------CodeChanges  made by Rajesab Nadaf | Start---------------------------

  //make a 2D searchGrid Array
  for (var z = 0; z < gridsize; z++) {
        search_grid[z] = new Array(gridsize);
    }
 
  // create a new spot for each of the grid position
  for(var x =0;x<gridsize;x++){
        for(var y=0;y<gridsize;y++){
           
            search_grid[x][y] = new FindPoint(x,y);
        }
    }
   
    //add neighbors to a FindPoint
    for(var m =0;m<gridsize;m++){
        for(var n=0;n<gridsize;n++){
           
            search_grid[m][n].addNeighbors(search_grid);
        }
    }

//----------------------CodeChanges  made by Rajesab Nadaf | End---------------------------

  // finally skybox
  // setting up skybox is simple
  // just pass it array of 6 URLs and it does the asych load
 
  ABWorld.scene.background = new THREE.CubeTextureLoader().load ( SKYBOX_ARRAY, function()
{
ABWorld.render();

AB.removeLoading();

AB.runReady = true; // start the run loop
});
 

 
}
 
 
 


// --- draw moving objects -----------------------------------


function drawEnemy() // given ei, ej, draw it
{
theenemy.position.copy ( translate(ei,ej) );   // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates

ABWorld.lookat.copy ( theenemy.position ); // if camera moving, look back at where the enemy is  
}


function drawAgent() // given ai, aj, draw it
{
theagent.position.copy ( translate(ai,aj) );   // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates

ABWorld.follow.copy ( theagent.position ); // follow vector = agent position (for camera following agent)
}

//-----------------CodeChanges  made by Rajesab Nadaf | Start ------------------------------

// Heuristic Function for A *
function heuristic(pointA, pointB) {
  const distanceI = Math.abs(pointA.i - pointB.i);
  const distanceJ = Math.abs(pointA.j - pointB.j);

  // Using Euclidean distance instead of Manhattan distance for a more accurate heuristic
  const euclideanDistance = Math.sqrt(distanceI ** 2 + distanceJ ** 2);

  return euclideanDistance;
}

// Function to remove an element from an array
function removeFromArray(array, elementToRemove) {
  for (let index = array.length - 1; index >= 0; index--) {
    if (array[index] === elementToRemove) {
      array.splice(index, 1);
    }
  }
}


// Function to delete the previous path.
function removeThePath() {
  pathArray.forEach(uuid => {
    const box = ABWorld.scene.getObjectByProperty("uuid", uuid);
    if (box) {
      ABWorld.scene.remove(box);
    }
  });

  // Clear the pathArray
  pathArray.length = 0;
}


// Function to display the path.
pathArray = [];
function showPath(path) {
  for (let i = 1; i < path.length - 1; i++) {
    const x = path[i].i;
    const y = path[i].j;

    // Create a colorful material for the boxes
    const material = new THREE.MeshBasicMaterial({
      color: new THREE.Color(Math.random(), Math.random(), Math.random())
    });

    // Adjust the size of the boxes
    const geometry = new THREE.BoxGeometry(squaresize / 2, squaresize / 2, squaresize / 2);

    // Create a mesh with the new material and geometry
    const box = new THREE.Mesh(geometry, material);

    // Copy the position to the box
    box.position.copy(translate(x, y));

    // Add the box to the scene
    ABWorld.scene.add(box);

    // Store the UUID of the box for potential removal later
    pathArray[i] = box.uuid;
  }
}



// Function to apply the A* algorithm to find the shortest Path.
function aStarPathFinder(grid, e, a) {
  var path = [];
  var openSet = [e];
  var closedSet = [];
  var return_spot;

  while (openSet.length > 0) {
    var winner = openSet.reduce((minIndex, currentIndex, index) => {
      return currentIndex.f < openSet[minIndex].f ? index : minIndex;
    }, 0);

    var current = openSet[winner];

    if (current == a) {
      // reached enemy, return the first element in the path array
      var temp = current;
      path.push(temp);
      while (temp.previous) {
        if (temp.previous == e) return_spot = temp;
        path.push(temp.previous);
        temp = temp.previous;
      }
      showPath(path);
      break;
    } else {
      // continue search
      removeFromArray(openSet, current);
      closedSet.push(current);

      var neighbors = current.neighbors;
      for (var j = 0; j < neighbors.length; j++) {
        var neighbor = neighbors[j];

        if (!closedSet.includes(neighbor) && !isMazeWallBlocked(neighbor.i, neighbor.j)) {
          var tempG = current.g + heuristic(neighbor, a);

          if (openSet.includes(neighbor)) {
            if (tempG < neighbor.g) {
              neighbor.g = tempG;
            }
          } else {
            neighbor.g = tempG;
            openSet.push(neighbor);
          }

          neighbor.h = heuristic(neighbor, a);
          neighbor.f = neighbor.g + neighbor.h;
          neighbor.previous = current;
        }
      }
    }
  }

  return return_spot;
}


//--------CodeChanges  made by Rajesab Nadaf | End----------------

// --- take actions -----------------------------------



function moveLogicalEnemy() {
  // Get the current enemy and agent positions
  var enemyPosition = search_grid[ei][ej];
  var agentPosition = search_grid[ai][aj];

  // Using the A* algorithm to find the best path.
  var newPosition = aStarPathFinder(search_grid, enemyPosition, agentPosition);

  // Clear search_grid
  for (var i = 0; i < gridsize; i++) {
    for (var j = 0; j < gridsize; j++) {
      var currentSearchGrid = search_grid[i][j];
      currentSearchGrid.f = 0;
      currentSearchGrid.h = 0;
      currentSearchGrid.g = 0;
      currentSearchGrid.previous = undefined;
    }
  }

  // Move to the new position if it's not occupied
  if (!occupied(newPosition.i, newPosition.j)) {
    ei = newPosition.i;
    ej = newPosition.j;
  }
}

//------------------CodeChanges  made by Rajesab Nadaf | End-------------------

function moveLogicalAgent( a ) // this is called by the infrastructure that gets action a from the Mind
{
 var i = ai;
 var j = aj;

      if ( a == ACTION_LEFT ) i--;
 else if ( a == ACTION_RIGHT ) i++;
 else if ( a == ACTION_UP ) j++;
 else if ( a == ACTION_DOWN ) j--;

 if ( ! occupied(i,j) )
 {
  ai = i;
  aj = j;
 }
}




// --- key handling --------------------------------------------------------------------------------------
// This is hard to see while the Mind is also moving the agent:
// AB.mind.getAction() and AB.world.takeAction() are constantly running in a loop at the same time
// have to turn off Mind actions to really see user key control

// we will handle these keys:

var OURKEYS = [ 37, 38, 39, 40 ];

function ourKeys ( event ) { return ( OURKEYS.includes ( event.keyCode ) ); }


function keyHandler ( event )
{
if ( ! AB.runReady ) return true; // not ready yet

   // if not one of our special keys, send it to default key handling:

if ( ! ourKeys ( event ) ) return true;

// else handle key and prevent default handling:

if ( event.keyCode == 37 )   moveLogicalAgent ( ACTION_LEFT );  
    if ( event.keyCode == 38 )   moveLogicalAgent ( ACTION_DOWN   );
    if ( event.keyCode == 39 )   moveLogicalAgent ( ACTION_RIGHT );
    if ( event.keyCode == 40 )   moveLogicalAgent ( ACTION_UP );  

// when the World is embedded in an iframe in a page, we want arrow key events handled by World and not passed up to parent

event.stopPropagation(); event.preventDefault(); return false;
}





// --- score: -----------------------------------


function badstep() // is the enemy within one square of the agent
{
 if ( ( Math.abs(ei - ai) < 2 ) && ( Math.abs(ej - aj) < 2 ) ) return true;
 else return false;
}


function agentBlocked() // agent is blocked on all sides, run over
{
 return ( occupied (ai-1,aj) &&
occupied (ai+1,aj) &&
occupied (  ai,aj+1) &&
occupied (  ai,aj-1) );
}


function updateStatusBefore(a)
// this is called before anyone has moved on this step, agent has just proposed an action
// update status to show old state and proposed move
{
 var x = AB.world.getState();
 AB.msg ( " Step: " + AB.step + " &nbsp; x = (" + x.toString() + ") &nbsp; a = (" + a + ") " );
}


function   updateStatusAfter() // agent and enemy have moved, can calculate score
{
 // new state after both have moved
 
 var y = AB.world.getState();
 var score = ( goodsteps / AB.step ) * 100;

 AB.msg ( " &nbsp; y = (" + y.toString() + ") <br>" +
" Bad steps: " + badsteps +
" &nbsp; Good steps: " + goodsteps +
" &nbsp; Score: " + score.toFixed(2) + "% ", 2 );
}





AB.world.newRun = function()
{
AB.loadingScreen();

AB.runReady = false;  

badsteps = 0;
goodsteps = 0;


if ( show3d )
{
BOXHEIGHT = squaresize;
ABWorld.init3d ( startRadiusConst, maxRadiusConst, SKYCOLOR  );
}    
else
{
BOXHEIGHT = 1;
ABWorld.init2d ( startRadiusConst, maxRadiusConst, SKYCOLOR  );    
}


loadResources(); // aynch file loads
// calls initScene() when it returns

document.onkeydown = keyHandler;

};



AB.world.getState = function()
{
 var x = [ ai, aj, ei, ej ];
  return ( x );  
};



AB.world.takeAction = function ( a )
{
  updateStatusBefore(a); // show status line before moves

  moveLogicalAgent(a);

  if ( ( AB.step % 2 ) == 0 ) // slow the enemy down to every nth step
    moveLogicalEnemy();

  setTimeout(removeThePath, 100); // change made by Rajesab Nadaf
  if ( badstep() )  badsteps++;
  else   goodsteps++;

   drawAgent();
   drawEnemy();
   updateStatusAfter(); // show status line after moves  


  if ( agentBlocked() ) // if agent blocked in, run over
  {
AB.abortRun = true;
goodsteps = 0; // you score zero as far as database is concerned
musicPause();
soundAlarm();
  }
   
   
};



AB.world.endRun = function()
{
  musicPause();
  if ( AB.abortRun ) AB.msg ( " <br> <font color=red> <B> Agent trapped. Final score zero. </B> </font>   ", 3  );
  else     AB.msg ( " <br> <font color=green> <B> Run Again!!!. </B> </font>   ", 3  );
};

 
AB.world.getScore = function()
{
    // only called at end - do not use AB.step because it may have just incremented past AB.maxSteps
   
    var s = ( goodsteps / AB.maxSteps ) * 100;   // float like 93.4372778
    var x = Math.round (s * 100);                // 9344
    return ( x / 100 );                          // 93.44
};


 




// --- music and sound effects ----------------------------------------

var backmusic = AB.backgroundMusic ( MUSIC_BACK );

function musicPlay()   { backmusic.play();  }
function musicPause()  { backmusic.pause(); }


function soundAlarm()
{
var alarm = new Audio ( SOUND_ALARM );
alarm.play(); // play once, no loop
}