123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>

<html lang="en">
<head>
<!--     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
	<title>Technical Documentation Page</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
	<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="techdoc_style.css">
	<script src="https://kit.fontawesome.com/a15780bccc.js"></script>
</head>

<body>
	<main id="main-doc">
		<div id="toggle-header">
			<h1 id="logo-title">GD Script</h1>
			<i id="dropdown" class="fas fa-bars"></i>

			<div id="nav-drop" class="inactive">
				<ul id="drop-list">
					<li><a class="drop-link" href="#about">About</a></li>
					<li><a class="drop-link" href="#dynamic_nature">Dynamic Nature</a></li>
					<li><a class="drop-link" href="#arrays">Arrays</a></li>
					<li><a class="drop-link" href="#dictionaries">Dictionaries</a></li>
					<li><a class="drop-link" href="#for_and_while">For & While</a></li>
				</ul>
			</div>
		</div>		

		<nav id="nav-bar">	
			<div id="logo">
				<div id="logo-image"></div>
				<header id="logo-title">GD Script</header>
			</div>

			<ul id="nav-list">
				<li><a class="nav-link" href="#about">About</a></li>
				<li><a class="nav-link" href="#dynamic_nature">Dynamic Nature</a></li>
				<li><a class="nav-link" href="#arrays">Arrays</a></li>
				<li><a class="nav-link" href="#dictionaries">Dictionaries</a></li>
				<li><a class="nav-link" href="#for_and_while">For & While</a></li>
			</ul>		
		</nav>			
		<div id="content">
			<div id="about"></div>
			<section class="main-section">
				<header>About</header>
				<h2>Introduction</h2>
				<p>GDScript is a high level, dynamically typed programming language used to create content. It uses a syntax similar to Python (blocks are indent-based and many keywords are similar). Its goal is to be optimized for and tightly integrated with Godot Engine, allowing great flexibility for content creation and integration.</p>
				<h2>Example of GD Script</h2>
				<div class="code">
					<code>
						<em># A file is a class!</em>
						<br>
						<br>
						<em># Member Variables</em>
						<br>
						<br>
						<strong>var</strong> a = 5 <br>
						<strong>var</strong> s = "Hello"<br>
						<strong>var</strong> arr = [1, 2, 3]<br>
						<strong>var</strong> dict = {"key": "value", 2:3}<br>
						<br>
						<em># Constants</em>
						<br>
						<br>
						<strong>const</strong> ANSWER = 42
						<strong>const</strong> THE_NAME = "Charly"
						<br>
						<br>
						<em># Built-in Vector Types</em>
						<br>
						<br>
						<strong>var</strong> v2 = Vector2(1, 2)
						<strong>var</strong> Vector3(1, 2, 3)
						<br>
						<br>
						<em># Function</em>
						<br>
						<br>
						<strong>func</strong> some_function(param1, param2):
					</code>
				</div>
			</section>
			<div id="dynamic_nature"></div>
			<section class="main-section">
				<header>Dynamic Nature</header>
				<h2>Pros & cons of dynamic typing</h2>
				<p>
					GDScript is a Dynamically Typed language. As such, its main advantages are that:
				</p>
				<ul class="content-list">
					<li>The language is simple and easy to learn.</li>
					<li>Most code can be written and changed quickly and without hassle.</li>
					<li>Less code written means less errors & mistakes to fix.</li>
					<li>Easier to read the code (less clutter).</li>
					<li>No compilation is required to test.</li>
				</ul>
				<p>
					While the main disadvantages are:
				</p>
				<ul class="content-list">
					<li>Less performance than statically typed languages.</li>
					<li>More difficult to refactor (symbols can’t be traced)</li>
					<li>Some errors that would typically be detected at compile time in statically typed languages only appear while running the code (because expression parsing is more strict).</li>
					<li>Less flexibility for code-completion (some variable types are only known at run-time).</li>
				</ul>
				<p>
					This, translated to reality, means that Godot+GDScript are a combination designed to create games quickly and efficiently. For games that are very computationally intensive and can’t benefit from the engine built-in tools (such as the Vector types, Physics Engine, Math library, etc), the possibility of using C++ is present too. This allows to still create the entire game in GDScript and add small bits of C++ in the areas that need a performance boost.
				</p>
				<h2>Variables & assignment</h2>
				<p>
					All variables in a dynamically typed language are “variant”-like. This means that their type is not fixed, and is only modified through assignment. Example:
				</p>
				<p>Static:</p>
				<div class="code">
					<code>
						int a; // Value uninitialized<br>
						a = 5; // This is valid<br>
						a = "Hi!"; // This is invalid<br>
					</code>
				</div>
				<p>Dynamic:</p>
				<div class="code">
					<code>
						<strong>var</strong> a <em># null by default</em><br>
						a = 5 <em># Valid, 'a' becomes an integer</em><br>
						a = "Hi!" <em># Valid, 'a' changed to a string</em>
					</code>
				</div>
			</section>
			<div id="arrays"></div>
			<section class="main-section">
				<header>Arrays</header>
				<p>
					Arrays in dynamically typed languages can contain many different mixed datatypes inside and are always dynamic (can be resized at any time). Compare for example arrays in statically typed languages:
				</p>
				<div class="code">
					<code>
						int *array = new int[4]; // Create array<br>
						array[0] = 10; // Initialize manually<br>
						array[1] = 20; // Can't mix types<br>
						array[2] = 40;<br>
						array[3] = 60;<br>
						// Can't resize<br>
						use_array(array); // Passed as pointer<br>
						delete[] array; // Must be freed<br><br>

						// or<br><br>

						std::vector (int) array;<br>
						array.resize(4);<br>
						array[0] = 10; // Initialize manually<br>
						array[1] = 20; // Can't mix types<br>
						array[2] = 40;<br>
						array[3] = 60;<br>
						array.resize(3); // Can be resized<br>
						use_array(array); // Passed reference or value<br>
						// Freed when stack ends<br>
					</code>
				</div>
				<p>And in GD Script</p>
				<div class="code">
					<code>
						<strong>var</strong> array = []<br>
						array.append(4)<br>
						array.append(5)<br>
						array.pop_front()<br>
					</code>
				</div>
				<p>In dynamically typed languages, arrays can also double as other datatypes, such as lists:</p>
				<div class="code">
					<code>
						<strong>var</strong> array = []<br>
						array.append(4)<br>
						array.append(5)<br>
						array.pop_front()<br>
					</code>
				</div>
				<p>Or unordered sets:</p>
				<div class="code">
					<code>
						<strong>var</strong> a = 20<br>
						<strong>if</strong> a <strong>in</strong> [10, 20, 30]:<br>
    					print("We have a winner!")<br>
					</code>
				</div>
			</section>
			<div id="dictionaries"></div>
			<section class="main-section">
				<header>Dictionaries</header>
				<p>
					Dictionaries are a powerful tool in dynamically typed languages. Most programmers that come from statically typed languages (such as C++ or C#) ignore their existence and make their life unnecessarily more difficult. This datatype is generally not present in such languages (or only on limited form).
				</p>
				<p>
					Dictionaries can map any value to any other value with complete disregard for the datatype used as either key or value. Contrary to popular belief, they are efficient because they can be implemented with hash tables. They are, in fact, so efficient that some languages will go as far as implementing arrays as dictionaries.
				</p>
				<p>Example of Dictionary:</p>
				<div class="code">
					<code>
						<strong>var</strong> d = {"name": "John", "age": 22} <em># Simple syntax</em><br>
						print("Name: ", d["name"], " Age: ", d["age"])<br>
					</code>
				</div>
				<p>Dictionaries are also dynamic, keys can be added or removed at any point at little cost:</p>
				<div class="code">
					<code>
						d["mother"] = "Rebecca" <em># Addition</em><br>
						d["age"] = 11 <em># Modification</em><br>
						d.erase("name") <em># Removal</em><br>
					</code>
				</div>
				<p>
					In most cases, two-dimensional arrays can often be implemented more easily with dictionaries. Here’s a simple battleship game example:
				</p>
				<div class="code">
					<code>
						# Battleship game

						<strong>const</strong> SHIP = 0<br>
						<strong>const</strong> SHIP_HIT = 1<br>
						<strong>const</strong> WATER_HIT = 2<br><br>

						<strong>var</strong> board = {}<br><br>

						<strong>func</strong> initialize():<br>
						    <span class="tab"></span> board[Vector(1, 1)] = SHIP<br>
						    <span class="tab"></span> board[Vector(1, 2)] = SHIP<br>
						    <span class="tab"></span> board[Vector(1, 3)] = SHIP<br><br>

						<strong>func</strong> missile(pos):<br>
						    <span class="tab"></span><strong>if</strong> pos in board: <em># Something at that pos</em><br>
						        <span class="tab"></span><span class="tab"></span><strong>if</strong> board[pos] == SHIP: <em># There was a ship! hit it</em><br>
						            <span class="tab"></span><span class="tab"></span>board[pos] = SHIP_HIT<br>
						        <span class="tab"><span class="tab"></span></span><strong>else:</strong> <br>
						           <span class="tab"></span><span class="tab"></span> print("Already hit here!") <em># Hey dude you already hit here</em><br>
						    <span class="tab"></span><strong>else:</strong> <em># Nothing, mark as water</em><br>
						        <span class="tab"></span><span class="tab"></span>board[pos] = WATER_HIT<br><br>

						<strong>func</strong> game():<br>
						    <span class="tab"></span>initialize()<br>
						    <span class="tab"></span>missile(Vector2(1, 1))<br>
						    <span class="tab"></span>missile(Vector2(5, 8))<br>
						    <span class="tab"></span>missile(Vector2(2, 3))<br>
					</code>
				</div>							
			</section>
			<div id="for_and_while"></div>
			<section class="main-section">
				<header>For & While</header>
				<p>
					Iterating in some statically typed languages can be quite complex:
				</p>
				<div class="code">
					<code>
						<strong>const</strong> char* strings = new const char*[50];<br><br>

						[..]<br><br>

						<strong>for</strong> (int i = 0; i < 50; i++)<br>
						{<br>

						    <span class="tab"></span>printf("Value: %s\n", i, strings[i]);<br>
						}<br><br>

						<em>// Even in STL:</em><br><br>

						<strong>for</strong> (std::list<std::string>::const_iterator it = strings.begin(); it != strings.end(); it++) {<br><br>

						    <span class="tab"></span>std::cout << *it << std::endl;<br><br>
						}<br>
					</code>
				</div>
				<p>This is usually greatly simplified in dynamically typed languages:</p>
				<div class="code">
					<code>
						<strong>for</strong> s <strong>in</strong> strings:<br>
    					print(s)
					</code>
				</div>
				<p>Container datatypes (arrays and dictionaries) are iterable. Dictionaries allow iterating the keys:</p>
				<div class="code">
					<code>
						<strong>for</strong> key <strong>in</strong> dict:<br>
    					print(key, " -> ", dict[key])
					</code>	
				</div>
				<p>Iterating with indices is also possible:</p>
				<div class="code">
					<code>
						<strong>for</strong> i <strong>in</strong> range(strings.size()):<br>
    					print(strings[i])
					</code>	
				</div>
				<div class="code">
					<code>
						<strong>range</strong>(n) <em># Will go from 0 to n-1</em><br>
						<strong>range</strong>(b, n) <em># Will go from b to n-1</em><br>
						<strong>range</strong>(b, n, s) <em># Will go from b to n-1, in steps of s</em><br>
					</code>	
				</div>

			
			</section>
		</div>	
	</main>
	<script type="text/javascript" src="techdoc.js"></script>
</body>
</html>
            
          
!
            
              * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	color: #293241;
}

