JavaScript World Creator by Christopher Topalian

Topalian
JavaScript
World Creator
by
Christopher Topalian
All Rights Reserved Copyright 2020-2021
College of Scripting Music & Science CollegeOfScripting.weebly.com

Dedicated
to
God the Father













<html>
<head>
<title>Topalian JavaScript World Creator</
title>
<style>
#thePlayer{
position: absolute;
width: 70px;
height: 70px;
background: rgb(73, 100, 150);
z-index: 1001;
word-wrap: break-word;
font-family: Tahoma;
line-height: 18px;
font-size: 14px;
font-weight: bold;

padding: 4px;
text-align: center;
border-radius: 7px;
}

#theBackground{
position: absolute;
width: 250000px;
height: 250000px;
background: black;
left: 0px;
top: 0px;
opacity: 1.0;
z-index: -100;
background-image: url("https://
collegeofscripting.weebly.com/uploads/
6/4/4/8/64482293/stars-nice-edited_orig.png");
/* background-repeat: repeat; */
/*https://collegeofscripting.weebly.com/
uploads/6/4/4/8/64482293/stars-nice_orig.png */
}

.divBackground
{
background: black;

background-image: url("https://
collegeofscripting.weebly.com/uploads/
6/4/4/8/64482293/stars-nice-edited_orig.png");
/* background-repeat: repeat; */
}

body
{
color:rgb(255, 255, 255); /*font color*/
}

textarea
{
height: 100px;
overflow-y: scroll;
font-family: Tahoma;
font-size: 13pt;
background-color: rgb(170, 197, 216);
}

.ourButton
{
/*width: 55px;*/
border: solid 1px rgb(100, 100, 255);
color: white;

font-weight: normal;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 0px;
text-align: center;
text-decoration-style: double;
font-size: 15px;
border-radius: 7px;
opacity: 1.0;
margin: 2px;
}
.ourButton:hover
{
}

a:link
{
color:rgb(109, 209, 248);
}

a:visited
{
color:rgb(133, 134, 209);
}

</style>
</head>
<body onload = "whenLoaded();">


<div id = "thePlayer">WASD<br> to Move</div>


<div id = "theBackground"></div>

<textarea id = "textAreaStructureData" placehold
er = "Structure Data" rows = "4" cols = "50" type
= "text">
</textarea>
<br>
<button id = "copyButton" class="ourButton" onc
lick = "copyIt();">COPY</button>&nbsp &nbsp O
R &nbsp &nbsp

<button id = "downloadButton" class = "ourButto
n" onclick = "downloadData();">DOWNLOAD</
button>

<script>
//Show the structuresArray data in a Text Area tha
t is scrollable
function showData()
{
document.getElementById("textAreaStructureD
ata").value = "structuresArray=" + JSON.stringify
(structuresArray, null, ' ') + ";" + "\n\n" ;
}
//We can copy the Text Area easily by clicking the
Copy button
function copyIt()
{
let copyText = document.getElementById("text
AreaStructureData");
copyText.select();
copyText.setSelectionRange(0, 1000000);
document.execCommand("copy");
alert("Successfully COPIED. \nNow PASTE it in
TopalianWorldDATA.js");

//alert("Successfully Copied " + copyText.value)
;
}
//or we can download the structuresData Array to
our downloads folder as a text file with the extens
ion .js automatically added.
//this function below creates a text file called Top
alianWorldDATA.js.
//Each time we download it, it will change the nam
e to be TopalianWorldDATA(1).js and then the nex
t time TopalianWorldDATA(2).js and so on.
//so we make sure to change that name when putt
ing it in our folder to TopalianWorldDATA.js
function downloadData()
{
//get the data from the Text Area
//let data = document.getElementById("textArea
StructureData").value;
//get the data from the structuresArray and for
mat it nicely
let ourData = "structuresArray=" + JSON.stringi
fy(structuresArray, null, ' ') + ";" + "\n\n";
//create an anchor element

let ourElement = document.createElement("a");
//we can choose .txt .html or in our case, we us
e .js
ourElement.download = "TopalianWorldDATA.js
";
//we choose the data and kind
let theKind = new Blob([ourData], {
type: "text/plain"
});
ourElement.href = window.URL.createObjectUR
L(theKind);
ourElement.click();
}
function structuresMenu()
{
let structureDiv = document.createElement("div
");
structureDiv.style.position = "absolute";
structureDiv.style.left = ourPlayer.x - 250 + 'px';
structureDiv.style.top = ourPlayer.y - 100 +'px';

structureDiv.style.width = 300 +'px';
structureDiv.style.height = 455 +'px';
structureDiv.style.color = "white";
structureDiv.style.zIndex = "1003";
structureDiv.style.border = "solid 5px rgba(0,0,
200,1.0)";
structureDiv.style.fontFamily = "exo";
structureDiv.style.fontWeight = "normal";
structureDiv.style.fontSize = "medium";
//structureDiv.style.background = "grey";
structureDiv.style.textAlign = "center";
structureDiv.setAttribute("class", "divBackgrou
nd");
//"+criteria+"
//structureDiv.id = whichArray[i].id;
//structureDiv.id = Math.floor(350000 + Math.ran
dom() * 9750000);
structureDiv.id = "structuresMenu"

//Remove Button
//structureDiv.innerHTML += '<button onclick=r
emoveElement(\''+structureDiv.id+'\') class="ourB
utton" style="color: aqua">X</button>';
structureDiv.innerHTML += '<button onclick=re
moveElement(\''+structureDiv.id+'\') class="ourBu
tton" style="margin-bottom: -4px">X</button>';
//WE BUILD THE MENU USING innerHTML
structureDiv.innerHTML += '<div><hr><span st
yle="color:rgb(255, 255, 255)">STRUCTURE OPTI
ONS</span><hr>';
//keep, for using button option later
//structureDiv.innerHTML+= '<button onclick="a
ddListen(\'click\', createStructure);" class=\'ourBu
tton\'>STRUCTURE MODE ON</button><br>';
structureDiv.innerHTML += 'Letter B to Start Str
ucture Mode <hr>';
structureDiv.innerHTML += 'Left Click to Place
a Structure <hr>';
structureDiv.innerHTML += 'Shift + 1 to GoTo 1s
t Structure <hr>';

structureDiv.innerHTML += 'Shift + 2 to GoTo 2
nd Structure etc<hr>';
//structureDiv.innerHTML+= '<button onclick="c
olorAllStructures();" class=\'ourButton\'>Color All
Structures</button><br>';
structureDiv.innerHTML += 'Letter C Colors All
Structures<br> and Creates a Row Menu<br> to G
oTo Any Structure<hr>';
structureDiv.innerHTML += 'Left Click any Struc
ture for more info <hr>';
//structureDiv.innerHTML+= '<button onclick="r
emoveAllStructures();" class=\'ourButton\'>Remo
ve All Structures</button><br>';
structureDiv.innerHTML += 'Delete Button <br>
Removes All Structures<hr>';
//structureDiv.innerHTML+= '<button onclick="r
emoveListen(\'click\', createStructure);" class=\'o

urButton\'>STRUCTURE MODE OFF</
button><br>';
structureDiv.innerHTML += 'Esc Button to End
Structure Mode<hr><hr>';

/*
If the Structures Menu Div already exists, the
n remove it and create a new Structures Menu Div
wherever the player is located
*/
if(document.getElementById("structuresMenu")
)
{
removeElement("structuresMenu");

document.body.append(structureDiv);
}
else
{
document.body.append(structureDiv);
}
}
/*
Get the Position of any Element that has specifie
d id

*/
function getPos(theId)
{
theId = document.getElementById(theId);
let theRect = theId.getBoundingClientRect();
let theRectY = theId.getBoundingClientRect().to
p + window.scrollY;
let posXY = {
x:parseInt(theRect.x) + parseInt(theRect.widt
h)/2 + window.scrollX,
y:parseInt(theRectY) + parseInt(theRect.heig
ht)/2
};
return posXY;
}
/*
Get the SIZE of any Element that has specified id
*/
function getSize(theId)
{
let theRect = theId.getBoundingClientRect();
let sizeXY = {

x: parseInt(theRect.width),
y: parseInt(theRect.height)
};
return sizeXY;
}
/*
This function below shows the name, id, posX, po
sY, sizeX and sizeY of any structure that we left cl
icked.
The 1st time we left click the structure, it shows
more info.
The 2nd time we left click the structure, it shows
only the simplified position data.
//NOTE: Need to redesign this function to work co
rrectly for when we click a second structure, whil
e the first structure's info is already open.
*/
let ourCounter = 1;
function getStructureInfo(theId)
{
if(ourCounter % 2) //if ourCounter is an odd nu
mber
{

document.getElementById(theId.id).innerHTM
L = "<br><br><br>" + theId.id + "<br>" + "X " + ge
tPos(theId.id).x + "<br>" + "Y " + getPos(theId.id).
y + "<br>" + "Height is " + getSize(theId.id).x + "<
br>" + "Width is " + getSize(theId.id).y;

ourCounter += 1;
console.log(theId.id); //show the id of the stru
cture
//NOTE: It currently adds the 2px BORDER of
the structure to the position and size data. We wil
l redesign this later.
}
else //else if ourCounter is an even number
{
document.getElementById(theId.id).innerHTM
L = theId.id + "<br>" + parseInt(getPos(theId.id).x)
+ ", " + parseInt(getPos(theId.id).y);
//NOTE: It currently adds the 2px BORDER of
the structure to the position data. We will redesig
n this later.
ourCounter += 1;
}

}
/*
CREATE a STRUCTURE:
After the Letter B on the keyboard is pressed to a
ctivate Structure Mode, we can place structures i
n the world using the Left Mouse Button.
Esc Button is used to deactivate Structure Mode.
*/
let structuresArray = [ ];
let structureId = 1;
function createStructure(theEvent, theX, theY)
{
theX = theEvent.pageX;
theY = theEvent.pageY;
sizeX = 110;
sizeY = 45;
let ourStructure = document.createElement("di
v");
ourStructure.style.position = "absolute";
ourStructure.style.width = sizeX +'px';
ourStructure.style.height = sizeY +'px';

//For a Center Position System, use this way bel
ow
//We minus the structures size divided by itself.
//This way we place structures according to thei
r center, instead of their top left corner.
ourStructure.style.left = theX - (sizeX / 2) +'px';
ourStructure.style.top = theY - (sizeY / 2) + 'px';
/*
//For a Top Left Coordinate System, use this wa
y below
ourStructure.style.left = theX +'px';
ourStructure.style.top = theY + 'px';
*/
//ourStructure.id = "STRUCTURE" + structureId;
ourStructure.id = "STRUCTURE" + (structureId
+ structuresArray.length);
ourStructure.setAttribute('onclick', 'getStructur
eInfo(\''+ourStructure.id+'\');');

ourStructure.style.color = "white";
ourStructure.style.zIndex = "1002";

ourStructure.style.fontFamily = "exo";
ourStructure.style.fontWeight = "bold";
ourStructure.style.fontSize = "medium";
ourStructure.style.background = "black";
ourStructure.style.textAlign = "center";
ourStructure.style.border = "solid 2px rgba(100,
100,255,1.0)";
ourStructure.innerHTML = ourStructure.id + "<b
r>" + theX + ", " + theY;
let structureLocations =
{
name: ourStructure.id,
id: ourStructure.id,
posX: theX,
posY: theY,
sizeX: sizeX,
sizeY: sizeY
};
//add the new structure's name, id, posX, posY,
sizeX, and sizeY to our structuresArray
structuresArray.push(structureLocations);
console.log(JSON.stringify(structuresArray));

document.body.append(ourStructure);
}
function createStructuresFromFile()
{
//console.log(JSON.stringify(structuresArray));
for(let z = 0; z < structuresArray.length; z++)
{
let ourStructure = document.createElement("di
v");
ourStructure.style.position = "absolute";
//For a Center Position System, use this way bel
ow
//We minus the structures size divided by itself.
//This way we place structures according to thei
r center, instead of their top left corner.
ourStructure.style.left = structuresArray[z].pos
X - (structuresArray[z].sizeX / 2) + 'px';
ourStructure.style.top = structuresArray[z].pos
Y - (structuresArray[z].sizeY / 2) + 'px';
/*
//For a Top Left Coordinate System, use this wa
y below

ourStructure.style.left = structuresArray[z].pos
X + 'px';
ourStructure.style.top = structuresArray[z].pos
Y + 'px';
*/
ourStructure.style.width = structuresArray[z].si
zeX +'px';
ourStructure.style.height = structuresArray[z].s
izeY +'px';
//"STRUCTURE" + structureId;
ourStructure.id = structuresArray[z].id;
ourStructure.setAttribute('onclick', 'getStructur
eInfo(\''+ourStructure.id+'\');');

ourStructure.style.color = "white";
ourStructure.style.zIndex = "1002";
ourStructure.style.fontFamily = "exo";
ourStructure.style.fontWeight = "bold";
ourStructure.style.fontSize = "medium";
ourStructure.style.background = "black";
ourStructure.style.textAlign = "center";
ourStructure.style.border = "solid 2px rgba(100,
100,255,1.0)";

//Show the id of the structure and also the simp
lified position data
ourStructure.innerHTML = structuresArray[z].id
+ "<br>" + structuresArray[z].posX + ", " + structu
resArray[z].posY;
document.body.append(ourStructure);
}
//console.log(JSON.stringify(structuresArray));
}
/*
Color All Structures
*/
function colorAllStructures()
{
let theStructure;
for(let x = 1; x <= structuresArray.length; x++)
{
theStructure = "STRUCTURE" + x;
document.getElementById(theStructure).styl
e.backgroundColor = "rgb(70,95,140)"
}

}

/*
Remove All Structures
*/
function removeAllStructures()
{
let theStructure;
for(let x = 1; x <= structuresArray.length; x++)
{
theStructure = "STRUCTURE" + x;
removeElement(theStructure);
}
//reset the array
structuresArray = [ ];

//reset the structureId to 1
structureId = 1;
}

/*
By Pressing the C button, the player creates a me
nu that is populated with entries from each struct
ure made.

The player can then click on any of the entries to
be taken to the location of that structure.
*/
function rowOfStructures(theX, theY, sizeX, sizeY
, whichArray)
{
theX -= sizeX;
let idCounter = 0;
/*
//This code below allows us to create an id to b
e used for location data by our menu.
let idForPosition = document.createElement("di
v");
idForPosition.style.position = "absolute";
idForPosition.style.left = theX +'px';
idForPosition.style.top = theY -22 + 'px';
idForPosition.id = "rowOfStructures";
document.body.append(idForPosition);
*/
//used with structuresArray
for(let i = 0; i < whichArray.length; i++)
{
theX = theX + sizeX; //columns across

//if(whichArray[i].tag == criteria1)
if(whichArray)
{
//filter for a MONTH, meaning, SHOW ONLY
1 month
//if(whichArray[i].date.substring(0,2) == 3)
//filter for Multiple MONTHS
//if(whichArray[i].date.substring(0,2) == 8 ||
whichArray[i].date.substring(0,2) == 9)
//filter for a DATE
//if(whichArray[i].date.substring(0,10) == "0
2/29/2018")
//filter for Multiple DATES
2/29/2018" || whichArray[i].date.substring(0,10) ==
"02/29/2020")
//filter for a DAY, of any month, of any year
//filter for a YEAR
//if(whichArray[i].date.substring(6,10) == 20
19)

//filter for MULTIPLE YEARS
19 || whichArray[i].date.substring(6,10) == 2020)
//filter for MONTH and YEAR
//if(whichArray[i].date.substring(0,2) == 2 &
& whichArray[i].date.substring(6,10) == 2020)
//You can replace the if statement below,
//with one of the options above.
if(whichArray) //shows all items
{
let theTextArea = document.createEleme
nt("div");
theTextArea.style.position = "absolute";
theTextArea.style.left = theX + 17 +'px';
//theTextArea.style.top = theY + 30 +'px';

theTextArea.style.top = ourPlayer.y + 30
+'px';
theTextArea.style.color = "white";
theTextArea.style.zIndex = "998";

theTextArea.style.border = "solid 2px rgb
a(0,0,100,1.0)";
theTextArea.style.fontFamily = "exo";
theTextArea.style.fontWeight = "normal";
theTextArea.style.fontSize = "medium";
theTextArea.style.width = sizeX - 30 +'px';
theTextArea.resize = "none";
theTextArea.style.height = sizeY - 50 +'px
';
//theTextArea.style.background = "grey";
theTextArea.style.textAlign = "center";
theTextArea.setAttribute("readonly", "tru
e");
theTextArea.setAttribute("class", "divBac
kground");
theTextArea.innerHTML += '<button oncli
ck="scrollToStructure(\''+whichArray[i].id+'\');" cl
ass=\'ourButton\'>GoTo</button><br>';
theTextArea.innerHTML += whichArray[i].
name + "<br>";

id + "<br>";
posX + "<br>";
posY + "<br>";
sizeX + "<br>";
sizeY + "<br>";
theTextArea.value += whichArray[i].name
+ "\n";
theTextArea.value += whichArray[i].id + "\
n";
theTextArea.value += whichArray[i].posX
+ "\n";
theTextArea.value += whichArray[i].posY
+ "\n";
theTextArea.value += whichArray[i].sizeX
+ "\n";
theTextArea.value += whichArray[i].sizeY
+ "\n";
idCounter += 1;

// theTextArea.id = Math.floor(350000 + M
ath.random() * 9750000);
theTextArea.id = idCounter;
/*
If the Structures Row already exists, re
move it, and create a new Structures Row wherev
er the player is
*/
if(document.getElementById(theTextArea
.id))
{
removeElement(theTextArea.id);

document.body.append(theTextArea);
}
else
{
}
}
}
}
}

/*

Telport the Player to the Chosen Structure Loca
tion
*/
function scrollToStructure(theId)
{
ourPlayer.x = getPos(theId).x;
ourPlayer.y = getPos(theId).y;
}
let theNotes =
[
{ note:"Here is a simple Note.", date:"08/22/199
8 12:00 AM", number:"1", tag:"note" },
{ note:"Here is the second note.", date:"08/29/2
018 12:00 AM", number:"2", tag:"note"},
{ note:"Here is the third note.", date:"09/07/201
9 12:00 AM", number:"3", tag:"note"},
{ note:"Here is the fourth note.", date:"10/16/20
20 10:19 AM", number:"4", tag:"note"}
];
function notesWithTextAreaRow(theX, theY, sizeX
, sizeY, whichArray, criteria1)

{
theX -= sizeX;
//This code below allows us to create an id to b
e used for location data by our menu.
let idForPosition = document.createElement("di
v");
idForPosition.style.position = "absolute";
idForPosition.style.left = theX +'px';
idForPosition.style.top = theY -22 + 'px';
idForPosition.id = "notesId";
document.body.append(idForPosition);
//used with theNotes array
for(let i = 0; i < whichArray.length; i++)
{
theX = theX + sizeX; //columns across
if(whichArray[i].tag == criteria1)
{
//filter for a MONTH, meaning, SHOW ONLY
1 month
//filter for Multiple MONTHS

//if(whichArray[i].date.substring(0,2) == 8 ||
whichArray[i].date.substring(0,2) == 9)
//filter for a DATE
2/29/2018")
//filter for Multiple DATES
2/29/2018" || whichArray[i].date.substring(0,10) ==
"02/29/2020")
//filter for a DAY, of any month, of any year
//filter for a YEAR
19)
//filter for MULTIPLE YEARS
19 || whichArray[i].date.substring(6,10) == 2020)
//filter for MONTH and YEAR
//if(whichArray[i].date.substring(0,2) == 2 &
& whichArray[i].date.substring(6,10) == 2020)

//You can replace the if statement below,
//with one of the options above.
if(whichArray) //shows all items
{
let notesCategoryTitle = document.create
Element("div");
notesCategoryTitle.style.position = "abso
lute";
notesCategoryTitle.style.left = theX +'px';
notesCategoryTitle.style.top = theY -35 +
'px';

notesCategoryTitle.style.color = "white";
notesCategoryTitle.style.zIndex = "10";
notesCategoryTitle.style.fontFamily = "ex
o";
notesCategoryTitle.style.fontWeight = "b
old";
notesCategoryTitle.style.fontSize = "medi
um";
notesCategoryTitle.style.background = "
black";

notesCategoryTitle.style.textAlign = "cen
ter";

notesCategoryTitle.style.width = sizeX +'
px';
notesCategoryTitle.style.border = "solid
2px rgba(100,100,255,1.0)";
notesCategoryTitle.innerHTML = "Notes
Row with Text Area Scrolling";
let notesDiv = document.createElement("
div");
notesDiv.style.position = "absolute";
notesDiv.style.left = theX + 'px';
notesDiv.style.top = theY +'px';
notesDiv.style.color = "white";
notesDiv.style.zIndex = "1";
notesDiv.style.border = "solid 2px rgba(0
,0,100,1.0)";
notesDiv.style.fontFamily = "exo";
notesDiv.style.fontWeight = "normal";
notesDiv.style.fontSize = "medium";
notesDiv.style.width = sizeX +'px';
notesDiv.style.height = sizeY +'px';
//notesDiv.style.background = "grey";
notesDiv.style.textAlign = "center";
notesDiv.setAttribute("class", "divBackg
round");

//"+criteria+"
//notesRow.id = whichArray[i].id;
notesDiv.id = Math.floor(350000 + Math.ra
ndom() * 9750000);
let theTextArea = document.createEleme
nt("textarea");
theTextArea.style.position = "absolute";
theTextArea.style.left = theX + 17 +'px';
theTextArea.style.top = theY + 30 +'px';
theTextArea.style.color = "white";
theTextArea.style.zIndex = "1";
theTextArea.style.border = "solid 2px rgb
a(0,0,100,1.0)";
theTextArea.style.fontFamily = "exo";
theTextArea.style.fontWeight = "normal";
theTextArea.style.fontSize = "medium";
theTextArea.style.width = sizeX - 30 +'px';
theTextArea.resize = "none";
theTextArea.style.height = sizeY - 50 +'px
';
//theTextArea.style.background = "grey";
theTextArea.style.textAlign = "center";

theTextArea.setAttribute("readonly", "tru
e");
theTextArea.setAttribute("class", "divBac
kground");
theTextArea.value += whichArray[i].date
+ "\n";
theTextArea.value += whichArray[i].numb
er + "\n";
theTextArea.value += whichArray[i].note
+ "\n";
theTextArea.id = Math.floor(350000 + Mat
h.random() * 9750000);
let printButton = document.createElemen
t("div");
printButton.style.position = "absolute";
printButton.style.left = theX + 4 +'px';
printButton.style.top = theY + 7 + 'px';
printButton.style.color = "white";
printButton.style.zIndex = "10";


printButton.innerHTML += '<button oncli
ck="printTextArea(\''+theTextArea.id+'\');" class="
ourButton">Print</button><br>';

document.body.append(notesDiv);
document.body.append(printButton);
document.body.append(notesCategoryTi
tle);
}
}
}
}
function printTextArea(whichTextArea)
{
let mywindow = window.open('', 'PRINT', 'height
=800,width=1000 top=50, left=100');
mywindow.document.write('<style>img{width:7
5%;</style></head><body>');
mywindow.document.write('<h4>' + document.ti
tle + '</h4>');
mywindow.document.write(document.getEleme
ntById(whichTextArea).value);

mywindow.print();
//mywindow.close();
}

//Wherever the Player is located, put this messag
e upon start
function startMessage()
{
let startingText = document.createElement("div
");
startingText.style.position = "absolute";
startingText.style.left = ourPlayer.x + 160 +'px';
startingText.style.top = ourPlayer.y - 155 + 'px';
startingText.style.width = 400 +'px';
startingText.style.height = 325 +'px';
startingText.style.color = "white";
startingText.style.zIndex = "998";
startingText.style.fontFamily = "exo";
startingText.style.fontWeight = "bold";
startingText.style.fontSize = "13pt";
startingText.style.background = "black";
startingText.style.textAlign = "center";

startingText.style.border = "solid 2px rgba(100,
100,255,1.0)";
startingText.style.paddingLeft = "20px";
startingText.style.paddingRight = "20px";
startingText.style.paddingTop = "4px";
//REMOVE BUTTON
startingText.innerHTML+= '<button onclick=rem
oveElement("startingMessage"); class="ourButto
n" style="margin-bottom: -4px">X</button></
div>';
//We Build our message using innerHTML
startingText.innerHTML+= '<div><hr style="mar
gin-bottom: 0px"><span style="color:rgb(255, 25
5, 255);letter-spacing: 1px;font-size:20px;line-
height:34px;">Dedicated to God the Father</
span><hr style="margin-top: 0px">';
startingText.innerHTML+= '<span style="color:r
gb(30, 175, 255);letter-spacing: 1px;font-
size:20px;line-height:19px;margin-bottom:-
15px">College of Scripting Music & Science</
span><hr><span style="color:rgb(126, 203, 255);li
ne-height:19px; font-size:20px;">Topalian JavaSc

ript World Creator<hr>TOPALIAN GAME ENGINE<
/span><br>';

startingText.innerHTML+= '<span style="font-
family:arial; font-style:normal; line-
height:20px">W is Up, S is Down, A is Left, D is R
ight <br>Numbers 1 to 9 Changes Speed<br>0 - +
BackSpace Home End for FASTER SPEEDS <br>
N for transparent, M for solid<br>Z for Player Men
u<br> Chrome Browser Loads the FASTEST <br>
</span>';

startingText.innerHTML+= '<a href="https://
github.com/ChristopherTopalian" target="_blank"
>www.github.com/ChristopherTopalian</a>';
startingText.id = "startingMessage";
//startingText.innerHTML += '<button onclick=re
moveElement("startingMessage"); class="ourBut
ton">Remove</button>';
document.body.append(startingText);
}

/*

PLAYER MENU PLAYER MENU PLAYER MENU
*/
function playerMenu()
{
let theMenu = document.createElement("div");
theMenu.style.position = "absolute";
theMenu.style.left = ourPlayer.x - 285 +'px';
theMenu.style.top = ourPlayer.y - 127 + 'px';
theMenu.style.width = 200 +'px';
theMenu.style.height = 240 +'px';
theMenu.style.color = "white";
theMenu.style.zIndex = "998";
theMenu.style.fontFamily = "exo";
theMenu.style.fontWeight = "bold";
theMenu.style.fontSize = "large";
theMenu.style.background = "black";
theMenu.style.textAlign = "center";
theMenu.style.border = "solid 2px rgba(100,100,
255,1.0)";
theMenu.style.paddingLeft = "20px";
theMenu.style.paddingRight = "20px";
theMenu.style.paddingTop = "4px";

//REMOVE MENU button
theMenu.innerHTML += '<button onclick=remov
eElement("playerMenu"); class="ourButton" style
="margin-bottom: -4px">X</button>';
//We Build the menu using innerHTML
theMenu.innerHTML+= '<div><hr><span style="
color:rgb(255, 255, 255)">MENU OPTIONS</
span><hr>';
theMenu.innerHTML+= '<span style="color:rgb(
126, 203, 255;font-family:arial; font-
style:normal">GoTo<br></span>';

theMenu.innerHTML+= '<button onclick="scroll
ToSection(\'structureData\');" class=\'ourButton\'>
Structure Data</button>';

theMenu.innerHTML+= '<button onclick="scroll
ToSection(\'notes\');" class=\'ourButton\'>Notes</
button><hr>';

theMenu.innerHTML+= '<span style="color:rgb(
126, 203, 255;font-family:arial; font-
style:normal">Instructions<br></span>';

theMenu.innerHTML+= '<button onclick="struct
uresMenu()" class=\'ourButton\'>STRUCTURES</
button><hr></div>';

theMenu.id = "playerMenu";

//theMenu.innerHTML += '<button onclick=remo
veElement(\''+theMenu.id+'\'); class="ourButton">
Remove</button>';

/*
If the player menu already exists, remove it, a
nd create a new player menu wherever the player
is located.
*/
if(document.getElementById("playerMenu"))
{
removeElement("playerMenu");

document.body.append(theMenu);
}
else
{
document.body.append(theMenu);
}
}

/*
TELEPORT TELEPORT TELEPORT TELEPORT
*/
//Send Player to New Location Based On Choice f
rom playerMenu
function scrollToSection(theSection)
{
if (theSection=="structureData")
{
ourPlayer.x = 100;
ourPlayer.y = getPos("textAreaStructureData
").y;
//remove menu, choice made
//fix in progress
}
if (theSection=="notes")
{
ourPlayer.x = 100;
ourPlayer.y = getPos("notesId").y;
//remove menu, choice made

}
setTimeout(function(){ ourPlaye
r.speedMultiplier = 35 }, 200);
}

/*
Removes any element on the page, that has the
id that was specified
*/
function removeElement(theElement)
{
if(theElement)
{
document.getElementById(theElement).remo
ve();
}
}

/*
SORT SORT SORT SORT
*/
function sortByDate(whichArray, direction)
{
if(direction == "up") //ASCENDING
{

whichArray.sort(function(a,b){return new Dat
e(a.date) - new Date(b.date);});
}
else if(direction == "down") //DESCENDING
{
whichArray.sort(function(b,a){return new Dat
e(a.date) - new Date(b.date);});
}
}
function sortByNumber(whichArray, direction)
{
if(direction == "up") //ASCENDING
{
whichArray.sort(function(a, b)
{
return a.number.localeCompare(b.number);
});
}
else if(direction == "down") //DESCENDING
{
whichArray.sort(function(b, a)
{
return a.number.localeCompare(b.number);
});
}

}
/*
We specify which array we want to sort and in
which direction we want it to be sorted (Ascendin
g or Descending)
*/
function sortIt()
{
//Sort by date
sortByDate(theNotes, "up"); //Ascending
//sortByDate(theNotes, "down"); //Descending

//Sort by number
//sortByNumber(theNotes, "up"); //Ascending
//sortByNumber(theNotes, "down"); //
Descending
}

function loadScript(scriptName)
{
let script = document.createElement('script');
script.onload = function() {
createStructuresFromFile();
};

script.src = scriptName; //"TopalianWorldDATA
.js";
document.getElementsByTagName('head')
[0].append(script);
}
/*
PLAYER PLAYER PLAYER PLAYER
*/
/* Player's start position and id, PlayerLocation */
let ourPlayer = {
x: 374,
y: 175,
speedMultiplier: 10,
playerId: document.getElementById("thePlayer
")
};
/*
CONTROLS CONTROLS CONTROLS CONTROL
S
*/
/* The Keyboard Letter Codes that are Being Pres
sed */
let keyboard = { };
keyboard.UP = 87; //87 is w, 38 is up arrow

keyboard.DOWN = 83; //83 is s, 40 is down arr
ow
keyboard.LEFT = 65; //65 is a, 37 is left arrow
keyboard.RIGHT = 68; //68 is d, 39 is right arro
w
function theControls(e)
{
if(e.keyCode == 90) //Letter z
{
playerMenu(); //open player menu of location
s
}

//SPEED
if(e.keyCode == 192) //tilda button on keyboard
{
ourPlayer.speedMultiplier = 1;
ourPlayer.playerId.innerHTML = "Speed 1";
}
if(e.keyCode == 49 || e.keyCode == 97) //number
1, or numpad 1
{
}

2, or numpad 2
{
}
3, or numpad 3
{
}
if(e.keyCode == 52 || e.keyCode == 100) //
number 4, or numpad 4
{
}
{
}

{
}
{
}
{
}
{
}
0, or numpad 0
{

}
if(e.keyCode == 189) //dash character on keybo
ard
{
}
if(e.keyCode == 187) // + character on keyboard
{
}
if(e.keyCode == 8) //Back space button on keyb
oard
{
}
if(e.keyCode == 36) //Home Button on keyboard
{
}
if(e.keyCode == 35) //End Button on keyboard
{

ourPlayer.playerId.innerHTML = "Speed 1600
";
}

//STRUCTURE MODE
if(e.keyCode == 66) //letter b to activate Structur
e create mode
{
//change the player object background color
ourPlayer.playerId.style.backgroundColor = "
rgb(100, 75, 255)";
//change the text on the player object to indic
ate that structure mode has been activated
ourPlayer.playerId.innerHTML = "STRUC- <br
>-TURE<br> MODE<br>ON";
//Add an event listener for mouse clicks and
when clicked, make a structure at location of mou
se
window.addEventListener("click", createStru
cture, false);
//show the data from structuresArray in the T
ext Area

showData();
}
if(e.keyCode == 27) //Letter ESC to exit Structur
e Mode
{
//change the player object background color
ourPlayer.playerId.style.backgroundColor = "
rgb(73, 100, 150)"; //dark blue

//change the text on the player object to indic
ate that structure mode has been deactivated
ourPlayer.playerId.innerHTML = "STRUC-
<br>-TURE <br> MODE<br>OFF";
//Remove the event listener, that listens for m
ouse clicks. This deactivates structure creation m
ode
window.removeEventListener("click", create
Structure);
}
//Color Structures, Make a uniform row of menu
buttons to teleport to each of the structure we ma
de
if(e.keyCode == 67) //Letter c

{
rowOfStructures(ourPlayer.x, ourPlayer.y, 12
5, 200, structuresArray);
//theX, theY, sizeX, sizeY, whichArray
colorAllStructures();
ourPlayer.playerId.innerHTML = "Colored <br
>All<br> Struc-<br>-tures";
}
if(e.keyCode == 46) //Delete Button
{
//We move the structures row offscreen, as a
simple way of clearing the screen of the row.
rowOfStructures(-1000, -1000, 10, 10, structur
esArray);
removeAllStructures();
ourPlayer.playerId.innerHTML = "Removed <
br>All<br> Struc-<br>-tures";
}
//STRUCTURE MODE
//Shift + 1 brings you to structure 1

if(event.getModifierState("Shift") && e.keyCode
== 49)
{
console.log(structuresArray[0].posX);
ourPlayer.x = getPos("STRUCTURE1").x;
ourPlayer.y = getPos("STRUCTURE1").y;
scrollToSection(ourPlayer.x, ourPlayer.y);
}
== 50)
{
}
if(event.getModifierState("Shift") && e.keyCo
de == 51)
{

}
if(event.getModifierState("Shift") && e.keyCo
de == 52)
{
}
== 53)
{
}
== 54)

{
}
== 55)
{
}
== 56)
{
}

== 57)
{
}
== 48)
{
}
//////// LOAD SCRIPT LOAD SCRIPT ////////
//Loads World Data of Structures Name, Id, Posi
tion and Size
if(e.keyCode == 71) //Letter g on keyboard
{

let tag = document.createElement("script");
tag.src = "TopalianWorldDATA.js";
document.getElementsByTagName("head")
[0].append(tag);

//loadScript("TopalianWorldDATA.js")
createStructuresFromFile();
//shows the structuresArray data in the Text
Area at the top of the screen
showData();
}
if(e.keyCode == 72) //Letter h on keyboard
{
newWindowReport();
}
//TRANSPARENCY
if(e.keyCode == 77) //Letter m
{
ourPlayer.playerId.style.opacity = "1.0";
}
if(e.keyCode == 78) //Letter n
{
ourPlayer.playerId.style.opacity = "0.2";

ourPlayer.playerId.innerHTML= "";
}
//Find out which key was pressed
let theKeyCode = e.keyCode || e.which;
keyboard[theKeyCode] = e.type == 'keydown';
};

/* Character Movement Updating */
let movePlayer = function(theX, theY){
ourPlayer.x += (theX || 0) * ourPlayer.speedMult
iplier;
ourPlayer.y += (theY || 0) * ourPlayer.speedMult
iplier;
ourPlayer.playerId.style.left = ourPlayer.x + 'px'
;
ourPlayer.playerId.style.top = ourPlayer.y + 'px'
;
};

/* Player Controls */
let playerMotion = function(){
if(keyboard[keyboard.LEFT]){
movePlayer(-1,0);

//
ourPlayer.playerId.style.backgroundPosition=-2;
//Note: need to simplify for logical backgroun
dPosition coordinates.
}
if(keyboard[keyboard.RIGHT]){
movePlayer(1,0);
//
ourPlayer.playerId.style.backgroundPosition=302
;
}
if(keyboard[keyboard.UP]){
movePlayer(0,-1);
//
ourPlayer.playerId.style.backgroundPosition=97;
}
if(keyboard[keyboard.DOWN]){
movePlayer(0,1);
//
ourPlayer.playerId.style.backgroundPosition=625
;
}
};
/*
CAMERA CAMERA CAMERA CAMERA

*/
//Camera Follows the Player
function scrollIt()
{
ourPlayer.playerId.scrollIntoView({block: "cent
er", inline: "center"});
}
/*
Get the POSITION of our MOUSE ARROW
*/
function mousePos(theEvent)
{
let mouseX = theEvent.pageX;
let mouseY = theEvent.pageY;
let mousePos = "Mouse" + "<br>" + "X " + mou
seX + "<br>"+ "Y " + mouseY;
console.log(mousePos);
ourPlayer.playerId.innerHTML= mousePos;
//With Every mouse click, we update the Text Ar
ea to show the structuresArray data that we adde
d.
showData();
}

/*
Make a Message Box with a message of the Se
ction name
*/
function makeLine(theYPos, sector, ourMessage)
{
let makeLine = document.createElement("div");
makeLine.style.position = "absolute";
makeLine.style.left = 0 +'px';
makeLine.style.top = theYPos + 'px';
makeLine.style.color = "white";
makeLine.style.zIndex = "10";
makeLine.style.fontFamily = "exo";
makeLine.style.fontWeight = "bold";
makeLine.style.fontSize = "large";
makeLine.style.background = "black";
makeLine.style.textAlign = "center";
makeLine.style.border = "solid 2px rgba(100,10
0,255,1.0)";
makeLine.style.width = 1000 +'px';
makeLine.style.height = 25 +'px';
makeLine.style.paddingLeft = "20px";
makeLine.style.paddingRight = "20px";
makeLine.style.paddingTop = "4px";
makeLine.innerHTML = ourMessage;
makeLine.id = "sector" + sector;

document.body.append(makeLine);
}

/*
ADDING OUR CONTENT TO THE WORLD
using our method of creating Rows of content
*/
let yPos = 1500; //Content starts at y Position of 1
500
//Content is Positioned in Rows Based on the Fun
ctions Place in the Array
function contentContainer()
{
let contentArray =
[
function(){ notesWithTextAreaRow(100, yPos,
600, 500, theNotes, "note")},
//theX, theY, sizeX, sizeY, whichArray, criteria
1
//function(){ collegeLinksRow(100, yPos, 300,
50, collegeLinks)},
//theX, theY, sizeX, sizeY, whichArray
];

for (i = 0; i < contentArray.length; i++)
{
//adds one row each time through the loop
contentArray[i]();
//add 900 to the yPos, between new section b
elow
yPos = yPos + 900;
}
//contentArray[0]();
//sector 1 line
makeLine(yPos, 1, "Cross this Line to ADD Mor
e content");
}

//// When the Page Loads ////
function whenLoaded()
{
//Load the World Data
loadScript("TopalianWorldDATA.js")
//open the player menu when game begins
//playerMenu();

//sorts the arrays
sortIt();
//loads starting content to the page
contentContainer();

//opens message near player
startMessage();
//show the structuresArray data in the Text Area
showData();
//Add an event listener for left mouse click
window.addEventListener("click", mousePos, f
alse);
//Add an event listener for when person presse
s a key down
window.addEventListener("keydown", theContr
ols, false);
//Add an event listener for when person release
s a key
window.addEventListener("keyup", theControls
, false);

//show the structuresArray data in the console
console.log(JSON.stringify(structuresArray, nul
l, ' ') + ";" + "\n\n");
}
//Load Content based on the player's position.
let sector1 = 0;
function wasLineCrossed()
{
//player speed can be Extremely fast, so we allo
w large range of Y value to be able to trigger the e
vent
if(sector1 == 0)
{
if(Math.floor(getPos("thePlayer").y) > yPos &
& Math.floor(getPos("thePlayer").y) < yPos+40)
{
ourPlayer.playerId.innerHTML = yPos + " C
rossed";
//contentContainer2(); //loads more content
//removes the line
removeElement("sector1");

//only allow content to be added one time

sector1 = 1;
}
}
}

/*
NEW WINDOW REPORT
for displaying the structuresArray data.
We can get the structuresArray data by pressing t
he Letter H on the keyboard. This will open a new
window that shows structuresArray data.
//NOTE: Chrome allows the new window, but Mozi
lla Developers Edition warns of the pop up windo
w.
*/
function newWindowReport()
{
let mytext = "";
mytext += ("structuresArray=" + JSON.stringify(
structuresArray, null, ' ') + ";");
let newWindow = window.open("","test","left=1
0 top=10 width=500, height=300,scrollbars=1,resi
zable=1", true);
//newWindow.document.open();

newWindow.document.write(mytext);
newWindow.document.close();
}
/*
THE GAME LOOP
*/
function doThisLoop()
{
playerMotion();
scrollIt();
wasLineCrossed();
requestAnimationFrame(doThisLoop);
}
doThisLoop();

//Update the Position of the player
movePlayer();

</script>
</body>
</html>

For More Tutorials:
CollegeOfScripting.weebly.com
CollegeOfScripting.wordpress.com
Youtube.com/ScriptingCollege
Github.com/ChristopherTopalian

Dedicated to God the Father
This book is created by the
College of Scripting Music & Science
Always remember, that each time you write a
script with a pencil and paper, it becomes
imprinted so deeply in memory that the material
and methods are learned extremely well.
When you Type the scripts, the same is true. The
more you type and write out the scripts by
keyboard or pencil and paper, the more you will
learn programming!
Write and Type EVERY example that you find.
Keep all of your scripts organized.
Every script that you create increases your
programming abilities.
SEEING CODE, is one thing,
but WRITING CODE is another.
Write it, Type it, Speak It, See It, Dream It.
www.CollegeOfScripting.weebly.com

JavaScript World Creator by Christopher Topalian

Uploaded by

Copyright:

Available Formats

You might also like

JavaScript World Creator by Christopher Topalian

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript World Creator by Christopher Topalian

Uploaded by

Copyright:

Available Formats

Topalian

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com

College of Scripting Music & Science CollegeOfScripting.weebly.com