JavaScript World Creator by Christopher Topalian
Uploaded by
CollegeOfScriptingJavaScript World Creator by Christopher Topalian
Uploaded by
CollegeOfScriptingTopalian
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
College of Scripting Music & Science CollegeOfScripting.weebly.com
<!-- Dedicated to God the Father -->
<!-- All Rights Reserved Christopher Topalian Co
pyright 2020-2021 -->
<!-- Topalian JavaScript World Creator -->
<!--
CONTROLS
W is Up, S is Down, A is Left, D is Right.
CAMERA
Camera Follows Player
COORDINATES - Locations
Left Click Mouse to get X and Y coordinates
of any place on the screen.
COORDINATES - Structures
Left Click Mouse on any structure
to get that structure's coordinates and other inf
o.
SPEED
press numbers 1 to 9 to adjust Speed
College of Scripting Music & Science CollegeOfScripting.weebly.com
press 0 - + BackSpace Home End for Super Spe
eds
TRANSPARENCY
press N for the player to be see-through
press M for solid
PLAYER MENU
press Z for Player Menu, to travel to locations q
uickly
STRUCTURE MODE
press B to Activate Structure Mode
While in Structure Mode,
Left Click Mouse to Create a Structure
press Shift + 1 to go to 1st Structure
press Shift + 2 to go to 2nd Structure, etc
press C to Color All Structures and Create a Ro
w Menu of Structures with GoTo Buttons to take p
erson to any Structure.
Left Click Mouse on any Structure to get coordi
nates and more.
press Delete Button to Remove All Structures
press Esc to End Structure Mode
Structure Info
College of Scripting Music & Science CollegeOfScripting.weebly.com
Left Click on any structure created, to get the N
ame, Id, Position and Size of that structure.
The structure info is shown below the structure
that was clicked.
Left Click that same structure again, to show th
e simplified position data.
Structure Data - Info
The structure data is stored in the structuresAr
ray.
This data is shown at the top of the screen in a
Text Area.
We can also view the data in the console of the
web browser.
Structure Data - Copy Button
The structuresArray data can be copied and pa
sted into the TopalianWorldDATA.js file and saved
.
As we make more structures, more data is adde
d to the structuresArray.
Structure Data - Download Button
The structuresArray Data can be downloaded a
s a text file,
using the Download button.
College of Scripting Music & Science CollegeOfScripting.weebly.com
When the player starts this script, it opens in th
e Web Browser and automatically loads the world
data of structures, which is done by loading the s
cript called TopalianWorldDATA.js.
If the player decides to delete the structures, th
ey can then load the TopalianWorldDATA.js file ag
ain by pressing the Letter G on the keyboard.
-->
<!-- Works in Chrome, Firefox, Brave, and others -
->
<!-- Loads the FASTEST in the Chrome Browser (
MUCH FASTER) -->
<!-- See the Code in Action
https://collegeofscripting.weebly.com/ -->
<!-- See the Video Tutorials
https://www.youtube.com/watch?v=n3JzYJKXZ_A
and
https://youtube.com/scriptingcollege
-->
College of Scripting Music & Science CollegeOfScripting.weebly.com
<!-- See the Code here
https://github.com/ChristopherTopalian/Topalian-
JavaScript-World-Creator -->
<!-- See more Code here
https://github.com/ChristopherTopalian -->
<!-- College of Scripting Music & Science -->
<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;
College of Scripting Music & Science CollegeOfScripting.weebly.com
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;
College of Scripting Music & Science CollegeOfScripting.weebly.com
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;*/
background-color: rgb(0, 77, 129);
border: solid 1px rgb(100, 100, 255);
color: white;
College of Scripting Music & Science CollegeOfScripting.weebly.com
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
{
background-color: rgb(7, 31, 47);
}
a:link
{
color:rgb(109, 209, 248);
}
a:visited
{
color:rgb(133, 134, 209);
}
College of Scripting Music & Science CollegeOfScripting.weebly.com
</style>
</head>
<body onload = "whenLoaded();">
<!-- create the Player div-->
<div id = "thePlayer">WASD<br> to Move</div>
<!-- create the Background div -->
<div id = "theBackground"></div>
<!-- create the Text Area to show the Structure dat
a -->
<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>    O
R    
College of Scripting Music & Science CollegeOfScripting.weebly.com
<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");
College of Scripting Music & Science CollegeOfScripting.weebly.com
//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
College of Scripting Music & Science CollegeOfScripting.weebly.com
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';
College of Scripting Music & Science CollegeOfScripting.weebly.com
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"
College of Scripting Music & Science CollegeOfScripting.weebly.com
//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>';
College of Scripting Music & Science CollegeOfScripting.weebly.com
structureDiv.innerHTML += 'Shift + 2 to GoTo 2
nd Structure etc<hr>';
//keep, for using button option later
//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>';
//keep, for using button option later
//structureDiv.innerHTML+= '<button onclick="r
emoveAllStructures();" class=\'ourButton\'>Remo
ve All Structures</button><br>';
structureDiv.innerHTML += 'Delete Button <br>
Removes All Structures<hr>';
//keep, for using button option later
//structureDiv.innerHTML+= '<button onclick="r
emoveListen(\'click\', createStructure);" class=\'o
College of Scripting Music & Science CollegeOfScripting.weebly.com
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
College of Scripting Music & Science CollegeOfScripting.weebly.com
*/
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)
{
theId = document.getElementById(theId);
let theRect = theId.getBoundingClientRect();
let sizeXY = {
College of Scripting Music & Science CollegeOfScripting.weebly.com
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)
{
theId = document.getElementById(theId);
if(ourCounter % 2) //if ourCounter is an odd nu
mber
{
College of Scripting Music & Science CollegeOfScripting.weebly.com
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;
}
College of Scripting Music & Science CollegeOfScripting.weebly.com
}
/*
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';
College of Scripting Music & Science CollegeOfScripting.weebly.com
//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";
College of Scripting Music & Science CollegeOfScripting.weebly.com
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));
College of Scripting Music & Science CollegeOfScripting.weebly.com
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
College of Scripting Music & Science CollegeOfScripting.weebly.com
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)";
College of Scripting Music & Science CollegeOfScripting.weebly.com
//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)"
}
College of Scripting Music & Science CollegeOfScripting.weebly.com
}
/*
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.
College of Scripting Music & Science CollegeOfScripting.weebly.com
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
College of Scripting Music & Science CollegeOfScripting.weebly.com
//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
//if(whichArray[i].date.substring(0,10) == "0
2/29/2018" || whichArray[i].date.substring(0,10) ==
"02/29/2020")
//filter for a DAY, of any month, of any year
//if(whichArray[i].date.substring(3,5) == 2)
//filter for a YEAR
//if(whichArray[i].date.substring(6,10) == 20
19)
College of Scripting Music & Science CollegeOfScripting.weebly.com
//filter for MULTIPLE YEARS
//if(whichArray[i].date.substring(6,10) == 20
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";
College of Scripting Music & Science CollegeOfScripting.weebly.com
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>";
College of Scripting Music & Science CollegeOfScripting.weebly.com
theTextArea.innerHTML += whichArray[i].
id + "<br>";
theTextArea.innerHTML += whichArray[i].
posX + "<br>";
theTextArea.innerHTML += whichArray[i].
posY + "<br>";
theTextArea.innerHTML += whichArray[i].
sizeX + "<br>";
theTextArea.innerHTML += whichArray[i].
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;
College of Scripting Music & Science CollegeOfScripting.weebly.com
// 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
{
document.body.append(theTextArea);
}
}
}
}
}
/*
College of Scripting Music & Science CollegeOfScripting.weebly.com
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)
College of Scripting Music & Science CollegeOfScripting.weebly.com
{
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
//if(whichArray[i].date.substring(0,2) == 3)
//filter for Multiple MONTHS
College of Scripting Music & Science CollegeOfScripting.weebly.com
//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
//if(whichArray[i].date.substring(0,10) == "0
2/29/2018" || whichArray[i].date.substring(0,10) ==
"02/29/2020")
//filter for a DAY, of any month, of any year
//if(whichArray[i].date.substring(3,5) == 2)
//filter for a YEAR
//if(whichArray[i].date.substring(6,10) == 20
19)
//filter for MULTIPLE YEARS
//if(whichArray[i].date.substring(6,10) == 20
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)
College of Scripting Music & Science CollegeOfScripting.weebly.com
//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";
College of Scripting Music & Science CollegeOfScripting.weebly.com
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");
College of Scripting Music & Science CollegeOfScripting.weebly.com
//"+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";
College of Scripting Music & Science CollegeOfScripting.weebly.com
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";
College of Scripting Music & Science CollegeOfScripting.weebly.com
printButton.innerHTML += '<button oncli
ck="printTextArea(\''+theTextArea.id+'\');" class="
ourButton">Print</button><br>';
document.body.append(notesDiv);
document.body.append(printButton);
document.body.append(theTextArea);
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);
College of Scripting Music & Science CollegeOfScripting.weebly.com
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";
College of Scripting Music & Science CollegeOfScripting.weebly.com
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
College of Scripting Music & Science CollegeOfScripting.weebly.com
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);
}
/*
College of Scripting Music & Science CollegeOfScripting.weebly.com
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";
College of Scripting Music & Science CollegeOfScripting.weebly.com
//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>';
College of Scripting Music & Science CollegeOfScripting.weebly.com
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);
}
}
College of Scripting Music & Science CollegeOfScripting.weebly.com
/*
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;
removeElement("playerMenu");
//remove menu, choice made
removeElement("playerMenu");
//fix in progress
}
if (theSection=="notes")
{
ourPlayer.x = 100;
ourPlayer.y = getPos("notesId").y;
removeElement("playerMenu");
//remove menu, choice made
College of Scripting Music & Science CollegeOfScripting.weebly.com
removeElement("playerMenu");
}
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
{
College of Scripting Music & Science CollegeOfScripting.weebly.com
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);
});
}
College of Scripting Music & Science CollegeOfScripting.weebly.com
}
/*
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();
};
College of Scripting Music & Science CollegeOfScripting.weebly.com
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
College of Scripting Music & Science CollegeOfScripting.weebly.com
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
{
ourPlayer.speedMultiplier = 2;
ourPlayer.playerId.innerHTML = "Speed 2";
}
College of Scripting Music & Science CollegeOfScripting.weebly.com
if(e.keyCode == 50 || e.keyCode == 98) //number
2, or numpad 2
{
ourPlayer.speedMultiplier = 3;
ourPlayer.playerId.innerHTML = "Speed 3";
}
if(e.keyCode == 51 || e.keyCode == 99) //number
3, or numpad 3
{
ourPlayer.speedMultiplier = 4;
ourPlayer.playerId.innerHTML = "Speed 4";
}
if(e.keyCode == 52 || e.keyCode == 100) //
number 4, or numpad 4
{
ourPlayer.speedMultiplier = 5;
ourPlayer.playerId.innerHTML = "Speed 5";
}
if(e.keyCode == 53 || e.keyCode == 101) //
number 5, or numpad 5
{
ourPlayer.speedMultiplier = 10;
ourPlayer.playerId.innerHTML = "Speed 10";
}
if(e.keyCode == 54 || e.keyCode == 102) //
number 6, or numpad 6
College of Scripting Music & Science CollegeOfScripting.weebly.com
{
ourPlayer.speedMultiplier = 15;
ourPlayer.playerId.innerHTML = "Speed 15";
}
if(e.keyCode == 55 || e.keyCode == 103) //
number 7, or numpad 7
{
ourPlayer.speedMultiplier = 20;
ourPlayer.playerId.innerHTML = "Speed 20";
}
if(e.keyCode == 56 || e.keyCode == 104) //
number 8, or numpad 8
{
ourPlayer.speedMultiplier = 25;
ourPlayer.playerId.innerHTML = "Speed 25";
}
if(e.keyCode == 57 || e.keyCode == 105) //
number 9, or numpad 9
{
ourPlayer.speedMultiplier = 30;
ourPlayer.playerId.innerHTML = "Speed 30";
}
if(e.keyCode == 48 || e.keyCode == 96) //number
0, or numpad 0
{
ourPlayer.speedMultiplier = 50;
College of Scripting Music & Science CollegeOfScripting.weebly.com
ourPlayer.playerId.innerHTML = "Speed 50";
}
if(e.keyCode == 189) //dash character on keybo
ard
{
ourPlayer.speedMultiplier = 100;
ourPlayer.playerId.innerHTML = "Speed 100";
}
if(e.keyCode == 187) // + character on keyboard
{
ourPlayer.speedMultiplier = 200;
ourPlayer.playerId.innerHTML = "Speed 200";
}
if(e.keyCode == 8) //Back space button on keyb
oard
{
ourPlayer.speedMultiplier = 400;
ourPlayer.playerId.innerHTML = "Speed 400";
}
if(e.keyCode == 36) //Home Button on keyboard
{
ourPlayer.speedMultiplier = 800;
ourPlayer.playerId.innerHTML = "Speed 800";
}
if(e.keyCode == 35) //End Button on keyboard
{
College of Scripting Music & Science CollegeOfScripting.weebly.com
ourPlayer.speedMultiplier = 1600;
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
College of Scripting Music & Science CollegeOfScripting.weebly.com
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
College of Scripting Music & Science CollegeOfScripting.weebly.com
{
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
College of Scripting Music & Science CollegeOfScripting.weebly.com
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);
}
//Shift + 2 brings you to structure 2
if(event.getModifierState("Shift") && e.keyCode
== 50)
{
console.log(structuresArray[1].posX);
ourPlayer.x = getPos("STRUCTURE2").x;
ourPlayer.y = getPos("STRUCTURE2").y;
scrollToSection(ourPlayer.x, ourPlayer.y);
}
//Shift + 3 brings you to structure 3
if(event.getModifierState("Shift") && e.keyCo
de == 51)
{
console.log(structuresArray[2].posX);
ourPlayer.x = getPos("STRUCTURE3").x;
ourPlayer.y = getPos("STRUCTURE3").y;
College of Scripting Music & Science CollegeOfScripting.weebly.com
scrollToSection(ourPlayer.x, ourPlayer.y);
}
//Shift + 4 brings you to structure 4
if(event.getModifierState("Shift") && e.keyCo
de == 52)
{
console.log(structuresArray[3].posX);
ourPlayer.x = getPos("STRUCTURE4").x;
ourPlayer.y = getPos("STRUCTURE4").y;
scrollToSection(ourPlayer.x, ourPlayer.y);
}
//Shift + 5 brings you to structure 5
if(event.getModifierState("Shift") && e.keyCode
== 53)
{
console.log(structuresArray[4].posX);
ourPlayer.x = getPos("STRUCTURE5").x;
ourPlayer.y = getPos("STRUCTURE5").y;
scrollToSection(ourPlayer.x, ourPlayer.y);
}
//Shift + 6 brings you to structure 6
if(event.getModifierState("Shift") && e.keyCode
== 54)
College of Scripting Music & Science CollegeOfScripting.weebly.com
{
console.log(structuresArray[5].posX);
ourPlayer.x = getPos("STRUCTURE6").x;
ourPlayer.y = getPos("STRUCTURE6").y;
scrollToSection(ourPlayer.x, ourPlayer.y);
}
//Shift + 7 brings you to structure 7
if(event.getModifierState("Shift") && e.keyCode
== 55)
{
console.log(structuresArray[6].posX);
ourPlayer.x = getPos("STRUCTURE7").x;
ourPlayer.y = getPos("STRUCTURE7").y;
scrollToSection(ourPlayer.x, ourPlayer.y);
}
//Shift + 8 brings you to structure 8
if(event.getModifierState("Shift") && e.keyCode
== 56)
{
console.log(structuresArray[7].posX);
ourPlayer.x = getPos("STRUCTURE8").x;
ourPlayer.y = getPos("STRUCTURE8").y;
scrollToSection(ourPlayer.x, ourPlayer.y);
}
College of Scripting Music & Science CollegeOfScripting.weebly.com
//Shift + 9 brings you to structure 9
if(event.getModifierState("Shift") && e.keyCode
== 57)
{
console.log(structuresArray[8].posX);
ourPlayer.x = getPos("STRUCTURE9").x;
ourPlayer.y = getPos("STRUCTURE9").y;
scrollToSection(ourPlayer.x, ourPlayer.y);
}
//Shift + 0 brings you to structure 10
if(event.getModifierState("Shift") && e.keyCode
== 48)
{
console.log(structuresArray[9].posX);
ourPlayer.x = getPos("STRUCTURE10").x;
ourPlayer.y = getPos("STRUCTURE10").y;
scrollToSection(ourPlayer.x, ourPlayer.y);
}
//////// LOAD SCRIPT LOAD SCRIPT ////////
//Loads World Data of Structures Name, Id, Posi
tion and Size
if(e.keyCode == 71) //Letter g on keyboard
{
College of Scripting Music & Science CollegeOfScripting.weebly.com
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";
College of Scripting Music & Science CollegeOfScripting.weebly.com
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);
College of Scripting Music & Science CollegeOfScripting.weebly.com
//
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
College of Scripting Music & Science CollegeOfScripting.weebly.com
*/
//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();
}
College of Scripting Music & Science CollegeOfScripting.weebly.com
/*
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;
College of Scripting Music & Science CollegeOfScripting.weebly.com
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
];
College of Scripting Music & Science CollegeOfScripting.weebly.com
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();
College of Scripting Music & Science CollegeOfScripting.weebly.com
//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);
College of Scripting Music & Science CollegeOfScripting.weebly.com
//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
College of Scripting Music & Science CollegeOfScripting.weebly.com
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();
College of Scripting Music & Science CollegeOfScripting.weebly.com
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>
College of Scripting Music & Science CollegeOfScripting.weebly.com
For More Tutorials:
CollegeOfScripting.weebly.com
CollegeOfScripting.wordpress.com
Youtube.com/ScriptingCollege
Github.com/ChristopherTopalian
College of Scripting Music & Science CollegeOfScripting.weebly.com
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
College of Scripting Music & Science CollegeOfScripting.weebly.com
You might also like
- LibreOffice Scripting For Humans by Christopher TopalianNo ratings yetLibreOffice Scripting For Humans by Christopher Topalian129 pages
- Node - Js For Humans by Christopher TopalianNo ratings yetNode - Js For Humans by Christopher Topalian27 pages
- JavaScript Bookmarklet Advanced Programming by Christopher TopalianNo ratings yetJavaScript Bookmarklet Advanced Programming by Christopher Topalian278 pages
- Python Language For Humans by Christopher TopalianNo ratings yetPython Language For Humans by Christopher Topalian445 pages
- Python Scripting in Blender For Humans by Christopher TopalianNo ratings yetPython Scripting in Blender For Humans by Christopher Topalian29 pages
- Blend4Web For Humans by Christopher TopalianNo ratings yetBlend4Web For Humans by Christopher Topalian24 pages
- Topalian Cipher Generator by Christopher TopalianNo ratings yetTopalian Cipher Generator by Christopher Topalian39 pages
- Topalian Calculator by Christopher TopalianNo ratings yetTopalian Calculator by Christopher Topalian33 pages
- 2021VAERSDATA of 4-30-2021 - 410 Deaths of Age 59 and Under - Published by College of Scripting Music and Science On 5-8-2021No ratings yet2021VAERSDATA of 4-30-2021 - 410 Deaths of Age 59 and Under - Published by College of Scripting Music and Science On 5-8-202132 pages
- Topalian Calculation Suite by Christopher TopalianNo ratings yetTopalian Calculation Suite by Christopher Topalian70 pages
- Topalian JavaScript Graphics Editor by Christopher Andrew TopalianNo ratings yetTopalian JavaScript Graphics Editor by Christopher Andrew Topalian53 pages
- JavaScript For Humans by Christopher TopalianNo ratings yetJavaScript For Humans by Christopher Topalian181 pages
- JavaScript Code Volume 1 by Christopher Topalian - 2nd EditionNo ratings yetJavaScript Code Volume 1 by Christopher Topalian - 2nd Edition600 pages
- JavaScript Unit Testing Tools Cheat SheetNo ratings yetJavaScript Unit Testing Tools Cheat Sheet3 pages
- CROSSFIRE RAZOR: FBI Exonerated Flynn, But Strzok Reopened Case Against Him100% (14)CROSSFIRE RAZOR: FBI Exonerated Flynn, But Strzok Reopened Case Against Him12 pages
- Topalian Game Engine Data Navigator 026 by Christopher Topalian100% (1)Topalian Game Engine Data Navigator 026 by Christopher Topalian960 pages
- This Tutorial Is Recommended by The Construct TeamNo ratings yetThis Tutorial Is Recommended by The Construct Team25 pages
- Topalian JavaScript 3D Editor by Christopher TopalianNo ratings yetTopalian JavaScript 3D Editor by Christopher Topalian81 pages
- Topalian Game Engine 019 by Christopher TopalianNo ratings yetTopalian Game Engine 019 by Christopher Topalian352 pages
- Topalian JavaScript Frames Per Second by Christopher TopalianNo ratings yetTopalian JavaScript Frames Per Second by Christopher Topalian47 pages
- Structures: What Do We Understand When We Talk About Structures in Design and Technology?No ratings yetStructures: What Do We Understand When We Talk About Structures in Design and Technology?16 pages
- Topalian JavaScript Earth by Christopher TopalianNo ratings yetTopalian JavaScript Earth by Christopher Topalian73 pages
- Sample Chapter-Construct 2 Game Development by ExampleNo ratings yetSample Chapter-Construct 2 Game Development by Example10 pages
- Course Outline + Proj. 2010, XUAT, 1, Wolfgang SchuellerNo ratings yetCourse Outline + Proj. 2010, XUAT, 1, Wolfgang Schueller6 pages
- Tiddlywiki Internals 1 of 3: Architectural Concepts: August 11th, 2008No ratings yetTiddlywiki Internals 1 of 3: Architectural Concepts: August 11th, 200815 pages
- Topalian JavaScript Graph by Christopher TopalianNo ratings yetTopalian JavaScript Graph by Christopher Topalian50 pages
- JavaScript Games in the DOM_ Comprehensive GuideNo ratings yetJavaScript Games in the DOM_ Comprehensive Guide7 pages
- Topalian Python JavaScript Navigator by Christopher TopalianNo ratings yetTopalian Python JavaScript Navigator by Christopher Topalian119 pages
- Topalian JavaScript Filter Functions by Christopher TopalianNo ratings yetTopalian JavaScript Filter Functions by Christopher Topalian149 pages
- C Computer Science by Christopher TopalianNo ratings yetC Computer Science by Christopher Topalian59 pages
- C++ Computer Science by Christopher TopalianNo ratings yetC++ Computer Science by Christopher Topalian57 pages
- Topalian JavaScript Teacher by Christopher TopalianNo ratings yetTopalian JavaScript Teacher by Christopher Topalian85 pages
- Topalian JavaScript Sun Report by Christopher TopalianNo ratings yetTopalian JavaScript Sun Report by Christopher Topalian24 pages
- Topalian JavaScript Sun Report 002 by Christopher TopalianNo ratings yetTopalian JavaScript Sun Report 002 by Christopher Topalian43 pages
- Topalian JavaScript Robot AI by Christopher TopalianNo ratings yetTopalian JavaScript Robot AI by Christopher Topalian44 pages
- JavaScript Wars - Code - by Christopher TopalianNo ratings yetJavaScript Wars - Code - by Christopher Topalian600 pages
- JavaScript Wars - Code - by Christopher TopalianNo ratings yetJavaScript Wars - Code - by Christopher Topalian600 pages
- Fedex Delivery Truck in Downtown Dayton Slow Stock Footage SBV-337683064 - StoryblocksNo ratings yetFedex Delivery Truck in Downtown Dayton Slow Stock Footage SBV-337683064 - Storyblocks1 page
- Impact of Increased Back Pressure by Exhaust Gas Treatment Systems100% (1)Impact of Increased Back Pressure by Exhaust Gas Treatment Systems4 pages
- How To Use QFIL To Backup & Restore QCN To QualcommNo ratings yetHow To Use QFIL To Backup & Restore QCN To Qualcomm16 pages
- The Impacts of Cell Phone Usages On Learning Motivation:: What Students Say?No ratings yetThe Impacts of Cell Phone Usages On Learning Motivation:: What Students Say?2 pages
- Beginners-guide-to-event-sourcing-ebook2023No ratings yetBeginners-guide-to-event-sourcing-ebook202339 pages
- 01-02 Design and Deployment Guide For The SD-WAN EVPN Interconnection Solution100% (1)01-02 Design and Deployment Guide For The SD-WAN EVPN Interconnection Solution116 pages
- Cowin E7: Owner's Guide Bedienungsanleitung Guía Del Usuario Notice D'utilisation Manuale Di IstruzioniNo ratings yetCowin E7: Owner's Guide Bedienungsanleitung Guía Del Usuario Notice D'utilisation Manuale Di Istruzioni85 pages
- Austrian Delegation in The Water Sector - Egypt - 2022No ratings yetAustrian Delegation in The Water Sector - Egypt - 20224 pages
- Tone2 Gladiator 2 State of Art ExpansionNo ratings yetTone2 Gladiator 2 State of Art Expansion10 pages
- 3 Phase, Internally Protected Elements 240 & 480 Volt, 60 HZNo ratings yet3 Phase, Internally Protected Elements 240 & 480 Volt, 60 HZ6 pages
- Digitization of Logistics Bussiness in India (Research Paper) 2023-1No ratings yetDigitization of Logistics Bussiness in India (Research Paper) 2023-122 pages
- Download ebooks file Information Security Planning A Practical Approach 2nd Edition Lincke all chapters100% (2)Download ebooks file Information Security Planning A Practical Approach 2nd Edition Lincke all chapters55 pages