body {
	font-family: 'Lato', sans-serif;
}

#main-doc {
	display: grid;
	grid-template-columns: .8fr 3.2fr;
}

.tab {
	display: inline-block;
	padding-left: 40px;
}

/*===============================================================
NAVIGATION
===============================================================*/

#nav-bar {
	height: 100%;
	background-color: #293241;
	height: 100vh;
	position: sticky;
	top: 0;
}

#drop-list {
	background: #293241;
	position: fixed;
	top: 60px;
	width: 100%;
}

#logo {
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 20px 0;
}

#logo-image {
	background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRq5SM0wcHbh-uyk_-_GMEaHwfypkHzO2L60Ftkjl_frQvezzBQog") no-repeat center center;
	height: 100px;
	width: 100px;
	background-size: cover;
	align-self: center;
	border-radius: 5px;
}

#logo-title {
	align-self: center;
	color: #e0fbfc;
	font-weight: 500;
	font-size: 2em;
	letter-spacing: 1px;
}

i {
	color: green;
	align-self: right;
	font-size: 2.5rem;
	line-height: 60px;
	height: 60px;
	padding: 10px 30px;
	color: #e0fbfc;
	cursor: pointer;
}

i:hover {
	color: #ee6c4d;
	transform: translate();
	transition: 0.1s;
}

