mirror of
https://github.com/CNSeattle/CodeNinjasGDPFunctions.git
synced 2024-11-27 18:05:42 -05:00
Add files via upload
This commit is contained in:
JacksonHagood
GitHub
commit
420ab59c95
11 changed files with 968 additions and 0 deletions
78
Animation.html
Normal file
78
Animation.html
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<!--Code Ninjas | Jackson Hagood-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Animation</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||
<link rel="icon" href="images/icon.png">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidenav">
|
||||
<a href="functions.html"><h2>GDP Functions</h2></a>
|
||||
<br>
|
||||
<h2><a href="position.html">Position</a></h2>
|
||||
<h2><a href="rotation.html">Rotation</a></h2>
|
||||
<h2><a href="scale.html">Scale</a></h2>
|
||||
<h2><a href="collision.html">Collision</a></h2>
|
||||
<h2><a href="appearance.html">Appearance</a></h2>
|
||||
<h2><a href="timers.html">Timers</a></h2>
|
||||
<h2><a href="animation.html">Animation</a></h2>
|
||||
<ul id="contents">
|
||||
<li><a href="#frameindex">.frameIndex()</a></li>
|
||||
<li><a href="#animation">.animation()</a></li>
|
||||
<li><a href="#incrementanimation">.incrementAnimation()</a></li>
|
||||
</ul>
|
||||
<h2><a href="attributes.html">Attributes</a></h2>
|
||||
<h2><a href="miscellaneous.html">Miscellaneous</a></h2>
|
||||
</div>
|
||||
<div name="Animation"> <!--done-->
|
||||
<h1>Animation</h1>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="frameindex">
|
||||
<h3>.frameIndex()</h3>
|
||||
<p>The function .frameIndex() will change the frame of a given object. The function can also be used to return the current frame of an item. The function takes in a single parameter, that being the desired frame.</p>
|
||||
<pre><code>object.frameIndex(1);
|
||||
//changes 'object' to frame 1</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Dojo Practice</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="animation">
|
||||
<h3>.animation()</h3>
|
||||
<p>The function .animation() will set the frame of an object. The function take in one parameter: the object's desired frame name.</p>
|
||||
<pre><code>object.animation("default");
|
||||
//changes 'object' to frame 'default'</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Meteors Deluxe</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="incrementanimation">
|
||||
<h3>.incrementAnimation()</h3>
|
||||
<p>The function .incrementAnimation() will change the frame of an object by 1. The function takes in no parameters</p>
|
||||
<pre><code>object.incrementAnimation();
|
||||
//changes the frame of 'object' by 1</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Meteors Deluxe</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
86
Appearance.html
Normal file
86
Appearance.html
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<!--Code Ninjas | Jackson Hagood-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Appearance</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||
<link rel="icon" href="images/icon.png">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidenav">
|
||||
<a href="functions.html"><h2>GDP Functions</h2></a>
|
||||
<br>
|
||||
<h2><a href="position.html">Position</a></h2>
|
||||
<h2><a href="rotation.html">Rotation</a></h2>
|
||||
<h2><a href="scale.html">Scale</a></h2>
|
||||
<h2><a href="collision.html">Collision</a></h2>
|
||||
<h2><a href="appearance.html">Appearance</a></h2>
|
||||
<ul id="contents">
|
||||
<li><a href="#togglevisible">.toggleVisible()</a></li>
|
||||
<li><a href="#visible">.visible()</a></li>
|
||||
<li><a href="#fill">fill()</a></li>
|
||||
</ul>
|
||||
<h2><a href="timers.html">Timers</a></h2>
|
||||
<h2><a href="animation.html">Animation</a></h2>
|
||||
<h2><a href="attributes.html">Attributes</a></h2>
|
||||
<h2><a href="miscellaneous.html">Miscellaneous</a></h2>
|
||||
</div>
|
||||
<div name="Appearance"> <!--done-->
|
||||
<h1>Appearance</h1>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="togglevisible">
|
||||
<h3>.toggleVisible()</h3>
|
||||
<p>The function .toggleVisible() will change an object's visibility. In other words, if an object is visible, .toggleVisible() will make it invisible. If an object is not visible, .toggleVisible() will make it visible. .toggleVisible() takes in no parameters.</p>
|
||||
<pre><code>object.toggleVisible();
|
||||
//changes the visibility of 'object'</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Hiding Ninja</li>
|
||||
<li>Ninja Supplies</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="visible">
|
||||
<h3>.visible()</h3>
|
||||
<p>The function .visible() sets whether or not an object is visible. The function takes in one parameter, true or false, to set the visibility. The function can also return whether an object is visible.</p>
|
||||
<pre><code>object.visible(true);
|
||||
//makes 'object' visible</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Whack a Ninja</li>
|
||||
<li>Zapper Part 1</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="fill">
|
||||
<h3>.fill()</h3>
|
||||
<p>The function .fill() will fill in an object with a specified color. The function makes use of hexadecimal colors to achieve this. .fill() accepts a single string containing a ‘#’ symbol, followed by the six digit hexadecimal color that the object will be filled with.</p>
|
||||
<pre><code>object.fill("#00fafa");
|
||||
//fills in the 'object' with the color 00fafa</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Rain Catcher Part 6</li>
|
||||
<li>Color Picker</li>
|
||||
<li><a href="https://www.google.com/search?q=color+picker">RGB and Hex Picker</a></li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!--.colorSet()-->
|
||||
|
||||
<!--.updateParts()-->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
Attributes.html
Normal file
64
Attributes.html
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<!--Code Ninjas | Jackson Hagood-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Attributes</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||
<link rel="icon" href="images/icon.png">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidenav">
|
||||
<a href="functions.html"><h2>GDP Functions</h2></a>
|
||||
<br>
|
||||
<h2><a href="position.html">Position</a></h2>
|
||||
<h2><a href="rotation.html">Rotation</a></h2>
|
||||
<h2><a href="scale.html">Scale</a></h2>
|
||||
<h2><a href="collision.html">Collision</a></h2>
|
||||
<h2><a href="appearance.html">Appearance</a></h2>
|
||||
<h2><a href="timers.html">Timers</a></h2>
|
||||
<h2><a href="animation.html">Animation</a></h2>
|
||||
<h2><a href="attributes.html">Attributes</a></h2>
|
||||
<ul id="contents">
|
||||
<li><a href="#state">.state()</a></li>
|
||||
<li><a href="#text">.text()</a></li>
|
||||
</ul>
|
||||
<h2><a href="miscellaneous.html">Miscellaneous</a></h2>
|
||||
</div>
|
||||
<div name="Attributes"> <!--done-->
|
||||
<h1>Attributes</h1>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="state">
|
||||
<h3>.state()</h3>
|
||||
<p>The function .state() will return the state property of an object. Most commonly, .state() is used to find the game's current state. The function takes in no parameters.</p>
|
||||
<pre><code>var state = $this.scene.state();
|
||||
//sets 'state' to the current state of the 'scene'</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Meteors Deluxe</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="text">
|
||||
<h3>.text()</h3>
|
||||
<p>The function .text() can change the text property of a label. The function takes in one parameter: the desired text of the label.</p>
|
||||
<pre><code>object.text("string");
|
||||
//sets the text of the 'object' label to 'string'</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Meteors Deluxe</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!--.findName()-->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
82
Collision.html
Normal file
82
Collision.html
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<!--Code Ninjas | Jackson Hagood-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Collision</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||
<link rel="icon" href="images/icon.png">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidenav">
|
||||
<a href="functions.html"><h2>GDP Functions</h2></a>
|
||||
<br>
|
||||
<h2><a href="position.html">Position</a></h2>
|
||||
<h2><a href="rotation.html">Rotation</a></h2>
|
||||
<h2><a href="scale.html">Scale</a></h2>
|
||||
<h2><a href="collision.html">Collision</a></h2>
|
||||
<ul id="contents">
|
||||
<li><a href="#istouching">.isTouching()</a></li>
|
||||
<li><a href="#toggledraggable">.toggleDraggable()</a></li>
|
||||
<li><a href="#draggable">.draggable()</a></li>
|
||||
</ul>
|
||||
<h2><a href="appearance.html">Appearance</a></h2>
|
||||
<h2><a href="timers.html">Timers</a></h2>
|
||||
<h2><a href="animation.html">Animation</a></h2>
|
||||
<h2><a href="attributes.html">Attributes</a></h2>
|
||||
<h2><a href="miscellaneous.html">Miscellaneous</a></h2>
|
||||
</div>
|
||||
<div name="Collision"> <!--done-->
|
||||
<h1>Collision</h1>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="istouching">
|
||||
<h3>.isTouching()</h3>
|
||||
<p>The function .isTouching() will return whether or not and object is in contact with another item. The function takes in one parameter, the object that is being detected.</p>
|
||||
<pre><code>var bool = object.isTouching(object2);
|
||||
//sets variable 'bool' to whether or not 'object' is touching 'object2'</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Zapper Part 2</li>
|
||||
<li>Wall Blaster</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<!--.playerHit()-->
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="toggledraggable">
|
||||
<h3>.toggleDraggable()</h3>
|
||||
<p>The function .toggleDraggable() will change an object's draggability. In other words, if an object is draggable, .toggleDraggable() will make it undraggable. If an object is not draggable, .toggleDraggable() will make it draggable. .toggleDraggable() takes in no parameters.</p>
|
||||
<pre><code>object.toggleDraggable();
|
||||
//changes the draggability of 'object'</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Ninja Supplies</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="draggable">
|
||||
<h3>.draggable()</h3>
|
||||
<p>The function .draggable() sets whether or not an object is draggable. The function takes in one parameter, true or false, to set the draggability. The function can also return whether an object is draggable.</p>
|
||||
<pre><code>object.draggable(true);
|
||||
//makes 'object' draggable</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Ninja Puzzle</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
32
Functions.html
Normal file
32
Functions.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!--Code Ninjas | Jackson Hagood-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Functions</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||
<link rel="icon" href="images/icon.png">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidenav">
|
||||
<a href="functions.html"><h2>GDP Functions</h2></a>
|
||||
<br>
|
||||
<h2><a href="position.html">Position</a></h2>
|
||||
<h2><a href="rotation.html">Rotation</a></h2>
|
||||
<h2><a href="scale.html">Scale</a></h2>
|
||||
<h2><a href="collision.html">Collision</a></h2>
|
||||
<h2><a href="appearance.html">Appearance</a></h2>
|
||||
<h2><a href="timers.html">Timers</a></h2>
|
||||
<h2><a href="animation.html">Animation</a></h2>
|
||||
<h2><a href="attributes.html">Attributes</a></h2>
|
||||
<h2><a href="miscellaneous.html">Miscellaneous</a></h2>
|
||||
</div>
|
||||
<h1>Functions</h1>
|
||||
|
||||
<div class="item">
|
||||
<p>All the built in Code Ninjas Game Development Platform functions within yellow and orange belt are contained within this site. Functions are grouped by category on the right. To find a function search through the categories. This tool is not meant as a replacement for curriculum. Instead, this is intended for assistance in prove yourself challenges.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
103
Miscellaneous.html
Normal file
103
Miscellaneous.html
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<!--Code Ninjas | Jackson Hagood-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Miscellaneous</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||
<link rel="icon" href="images/icon.png">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidenav">
|
||||
<a href="functions.html"><h2>GDP Functions</h2></a>
|
||||
<br>
|
||||
<h2><a href="position.html">Position</a></h2>
|
||||
<h2><a href="rotation.html">Rotation</a></h2>
|
||||
<h2><a href="scale.html">Scale</a></h2>
|
||||
<h2><a href="collision.html">Collision</a></h2>
|
||||
<h2><a href="appearance.html">Appearance</a></h2>
|
||||
<h2><a href="timers.html">Timers</a></h2>
|
||||
<h2><a href="animation.html">Animation</a></h2>
|
||||
<h2><a href="attributes.html">Attributes</a></h2>
|
||||
<h2><a href="miscellaneous.html">Miscellaneous</a></h2>
|
||||
<ul id="contents">
|
||||
<li><a href="#iskeypressed">isKeyPressed()</a></li>
|
||||
<li><a href="#clone">.clone()</a></li>
|
||||
<li><a href="#remove">.remove()</a></li>
|
||||
<li><a href="#random">random()</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div name="Miscellaneous">
|
||||
<h1>Miscellaneous</h1>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="iskeypressed">
|
||||
<h3>isKeyPressed()</h3>
|
||||
<p>The function isKeyPressed() will return whether a specified key is being pressed. The function takes in one parameter, 'Keys.' and then the desired key.</p>
|
||||
<pre><code>var pressed = isKeyPressed(Keys.space)
|
||||
//sets the variable 'pressed' to whether the 'space' key is being pressed</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Rain Catcher Part 2</li>
|
||||
<li>Basic Pong With Keyboard</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item">
|
||||
<a name="clone">
|
||||
<h3>.clone()</h3>
|
||||
<p>The function .clone() will create a copy of an object. The function takes in no parameters.</p>
|
||||
<pre><code>object.clone();
|
||||
//clones 'object</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Rain Catcher Part 4</li>
|
||||
<li>Meteors Part 2</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item">
|
||||
<a name="remove">
|
||||
<h3>.remove()</h3>
|
||||
<p>The function .remove() will remove an object. The function takes in no parameters.</p>
|
||||
<pre><code>object.remove();
|
||||
//removes 'object'</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Starscape</li>
|
||||
<li>Zapper Part 1</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<!--.play()-->
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item">
|
||||
<a name="random">
|
||||
<h3>random()</h3>
|
||||
<p>The function random will return a random number within a range. The function takes in two parameters. The first number in the range, and the final number in the range.</p>
|
||||
<pre><code>var random = random(1,100)
|
||||
//sets variable 'random' to a random number between 1 and 100</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Rain Catcher Part 3</li>
|
||||
<li>Shooting Stars</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
178
Position.html
Normal file
178
Position.html
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
<!--Code Ninjas | Jackson Hagood-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Position</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||
<link rel="icon" href="images/icon.png">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidenav">
|
||||
<a href="functions.html"><h2>GDP Functions</h2></a>
|
||||
<br>
|
||||
<h2><a href="position.html">Position</a></h2>
|
||||
<ul id="contents">
|
||||
<li><a href="#xyz">.x() .y() and .z()</a></li>
|
||||
<li><a href="#getpointerpos">getPointerPos()</a></li>
|
||||
<li><a href="#movexy">moveX() and moveY()</a></li>
|
||||
<li><a href="#moveforward">.moveForward()</a></li>
|
||||
<li><a href="#moveforwardbyrotation">.moveForwardByRotation()</a></li>
|
||||
<li><a href="#moveto">.moveTo()</a></li>
|
||||
<li><a href="#speedxy">.speedX() and .speedY()</a></li>
|
||||
<li><a href="#finddistance">.findDistance()</a></li>
|
||||
</ul>
|
||||
<h2><a href="rotation.html">Rotation</a></h2>
|
||||
<h2><a href="scale.html">Scale</a></h2>
|
||||
<h2><a href="collision.html">Collision</a></h2>
|
||||
<h2><a href="appearance.html">Appearance</a></h2>
|
||||
<h2><a href="timers.html">Timers</a></h2>
|
||||
<h2><a href="animation.html">Animation</a></h2>
|
||||
<h2><a href="attributes.html">Attributes</a></h2>
|
||||
<h2><a href="miscellaneous.html">Miscellaneous</a></h2>
|
||||
</div>
|
||||
<div name="Position"> <!--done-->
|
||||
<h1>Position</h1>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="xyz">
|
||||
<h3>.x() .y() and .z()</h3>
|
||||
<p>The functions .x(), .y(), and .z() will seperate a position into its components. These functions can also change the position of an object. Each function can take in an integer as a parameter, which will become the object's new position on its respective axis. Of note is that within the GDP, and in most development applications, the x and y axis are set up differently than one may originally think. The origin lies on the top left of the screen, and while x does increase rightward, y increases downward. The z axis refers to the layer an item is on. In other words, it is used to manage whether something is displayed in front of, or behind something.</p>
|
||||
<pre><code>xComp = position.x();
|
||||
//sets 'xComp' to the x value of 'position' using the .x() function
|
||||
object.y(10);
|
||||
//moves the 'object' to the y coordinate of 10, using the .y() function</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Coordinate Collector</li>
|
||||
<li><a href="http://ptgmedia.pearsoncmg.com/images/chap3_0672324989/elementLinks/03fig01.jpg">XY Explination</a></li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="getpointerpos">
|
||||
<h3>getPointerPos()</h3>
|
||||
<p>The function .getPointerPos() will return the mouse cursor's position. This position contains both x and y components. Further, this position can be stored into a variable, and separated into these components. The function takes no parameters.</p>
|
||||
<pre><code>var pos = getPointerPos();
|
||||
//calls the getPointerPos() function, and stores the returned position into the
|
||||
//'pos' variable
|
||||
xComp = pos.x();
|
||||
yComp = pos.y();
|
||||
//stores the x and y components of the 'pos' variable into 'xComp' and 'yComp'
|
||||
//This is done through .x() and .y() functions</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Coordinate Collector</li>
|
||||
<li>Star Spinner</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="movexy">
|
||||
<h3>moveX() and moveY()</h3>
|
||||
<p>The functions moveX() and moveY() can be used to move an object along an axis. The function can take in two parameters, the first being the object, the second being the speed. The speed can be negative or positive, depending on the desired direction. If a speed parameter is not given, then either .speedX() or .speedY() will be called as a default speed for the object.</p>
|
||||
<pre><code>moveX(object,10);
|
||||
//moves 'object' with a speed of 10 along the x axis
|
||||
moveY(object);
|
||||
//moves 'object' with a speed of speedY() along the y axis</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Side Wall Bounce</li>
|
||||
<li>Rain Catcher Part 1</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="moveforward">
|
||||
<h3>.moveForward()</h3>
|
||||
<p>The function .moveForward() will move an object in the direction it is facing. Of note is that this function only works if the object is pointing in one of the eight main cardinal directions. The function takes in one parameter, a speed.</p>
|
||||
<pre><code>object.moveForward(10);
|
||||
//moves the 'object' forward with a speed of 10</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Rain Catcher Part 6</li>
|
||||
<li>Color Picker</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="moveforwardbyrotation">
|
||||
<h3>.moveForwardByRotation()</h3>
|
||||
<p>The function .moveForwardByRotation() will move an object in the direction it is facing. Unlike .moveForward(), this function moves the object in any direction that it is facing. The function takes in one parameter, a speed.</p>
|
||||
<pre><code>object.moveForwardByRotation(10);
|
||||
//moves the 'object' forward with a speed of 10
|
||||
//'object' moves forward in the precise direction it is facing</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Rain Catcher Part 6</li>
|
||||
<li>Color Picker</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="moveto">
|
||||
<h3>.moveTo()</h3>
|
||||
<p>The function .moveTo will move an object to a given position or object. The function can take two parameters, in the form of an x and y coordinate, or one parameter, the destination object.</p>
|
||||
<pre><code>object.moveTo(25,50);
|
||||
//moves the 'object' to the coordinate (25,50)
|
||||
object.moveTo(object2);
|
||||
//moves the 'object' to 'object2'</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Ninja Snacks</li>
|
||||
<li>Shuriken Toss Part 1</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item">
|
||||
<a name="speedxy">
|
||||
<h3>.speedX() and .speedY()</h3>
|
||||
<p>The functions .speedX() and .speedY() contain an object's default speed value. Other functions, such as moveX() and moveY(), will use the speed contained within the corresponding speed function, if no parameter is passed through. speedX() and speedY() take in a single parameter as a speed.</p>
|
||||
<pre><code>object.speedX(10);
|
||||
//sets the x speed of 'object' to 10</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Side Wall Bounce</li>
|
||||
<li>Laser Beam Pointer</li>
|
||||
</ol>
|
||||
</a> <!--done-->
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item">
|
||||
<a name="finddistance">
|
||||
<h3>.findDistance()</h3>
|
||||
<p>The function .findDistance() will return the distance between two objects. The function takes just one parameter, the object which the distance to is being found.</p>
|
||||
<pre><code>var dis = object.findDistance(object2);
|
||||
//sets variable 'dis' to the distance between 'object' and 'object2'</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Measurements</li>
|
||||
<li>Ninja Puzzle</li>
|
||||
</ol>
|
||||
</a> <!--done-->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
132
Rotation.html
Normal file
132
Rotation.html
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<!--Code Ninjas | Jackson Hagood-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Rotation</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||
<link rel="icon" href="images/icon.png">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidenav">
|
||||
<a href="functions.html"><h2>GDP Functions</h2></a>
|
||||
<br>
|
||||
<h2><a href="position.html">Position</a></h2>
|
||||
<h2><a href="rotation.html">Rotation</a></h2>
|
||||
<ul id="contents">
|
||||
<li><a href="#spin">spin()</a></li>
|
||||
<li><a href="#rotation">.rotation()</a></li>
|
||||
<li><a href="#flipdirection">.flipDirection()</a></li>
|
||||
<li><a href="#pointto">.pointTo()</a></li>
|
||||
<li><a href="#pointtocursor">.pointToCursor()</a></li>
|
||||
<li><a href="#pointtoobject">.pointToObject()</a></li>
|
||||
</ul>
|
||||
<h2><a href="scale.html">Scale</a></h2>
|
||||
<h2><a href="collision.html">Collision</a></h2>
|
||||
<h2><a href="appearance.html">Appearance</a></h2>
|
||||
<h2><a href="timers.html">Timers</a></h2>
|
||||
<h2><a href="animation.html">Animation</a></h2>
|
||||
<h2><a href="attributes.html">Attributes</a></h2>
|
||||
<h2><a href="miscellaneous.html">Miscellaneous</a></h2>
|
||||
</div>
|
||||
<div name="Rotation"> <!--done-->
|
||||
<h1>Rotation</h1>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="spin">
|
||||
<h3>spin()</h3>
|
||||
<p>The function spin() will spin an object with a specified speed. spin() takes in two parameters, an object and a speed. As always, this speed can be negative, for opposite rotation.</p>
|
||||
<pre><code>spin(object,10);
|
||||
//spins 'object' with a speed of 10</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Spin a Star</li>
|
||||
<li>Spin Counter-Clockwise</li>
|
||||
<li>Star Spinner</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="rotation">
|
||||
<h3>.rotation()</h3>
|
||||
<p>The function .rotation() will set an object's rotation. The function makes use of the rotation attribute, that can be found within the properties menu. The function .rotation() takes in one parameter, the degree in which an object will be rotated. Of note, is the amount of degrees in a full circle is 360.</p>
|
||||
<pre><code>object.rotation(10);
|
||||
//sets the rotation of the object to 10 degrees</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Wall Blaster 2</li>
|
||||
<li><a href="https://www.mathsisfun.com/geometry/images/degrees-360.gif">Degrees in Circle</a></li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="flipdirection">
|
||||
<h3>.flipDirection()</h3>
|
||||
<p>The function .flipDirection() will turn an object to the opposite direction. The function takes in no parameters, it will simply just rotate the object 180 degrees from where it is currently facing.</p>
|
||||
<pre><code>object.flipDirection();
|
||||
//flips 'object' to the opposite direction</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Bumper Car</li>
|
||||
<li>Balloon Project</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="pointto">
|
||||
<h3>.pointTo()</h3>
|
||||
<p>The function .pointTo() will point an object in the direction of a coordinate. The function takes in two parameters, the x and y coordinates of a position.</p>
|
||||
<pre><code>object.pointTo(10,10);
|
||||
//points 'object' to the direction of (10,10)</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Shuriken Toss Part 2</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="pointtocursor">
|
||||
<h3>.pointToCursor()</h3>
|
||||
<p>The function .pointToCursor() will point an object in the direction of the mouse pointer. The function takes in no parameters.</p>
|
||||
<pre><code>object.pointToCursor();
|
||||
//points 'object' in the direction of the mouse pointer</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Shuriken Toss Part 2</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="pointtoobject">
|
||||
<h3>.pointToObject()</h3>
|
||||
<p>The function .pointToObject() will point an object in the direction of another item. The function takes in one parameter, the destination object.</p>
|
||||
<pre><code>object.pointToObject(object2);
|
||||
//points 'object' in the direction of 'object2'</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Ninja Battle</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
67
Scale.html
Normal file
67
Scale.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!--Code Ninjas | Jackson Hagood-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Scale</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||
<link rel="icon" href="images/icon.png">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidenav">
|
||||
<a href="functions.html"><h2>GDP Functions</h2></a>
|
||||
<br>
|
||||
<h2><a href="position.html">Position</a></h2>
|
||||
<h2><a href="rotation.html">Rotation</a></h2>
|
||||
<h2><a href="scale.html">Scale</a></h2>
|
||||
<ul id="contents">
|
||||
<li><a href="#scalexy">.scaleX() and .scaleY()</a></li>
|
||||
<li><a href="#wd">.height() and .width()</a></li>
|
||||
</ul>
|
||||
<h2><a href="collision.html">Collision</a></h2>
|
||||
<h2><a href="appearance.html">Appearance</a></h2>
|
||||
<h2><a href="timers.html">Timers</a></h2>
|
||||
<h2><a href="animation.html">Animation</a></h2>
|
||||
<h2><a href="attributes.html">Attributes</a></h2>
|
||||
<h2><a href="miscellaneous.html">Miscellaneous</a></h2>
|
||||
</div>
|
||||
<div name="Scale"> <!--done-->
|
||||
<h1>Scale</h1>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="scalexy">
|
||||
<h3>.scaleX() and .scaleY()</h3>
|
||||
<p>The functions .scaleX() and .scaleY() can be used to scale an object's x and y components. The functions can also be used to return and object's current scale. .scaleX() and .scaleY() take in one parameter, and object's desired scale.</p>
|
||||
<pre><code>object.scaleX(10);
|
||||
//scales 'object' in the x direction, with a factor of 10
|
||||
var scale = object.scaleY();
|
||||
//sets variable 'scale' to the y scale of 'object'</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Meteors Part 2</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="wd">
|
||||
<h3>.height() and .width()</h3>
|
||||
<p>The functions .height() and .width() can set an object's dimensions. .width() sets and object's x dimension, while .height() sets an object's y dimension. The functions take in one parameter, and object's desired dimension. These functions can also return an object's current dimension.</p>
|
||||
<pre><code>object.width(10);
|
||||
//sets the width of 'object' to 10;
|
||||
var height = object.height();
|
||||
//sets variable 'height' to the height of 'object'</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Space Bumpers</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
96
Style.css
Normal file
96
Style.css
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
.sidenav {
|
||||
height: 100%;
|
||||
width: 250px;
|
||||
|
||||
padding-top: 25px;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
border-right-style: solid;
|
||||
border-right-width: 5px;
|
||||
border-right-color: #8ac760cc;
|
||||
|
||||
background-color: #323232;
|
||||
overflow-x: hidden;
|
||||
position: fixed;
|
||||
}
|
||||
.sidenav a {
|
||||
|
||||
text-decoration: none;
|
||||
color: #FFFFFF;
|
||||
display: block;
|
||||
}
|
||||
.sidenav a:hover {
|
||||
color: #8ac760;
|
||||
}
|
||||
body{
|
||||
margin-left: 250px;
|
||||
padding: 0px 25px 10px 25px;
|
||||
|
||||
|
||||
background-image: url(images/background.png);
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
|
||||
font-family: verdana;
|
||||
color: #000000;
|
||||
}
|
||||
.item{
|
||||
padding-top: 1px;
|
||||
padding-right: 25px;
|
||||
padding-left: 25px;
|
||||
padding-bottom: 1px;
|
||||
|
||||
font-size: 20px;
|
||||
|
||||
background-color: #969696CC;
|
||||
}
|
||||
h1{
|
||||
font-family: tahoma;
|
||||
color: #c12d2d;
|
||||
font-size: 50px;
|
||||
}
|
||||
h2{
|
||||
font-family: tahoma;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding-left: 15px;
|
||||
font-size: 25px;
|
||||
}
|
||||
h3{
|
||||
font-family: tahoma;
|
||||
font-size: 25px;
|
||||
}
|
||||
h4{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
ul{
|
||||
list-style-type: square;
|
||||
margin: 0;
|
||||
padding-left: 35px;
|
||||
font-size: 15px;
|
||||
}
|
||||
ol{
|
||||
margin-top: -20px;
|
||||
}
|
||||
#contents{
|
||||
|
||||
}
|
||||
pre{
|
||||
padding: 10px 10px 10px 10px;
|
||||
background-color: #C8C8C8CC;
|
||||
|
||||
border-color: #C8C8C8CC;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
code{
|
||||
font-family: courier;
|
||||
font-size: 18px;
|
||||
color: #323232;
|
||||
}
|
||||
.more{
|
||||
}
|
||||
50
Timers.html
Normal file
50
Timers.html
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<!--Code Ninjas | Jackson Hagood-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Timers</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
|
||||
<link rel="icon" href="images/icon.png">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidenav">
|
||||
<a href="functions.html"><h2>GDP Functions</h2></a>
|
||||
<br>
|
||||
<h2><a href="position.html">Position</a></h2>
|
||||
<h2><a href="rotation.html">Rotation</a></h2>
|
||||
<h2><a href="scale.html">Scale</a></h2>
|
||||
<h2><a href="collision.html">Collision</a></h2>
|
||||
<h2><a href="appearance.html">Appearance</a></h2>
|
||||
<h2><a href="timers.html">Timers</a></h2>
|
||||
<ul id="contents">
|
||||
<li><a href="#createtimer">createTimer()</a></li>
|
||||
</ul>
|
||||
<h2><a href="animation.html">Animation</a></h2>
|
||||
<h2><a href="attributes.html">Attributes</a></h2>
|
||||
<h2><a href="miscellaneous.html">Miscellaneous</a></h2>
|
||||
</div>
|
||||
<div name="Timers"> <!--done-->
|
||||
<h1>Timers</h1>
|
||||
|
||||
<div class="item"> <!--done-->
|
||||
<a name="createtimer">
|
||||
<h3>createTimer()</h3>
|
||||
<p>The function createTimer() will make a timer that delays certain code. The function takes in two parameters. The first is the time, in milliseconds, before the function is executed. The second parameter is the function that will be executed after the delay.</p>
|
||||
<pre><code>createTimer(1000,function(){});
|
||||
//starts a timer of 1000 milliseconds
|
||||
//after the timer, function() will be executed</code></pre>
|
||||
<h4>See Further:</h4>
|
||||
<ol class="more">
|
||||
<li>Rain Catcher Part 5</li>
|
||||
<li>Rain Catcher Part 6</li>
|
||||
</ol>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!--cleanupTimers()-->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue