// Cloned by Sunil Jagtap on 10 Nov 2021 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 =true;// Switch between 3d and 2d view (both using Three.js) const TEXTURE_WALL ='/uploads/jagtaps2/wall2.jpg';const TEXTURE_MAZE ='/uploads/jagtaps2/WallGrey.jpeg';const TEXTURE_AGENT ='/uploads/jagtaps2/harry_potter.jpg';const TEXTURE_ENEMY ='/uploads/jagtaps2/Villain.jpeg';// credits:// http://commons.wikimedia.org/wiki/File:Old_door_handles.jpg// https://commons.wikimedia.org/wiki/Category:Pac-Man_icons// https://commons.wikimedia.org/wiki/Category:Skull_and_crossbone_icons// http://en.wikipedia.org/wiki/File:Inscription_displaying_apices_(from_the_shrine_of_the_Augustales_at_Herculaneum).jpgconst MUSIC_BACK ='/uploads/starter/Defense.Line.mp3';const SOUND_ALARM ='/uploads/starter/air.horn.mp3';// credits:// http://www.dl-sounds.com/royalty-free/defense-line/// http://soundbible.com/1542-Air-Horn.html const gridsize =50;// number of squares along side of world const NOBOXES =Math.trunc ((gridsize * gridsize)/7);// 3// density of maze - number of internal boxes// (bug) use trunc or can get a non-integer const squaresize =100;// size of square in pixelsconst MAXPOS = gridsize * squaresize;// length of one side in pixels const SKYCOLOR =14548957;// a number, not a string const startRadiusConst = MAXPOS *0.8;// distance from centre to start the camera atconst maxRadiusConst = MAXPOS *10;// maximum distance from camera we will render things const ALLOW_DIAGONAL_MOVE=false;const SHOW_PATH=true;const WALLMOVENO =2;const WALLMOVETICK =2;//--- 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.htmlconst SKYBOX_ARRAY =["/uploads/jagtaps2/beach.jpg","/uploads/jagtaps2/beach.jpg","/uploads/jagtaps2/blue_sky.jpg","/uploads/jagtaps2/beachSand.jpg","/uploads/jagtaps2/beach.jpg","/uploads/jagtaps2/beach.jpg"];// space skybox, credit:// http://en.spaceengine.org/forum/21-514-1// x,y,z labelled differently/*
const SKYBOX_ARRAY = [
"/uploads/starter/sky_pos_z.jpg",
"/uploads/starter/sky_neg_z.jpg",
"/uploads/starter/sky_pos_y.jpg",
"/uploads/starter/sky_neg_y.jpg",
"/uploads/starter/sky_pos_x.jpg",
"/uploads/starter/sky_neg_x.jpg"
];
*/// urban photographic skyboxes, credit:// http://opengameart.org/content/urban-skyboxes/*
const SKYBOX_ARRAY = [
"/uploads/starter/posx.jpg",
"/uploads/starter/negx.jpg",
"/uploads/starter/posy.jpg",
"/uploads/starter/negy.jpg",
"/uploads/starter/posz.jpg",
"/uploads/starter/negz.jpg"
];
*/// ===================================================================================================================// === End of tweaker's box ==========================================================================================// ===================================================================================================================// You will need to be some sort of JavaScript programmer to change things below the tweaker's box.//--- 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 squareconst GRID_BLANK =0;const GRID_WALL =1;const GRID_MAZE =2;const GRID_ENEMY =3;const GRID_AGENT =4;var BOXHEIGHT;// 3d or 2d box height var GRID =newArray(gridsize);// can query GRID about whether squares are occupied, will in fact be initialised as a 2D array var theagent, theenemy;var wall_texture, agent_texture, enemy_texture, maze_texture;// enemy and agent position on squaresvar ei, ej, ai, aj;var badsteps;var goodsteps;var aStarPath =[];
let wall_boxes =[];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 )returntrue;elsereturnfalse;}//--- grid system -------------------------------------------------------------------------------// my numbering is 0 to gridsize-1function occupied ( i, j )// is this square occupied{if(( ei == i )&&( ej == j ))returntrue;// variable objects if(( ai == i )&&( aj == j ))returntrue;if( GRID[i][j]== GRID_WALL )returntrue;// fixed objects if( GRID[i][j]== GRID_MAZE )returntrue;returnfalse;}// 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;}function initScene()// all file loads have returned {var i,j, shape, thecube;// set up GRID as 2D arrayfor( i =0; i < gridsize ; i++)
GRID[i]=newArray(gridsize);// set up wallsfor( 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
wall_boxes.push(thecube);ABWorld.scene.add(thecube);}// set up enemy // start in random locationdo{
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 locationdo{
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();// finally skybox // setting up skybox is simple // just pass it array of 6 URLs and it does the asych load // if(!agentBlocked()){// moveWalls();// }ABWorld.scene.background =new THREE.CubeTextureLoader().load ( SKYBOX_ARRAY,function(){ABWorld.render();
AB.removeLoading();
AB.runReady =true;// start the run loop});}var diagonal = ALLOW_DIAGONAL_MOVE,
showPath = SHOW_PATH,
showPathArray =[];class coordinates {
constructor(e, t){this.i = e,this.j = t
}}var closedSet, openSet;var start =new coordinates(), target =new coordinates(),
aStarGrid =[];function aStarSpot(e, t){this.i = e,this.j = t,this.f =0,this.g =0,this.h =0,this.neighbors =[],this.parent =void0;this.addNeighbors =function(){var e =this.i;var t =this.j;if(e < gridsize -1){this.neighbors.push(aStarGrid[e +1][t]);}if(e >0){this.neighbors.push(aStarGrid[e -1][t]);}if(t < gridsize -1){this.neighbors.push(aStarGrid[e][t +1]);}if(t >0){this.neighbors.push(aStarGrid[e][t -1]);}if(diagonal){if(e >0&& t >0){this.neighbors.push(aStarGrid[e -1][t -1]);}if(e < gridsize -1&& t >0){this.neighbors.push(aStarGrid[e +1][t -1]);}if(e >0&& t < gridsize -1){this.neighbors.push(aStarGrid[e -1][t +1]);}if(e < gridsize -1&& t < gridsize -1){this.neighbors.push(aStarGrid[e +1][t +1]);}}}}function initialAStarGrid(){var e, t;for(console.log("initialGame"), e =0; e < gridsize; e++)for(aStarGrid[e]=[], t =0; t < gridsize; t++){
aStarGrid[e][t]=new aStarSpot(e, t);}for(e =0; e < gridsize; e++)for(t =0; t < gridsize; t++){
aStarGrid[e][t].addNeighbors();}}function isOccupied(e, t){switch(GRID[e][t]){case GRID_WALL:case GRID_MAZE:return!0;default:returnfalse}}function sortFunction(e, t){return e.f === t.f ?0: e.f > t.f ?1:-1}function heuristic(e, t){return diagonal ?Math.pow(e.i - t.i,2)+Math.pow(e.j - t.j,2):Math.abs(e.i - e.i)+Math.abs(e.j - t.j)}function nextMove(e, t){//console.log(t.i+" "+t.j);var r, a, o = aStarGrid[t.i][t.j], s = aStarGrid[e.i][e.j];
openSet =[], closedSet =[];var d =new coordinates(e.i, e.j);// console.log(s);for(i=0; i < aStarPath.length; i++){ABWorld.scene.remove(aStarPath[i]);// Clear path}for(openSet.push(s), i =0; i < gridsize; i++)for(j =0; j < gridsize; j++){(r = aStarGrid[i][j]).f = r.h = r.g =0;
r.parent =null;}for(; openSet.length >0&& r !== o;)for(openSet.sort(sortFunction), r = openSet.shift(), closedSet.push(r), n =0; n < r.neighbors.length; n++){
a = r.neighbors[n];if(closedSet.includes(a)|| isOccupied(a.i, a.j)){
closedSet.push(a);}else{if(a.i == r.i || a.j == r.j ){ a.g = r.g +10;}else{
a.g = r.g +14;}
a.h = heuristic(a, o);
a.f = a.g + a.h;
a.parent = r;if(!openSet.includes(a)){
openSet.push(a);}}}if(r != o)return d;for(; r.parent != s;) showPath && showPathArray.push(r), r = r.parent;return showPath && showPathArray.push(s), d.i = r.i, d.j = r.j, d
}function drawPath(){var e, t, r =new THREE.LineBasicMaterial({
color:"blue",
linewidth:100}),
a =[];for(i = showPathArray.length; i >1; i--){if((e = showPathArray.shift()).parent){
e = e.parent, a.push(translate(e.i, e.j));}else{
a.push(translate(e.i, e.j));}}
b =new THREE.BufferGeometry().setFromPoints(a);
t =new THREE.Line(b, r);ABWorld.scene.add(t);
aStarPath.push(t);}// --- 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)}// --- take actions -----------------------------------function moveLogicalEnemy(){// move towards agent // put some randomness in so it won't get stuck with barriers
start.i = ei, start.j = ej;
target.i = ai, target.j = aj;
nextMoveByAStar = nextMove(start, target);if(!occupied(nextMoveByAStar.i, nextMoveByAStar.j)){
GRID[ei][ej]= GRID_BLANK;
ei = nextMoveByAStar.i;
ej = nextMoveByAStar.j;
GRID[ei][ej]= GRID_ENEMY;}}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--;elseif( a == ACTION_RIGHT ) i++;elseif( a == ACTION_UP ) j++;elseif( 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 )returntrue;// not ready yet // if not one of our special keys, send it to default key handling:if(! ourKeys ( event ))returntrue;// 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();returnfalse;}// --- score: -----------------------------------function badstep()// is the enemy within one square of the agent{if((Math.abs(ei - ai)<2)&&(Math.abs(ej - aj)<2))returntrue;elsereturnfalse;}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 +" x = ("+ x.toString()+") a = ("+ a +") ");}function updateStatusAfter()// agent and enemy have moved, can calculate score{// new state after both have movedvar y = AB.world.getState();var score =( goodsteps / AB.step )*100;
AB.msg (" y = ("+ y.toString()+") <br>"+" Bad steps: "+ badsteps +" Good steps: "+ goodsteps +" Score: "+ score.toFixed(2)+"% ",2);}
AB.world.newRun =function(){
AB.loadingScreen();
AB.runReady =false;
badsteps =0;
goodsteps =0;
initialAStarGrid();// This will run initial path for A*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();}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();}if(AB.step %2===0&& WALLMOVETICK){
moveWallsWithTick();}
showPath;
drawPath();};
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 over. </B> </font> ",3);};
AB.world.getScore =function(){// only called at end - do not use AB.step because it may have just incremented past AB.maxStepsvar s =( goodsteps / AB.maxSteps )*100;// float like 93.4372778 var x =Math.round (s *100);// 9344return( 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 =newAudio( SOUND_ALARM );
alarm.play();// play once, no loop }function moveWalls(){
let moved_walls=[];function nestedMoveWalls(){if(moved_walls.length<WALLMOVENO &&!agentBlocked()){
wall_To_Move = wall_boxes.sample();
position = revtranslate(wall_To_Move.position);
x =[position.x -1, position.x, position.x +1].sample();
y =[position.y -1, position.y, position.y +1].sample();
newPosition = translate(x, y)if(!(occupied(x,y)|| moved_walls.includes([newPosition.x, newPosition.y].toString())))// Should not be occupied or already moved{//setTimeout(function(){
wall_To_Move.position.copy(newPosition);
moved_walls.push([newPosition.x, newPosition.y].toString());
GRID[position.x][position.y]= GRID_BLANK;
GRID[x][y]= GRID_MAZE;
console.log("wall is moved from: "+ position.x +","+ position.y +"to: "+ x +","+ y);
console.log("we have moved "+ moved_walls.length +" number of walls.");//}, WALLMOVETICK*1000);}
nestedMoveWalls();}else{const currentDate =newDate();
console.log("Time: "+currentDate.getMinutes()*60+currentDate.getSeconds());}}
nestedMoveWalls();}
let counter=0;function moveWallsWithTick(){
setTimeout(function(){
let ProgramConstant=(WALLMOVETICK*(WALLMOVETICK+1)/2)+11;if(counter>=ProgramConstant|| counter==1){
moveWalls();}
counter++;},counter*WALLMOVETICK*1000);//multiply by 1000 just to convert milli seconds to seconds}function revtranslate(e){var o =new THREE.Vector2();
o.x =(e.x + MAXPOS /2)/ squaresize;
o.y =(e.z + MAXPOS /2)/ squaresize;return o;}Array.prototype.sample =function(){returnthis[Math.floor(Math.random()*this.length)];};