#nav-list li {
	height: 50px;
	line-height: 50px;
	display: flex;
}

#nav-list li:hover {
	background-color: #fff;
	color: #ee6c4d;
	transform: translate();
	transition: 0.3s;
}

.nav-link {
	text-decoration: none;
	color: #e0fbfc;
	padding-left: 10px;
	height: 50px;
	width: 100%;
}

.nav-link:hover {
	color: #ee6c4d;
	transform: translate();
	transition: 0.6s;
}

.drop-link {
	text-decoration: none;
	color: #e0fbfc;
	padding-left: 10px;
	height: 50px;
	width: 100%;
}

.drop-link:hover {
	color: #ee6c4d;
	transform: translate();
	transition: 0.3s;
}

#drop-list li:hover {
	background-color: #fff;
	color: #ee6c4d;
	transform: translate();
	transition: 0.3s;
}

#toggle-header {
	background-color: #293241;
	height: 60px;
	display: none;
	flex-direction: row;
	justify-content: space-between;
	position: sticky;
	top: 0;
}

#about, #dynamic_nature, #arrays, #dictionaries, #for_and_while {
	visibility: hidden;
	display: block;
}


/*===============================================================
MAIN CONTENT
===============================================================*/

#content {
	padding: 30px;
}

#content header {
	font-size: 2em;
	font-weight: 700;
	border-bottom: 5px solid #ee6c4d;
	margin-bottom: 30px;
}

