// Cloned by Cbum on 5 Dec 2022 from World "Zombie Death Baby" by Starter user
// Please leave this clone trail here.
AB.clockTick = 100; // Speed of run: Step every n milliseconds.
AB.maxSteps = 1000000; // Length of run: Maximum length of run in steps.
AB.screenshotStep = 200;
AB.drawRunControls = false; // Get rid of the Run/Step/Pause controls
//--- Global Variables -------------------------------------------------------
const show3d = false;
const gameClock = new THREE.Clock();
const TEXTURE_WALL = '/uploads/kevin/maze4.jpg' ;
const TEXTURE_MAZE = '/uploads/kevin/maze4.jpg' ;
const TEXTURE_USER = '/uploads/kevin/pacman.png' ;
const TEXTURE_GHOST = '/uploads/kevin/ghost.png' ;
const TEXTURE_DEAD = '/uploads/kevin/deadghost.png' ;
const SOUND_GHOST = '/uploads/kevin/ghostsiren.mp3';
const SOUND_EATGHOST = '/uploads/kevin/eatghost.mp3';
const MUSIC_BACK = '/uploads/kevin/wakawaka.mp3' ;
const SOUND_GAMEOVER = '/uploads/kevin/gamelose.mp3' ;
const gridsize = 24; // number of squares along side of world
const NOBOXES = Math.trunc ( (gridsize * gridsize) / 7 );
const squaresize = 100; // size of square in pixels
const MAXPOS = gridsize * squaresize; // length of one side in pixels
const SKYCOLOR = 0xddffdd;
const startRadiusConst = MAXPOS * 1 ; // distance from centre to camera
const maxRadiusConst = MAXPOS * 10 ; // maximum distance the camera will render things
//--- CSS Style Used For Score Output: ---------------------------------
const scoreStyle = "font-weight: bold; font-family: Segoe Print, Comic Sans, Impact, Bolton;";
const GHOSTS_SPAWN = 2; // how many ghosts will multiply when one is eaten
const SCORE_KILL = 100; // add this to score for every ghost eaten
const SCORE_CLOSE = -10; // add this to score for every step close to a ghost
//--- Change ABWorld defaults: -------------------------------
ABHandler.MAXCAMERAPOS = maxRadiusConst ;
ABHandler.GROUNDZERO = true; // "ground" exists at altitude zero
ABWorld.drawCameraControls = false;
//--- Skybox: -------------------------------
const SKYBOX_ARRAY = [
"/uploads/kevin/uuu4.jpg",
"/uploads/kevin/uuu3.jpg",
"/uploads/kevin/uuu4.jpg",
"/uploads/kevin/uuu2.jpg",
"/uploads/kevin/uuu.jpg",
"/uploads/kevin/uuu.jpg",
];
document.write ( ` <style>
.mybutton
{
border-radius: 0px;
background-color: darkslategrey;
}
.mybutton:hover { background-color: darkcyan; }
</style> ` );
var resourcesLoaded = false;
var splashClicked = false;
const ACTION_LEFT = 0; // in initial view, (smaller-larger) on i axis is aligned with (left-right)
const ACTION_RIGHT = 1; // in initial view, (smaller-larger) on j axis is aligned with (away from you - towards you)
const ACTION_UP = 2;
const ACTION_DOWN = 3;
const ACTION_STAYSTILL = 4;
const GRID_BLANK = 0; // contents of a grid square
const GRID_WALL = 1;
const GRID_MAZE = 2;
const GRID_USER = 3;
const GRID_GHOST = 4;
const GRID_DEAD = 5;
var BOXHEIGHT;
var GRID = new Array ( gridsize ); // will in fact be a 2D array
var user;
var ghosts = new Array ( 1 ); // start at 1 and increase using array.push()
var wall_texture, user_texture, ghost_texture, dead_texture, maze_texture;
// User position
var ai, aj;
var score;
function loadResources()
{
var loader1 = new THREE.TextureLoader();
var loader2 = new THREE.TextureLoader();
var loader3 = new THREE.TextureLoader();
var loader4 = new THREE.TextureLoader();
var loader5 = new THREE.TextureLoader();
loader1.load ( TEXTURE_WALL, function ( thetexture )
{
thetexture.minFilter = THREE.LinearFilter;
wall_texture = thetexture;
if ( asynchFinished() ) initScene();
});
loader2.load ( TEXTURE_USER, function ( thetexture )
{
thetexture.minFilter = THREE.LinearFilter;
user_texture = thetexture;
if ( asynchFinished() ) initScene();
});
loader3.load ( TEXTURE_GHOST, function ( thetexture )
{
thetexture.minFilter = THREE.LinearFilter;
ghost_texture = thetexture;
if ( asynchFinished() ) initScene();
});
loader4.load ( TEXTURE_MAZE, function ( thetexture )
{
thetexture.minFilter = THREE.LinearFilter;
maze_texture = thetexture;
if ( asynchFinished() ) initScene();
});
loader5.load ( TEXTURE_DEAD, function ( thetexture )
{
thetexture.minFilter = THREE.LinearFilter;
dead_texture = thetexture;
if ( asynchFinished() ) initScene();
});
}
function asynchFinished() // all file loads returned
{
if ( wall_texture && user_texture && ghost_texture && dead_texture && maze_texture ) return true;
else return false;
}
//--- Grid System -------------------------------------------------------------------------------
function occupied ( i, j ) // is this square occupied
{
return ( GRID[i][j] != GRID_BLANK );
}
// 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;
for ( i = 0; i < gridsize ; i++ )
GRID[i] = new Array(gridsize); // set up GRID as 2D array
// 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 first ghost
ghosts[0] = newGhost();
// set up User
// 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;
GRID[i][j] = GRID_USER;
shape = new THREE.BoxGeometry ( squaresize, BOXHEIGHT, squaresize );
user = new THREE.Mesh( shape );
user.material = new THREE.MeshBasicMaterial( { map: user_texture } );
user.position.copy ( translate(ai,aj) ); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates
ABWorld.scene.add(user);
// finally skybox
ABWorld.scene.background = new THREE.CubeTextureLoader().load ( SKYBOX_ARRAY, function()
{
ABWorld.render();
console.log ( "Resources loaded." );
resourcesLoaded = true;
if ( resourcesLoaded && splashClicked )
AB.runReady = true; // start run loop
});
}
// --- Ghosts -----------------------------------
function newGhost()
{
var i, j;
do
{
i = AB.randomIntAtoB(1,gridsize-2);
j = AB.randomIntAtoB(1,gridsize-2);
}
while ( occupied(i,j) ); // search for empty square
GRID[i][j] = GRID_GHOST;
var shape = new THREE.BoxGeometry( squaresize, BOXHEIGHT, squaresize );
var thecube = new THREE.Mesh( shape );
thecube.material = new THREE.MeshBasicMaterial( { map: ghost_texture } );
thecube.position.copy ( translate(i,j) ); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates
ABWorld.scene.add(thecube);
return ( new Array ( thecube, i, j ) ); // array, object plus i,j position
}
function newGhosts()
{
for ( var c=1 ; c <= GHOSTS_SPAWN ; c++ )
{
var ghost = newGhost();
ghosts.push ( ghost ); // add to array
}
}
function moveGhosts()
{
for ( var c = 0; c < ghosts.length; c++ )
{
var theghost = ghosts[c][0];
var ei = ghosts[c][1];
var ej = ghosts[c][2];
var i, j;
// move towards User
// put some randomness in so it won't get stuck with barriers
if ( ei < ai ) i = AB.randomIntAtoB(ei, ei+1);
if ( ei == ai ) i = ei;
if ( ei > ai ) i = AB.randomIntAtoB(ei-1, ei);
if ( ej < aj ) j = AB.randomIntAtoB(ej, ej+1);
if ( ej == aj ) j = ej;
if ( ej > aj ) j = AB.randomIntAtoB(ej-1, ej);
if ( ! occupied(i,j) ) // if no obstacle then move, else just miss a turn for this ghost
{
GRID[ei][ej] = GRID_BLANK;
GRID[i][j] = GRID_GHOST;
theghost.position.copy ( translate(i,j) ); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates
ghosts[c] = new Array ( theghost, i, j ); // update list of positions
}
}
}
// --- User -----------------------------------
function moveUSER( a )
{
var i = ai;
var j = aj;
if ( a == ACTION_LEFT ) i--; // movement caused by user actions
else if ( a == ACTION_RIGHT ) i++;
else if ( a == ACTION_UP ) j++;
else if ( a == ACTION_DOWN ) j--;
if ( ! occupied(i,j) ) // else just miss a turn
{
GRID[ai][aj] = GRID_BLANK;
GRID[i][j] = GRID_USER;
ai = i;
aj = j;
user.position.copy ( translate(ai,aj) ); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates
}
}
// --- User Actions - Keyboard and Touch Handling Functions: ----------------------------------------
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 ( ! ourKeys ( event ) ) return true; // if not handling this key, send it to default:
// else handle it and prevent default:
if ( event.keyCode == 37 ) moveUSER ( ACTION_LEFT );
if ( event.keyCode == 38 ) moveUSER ( ACTION_DOWN );
if ( event.keyCode == 39 ) moveUSER ( ACTION_RIGHT );
if ( event.keyCode == 40 ) moveUSER ( ACTION_UP );
event.stopPropagation(); event.preventDefault(); return false;
}
var startX, startY;
var dragevents; // number of events in the current drag
function initDrag ( x, y ) // x,y position on screen
{
if ( tryHitghosts ( x, y ) ); // check if this is a tap not a drag - and if it hits a ghost
};
function drag ( x, y ) // compare with previous x,y position on screen to get direction of drag
{
if ( ! AB.runReady ) return true; // not ready yet
if ( ( dragevents % 4 ) == 0 ) // slow it down to respond to every nth event - too many events
{
if ( x > startX ) moveUSER ( ACTION_RIGHT );
else if ( x < startX ) moveUSER ( ACTION_LEFT );
if ( y > startY ) moveUSER ( ACTION_UP );
else if ( y < startY ) moveUSER ( ACTION_DOWN );
}
dragevents++;
startX = x;
startY = y;
};
// --- Eat Ghosts and Make New Ones -------------------------------------------------------------------
function tryHitghosts ( x, y ) // we did an x,y touch/click, did it hit a ghost
{
for ( var c = 0; c < ghosts.length; c++ )
{
var theghost = ghosts[c][0];
var ei = ghosts[c][1];
var ej = ghosts[c][2];
if ( ABWorld.hitsObject ( x, y, theghost ) ) // detect hit object
{
soundGHOSTDEATH(); // make a noise
score = score + SCORE_KILL ; // increase score
GRID[ei][ej] = GRID_DEAD ; // stationary obstacle - basically part of the maze now
theghost.material = new THREE.MeshBasicMaterial( { map: dead_texture } );
// remove theghost from array, so it will no longer move
ghosts.splice(c,1);
// make new ghost / ghosts:
newGhosts();
return; // assume only can hit one ghost
}
}
}
// --- Game Score -----------------------------------
function GhostClose()
// is a ghost close to (within one square of) the User
// note because of the wall, co-ordinates at +1 and -1 always exist
{
if ( GRID[ai-1][aj-1] == GRID_GHOST ) return true;
if ( GRID[ai-1][aj] == GRID_GHOST ) return true;
if ( GRID[ai-1][aj+1] == GRID_GHOST ) return true;
if ( GRID[ai][aj-1] == GRID_GHOST ) return true;
if ( GRID[ai][aj] == GRID_GHOST ) return true;
if ( GRID[ai][aj+1] == GRID_GHOST ) return true;
if ( GRID[ai+1][aj-1] == GRID_GHOST ) return true;
if ( GRID[ai+1][aj] == GRID_GHOST ) return true;
if ( GRID[ai+1][aj+1] == GRID_GHOST ) return true;
return false;
}
function userBlocked() // User is blocked on the 4 compass sides (not diagonal)
{
return ( occupied (ai-1,aj) &&
occupied (ai+1,aj) &&
occupied ( ai,aj+1) &&
occupied ( ai,aj-1) );
}
AB.world.newRun = function()
{
score = 0;
if ( show3d )
{
BOXHEIGHT = squaresize;
ABWorld.init3d ( startRadiusConst, maxRadiusConst, SKYCOLOR );
}
else
{
BOXHEIGHT = 1;
ABWorld.init2d ( startRadiusConst, maxRadiusConst, SKYCOLOR );
}
// newRun can run behind intro screen
// do not start run loop until resources ready AND intro screen is dismissed
AB.runReady = false;
loadResources(); // aynch file loads
// calls initScene() when it returns
// redirect keyboard and touch event handling to my own functions:
document.onkeydown = keyHandler;
// override ABHandler default (which is camera control) to use my own functions:
myControls();
};
function myControls()
{
ABHandler.initTouchDrag = initDrag;
ABHandler.touchDrag = drag
ABHandler.initMouseDrag = initDrag;
ABHandler.mouseDrag = drag
}
AB.world.nextStep = function ()
{
var time_remaining = 30;
var time_elapsed = Math.trunc(gameClock.getElapsedTime());
var clock = (time_remaining - time_elapsed)
var timelapsed = "<p>Time Remaining: " + clock + "s</p>";
$("#user_span4").html( timelapsed );
if (clock == 0){
AB.abortRun = 2;
soundAlarm();
}
for ( var c = 0; c < ghosts.length; c++ )
if ( Math.random() < 0.005 )
Ghostsound(); // ghost noises now and then, increasing as no. of ghosts increases
if ( ( AB.step % 2 ) == 0 ) moveGhosts(); // slow ghosts down to every nth step
if ( GhostClose() ) score = score + SCORE_CLOSE; // lose points every step you are close to a ghost
AB.msg (" Score: <span style='" + scoreStyle + "'>" + score + "</span>" );
if ( userBlocked() ) // if User blocked in, run over
{
AB.abortRun = 1;
musicPause();
soundAlarm();
}
};
AB.world.endRun = function()
{
musicPause();
AB.newSplash( splashScreenEnd() ), document.getElementById("splashbutton").innerHTML = "Play Again!", document.getElementById("splashbutton").onclick = function () { location.reload() };
};
// --- Background Music ----------------------------------------
var backmusic;
function initMusic() // called by user interaction
{
backmusic = AB.backgroundMusic ( MUSIC_BACK );
}
function musicPlay() { backmusic.play(); }
function musicPause() { backmusic.pause(); }
// --- Sound Effects ----------------------------------------
var thealarm = new Audio ( SOUND_GAMEOVER );
var ghostsound = new Audio( SOUND_GHOST );
var ghostdeath = new Audio( SOUND_EATGHOST );
function soundAlarm()
{
thealarm.play();
}
function Ghostsound() // allow multiple sounds at same time
{
var a = new Audio( SOUND_GHOST );
a.play();
}
function soundGHOSTDEATH() // allow multiple sounds at same time
{
var a = new Audio( SOUND_EATGHOST );
a.play();
}
// --- Intro Screen --------------------------------------------------------------
function instructionsHtml() // HTML format string of instructions for intro screen
{
var s = "Pac-Man with a twist... Run around the maze from the ghosts whilst clicking them to rack up your points! Game ends when you are trapped by the ghosts or timer runs out!";
if ( AB.onDesktop() ) s = s + " Desktop instructions: Arrow keys to move. Click the ghosts to eat them. " ;
else s = s + " Mobile instructions: Touch to move. Touch the ghost to eat them. " ;
s = s + SCORE_KILL + " points for eating a ghost. " + SCORE_CLOSE + " points for every step you are close to a ghost.";
return ( s );
}
// display intro screen with instructions
AB.newSplash (instructionsHtml());
function splashScreenEnd() {
if ( AB.abortRun == 1) var e = "<h2> <center> Game Over! You have been eaten! </center> </h2>";
if ( AB.abortRun == 2) var e = "<h2> <center> Times up! You have survived! </center> </h2>";
var f = "<h2> Your Final Score: </h2>";
return e + f + score;
}
// touch on intro screen button will mark multiple audio objects as good for JS to call without further user interaction
AB.splashClick ( function ()
{
thealarm.play(); thealarm.pause();
ghostsound.play();ghostsound.pause();
ghostdeath.play(); ghostdeath.pause();
initMusic();
AB.removeSplash(); // remove intro screen
splashClicked = true;
if ( resourcesLoaded && splashClicked )
AB.runReady = true; // start run loop
});