h2 {
	margin-bottom: 20px;
}

p {
	margin-bottom: 20px;
}
.code {
	background-color: #e0fbfc;
	border-radius: 5px;
	border: 1px solid #98c1d9;
	padding: 10px;
	margin-bottom: 20px;
}

code {
	color: #293241;
}

em {
	color: #3d5a80;
}

strong {
	color: #ee6c4d;
}

.content-list {
	margin-bottom: 20px;
	padding-left: 20px;
	line-height: 1.5;
}

.active {
	display: block;
	position: fixed;
}

.inactive {
	display: none;
}

/*===============================================================
MEDIA QUERIES
===============================================================*/

@media (max-width: 745px) {

	::-webkit-scrollbar {
	display: none;
	}

	#nav-bar {
		display: none;
	}

	#main-doc {
		grid-template-columns: 1fr;
	}

	#toggle-header {
		display: flex;
	}

	#logo-title{
		align-self: left;
		padding: 0 0 0 30px;
		line-height: 60px;
		height: 60px;
	}

	#drop-list li {
		height: 50px;
		line-height: 50px;
		display: flex;
	}

	#about, #dynamic_nature, #arrays, #dictionaries, #for_and_while {
	padding-top: 60px;
	}
}
            
          
!
            
              var dropdownBtn = document.getElementById("dropdown");
var listBtn = document.querySelectorAll('.drop-link');
var navDrop = document.getElementById('nav-drop');

//Set up event listeners:
dropdownBtn.addEventListener('click', toggleMenu)

for (i = 0; i < listBtn.length; i++) {
	listBtn[i].addEventListener('click', toggleMenu);
}

function toggleMenu(){
	navDrop.classList.toggle('active');
	navDrop.classList.toggle('inactive');
}


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console