Learn your way!

Posts by: Richard

JavaScript Loops and Conditionals

What are JavaScript Conditionals JavaScript conditionals are statements that are to alter the control flow based on a condition.  An example of a condition is a Boolean value of true or false.  This can easily be used in the traditional IF statement. IF Statements To test if a value is true or false in a single IF statement you can do an equality check.  To do an equality check you would normally use the double equals (e.g., ==) in a condition like this: Equality logical operator (e.g., ==) is considered a loose equality check, while a triple equals (e.g., ===) is strict. Strict equality is strict because it checks if the operands are of the same type and if the contents match. But the equality logical operator (e.g., ==) will convert the operands to the same type and then check if their contents match. If-Else Statements When you need statements to execute not just if the conditions are met, but when they are not met as well. That’s when you would use the IF-Else control.  For example: This means that you can have blocks of code executing based on if a conditional is true or false. If-Then-Else Statements If that’s not enough you can add more if statements to the original one, which removes the limit of just to 2 outcomes. Switch Statements A switch statement evaluates an expression based on a case-cause value evaluation. The expression is compared to the case values one by one from top to bottom.  If the expression matches one of the values, it will execute the statements below it.  It will continue to execute until it reaches a break statement or the end of the switch statement.  It is common to have a break statement after each case clause to stop execution of code. What are JavaScript Loops Loops are a...

What are Functions in JavaScript

What are functions in JavaScript? Functions in JavaScript are blocks of code that are separate and reusable in other parts of your program.  They can contain parameters, return statements or just a set of instructions.  It’s a fundamental way to organize and reuse code in JavaScript. What does a basic function look like? If you did not know, the word “function” is a reserved keyword and you can check out a list of reserved keywords here. Functions vs Procecdures You can see the different between a function and a procedure easily.  I will quote Toon Krijthe, “A function returns a value and a procedure just executes commands.”.  While functions and procedures may look the same, you can see the difference by looking to see if there is a return statement or not.  In a procedure you will have lines of code without returning any value.  But a function will return a value of some sort. Defining functions Name Name of the function. Parameter Parameters are part of the method signature, but they are called arguments when calling a function.  You can have up to 255 parameters, but typically you should stay in the range of up to 5. Statements Statements is the code that makes up the body of the function. Function Parameters Earlier you learned that functions can have parameters.  These parameters are located in the function definition when creating the function. Parameters are a way of passing arguments into a function to perform operations.  Arguments are the real values that are being passed when calling the function. Parameter Default Values When calling a function if you fail to pass in an argument on any parameter it will set that value to undefined.  This can be avoided by adding a default value to the function’s definition. Function Return Statement A function is not a function...

The Essential JavaScript Operators

Operations When using an expression like 2 + 3 equals 5, the 2 and the 3 are operands and the + is known as the operator. JavaScript allows you to perform operations on data operands. Here is a list of supported operators:  Assignment Operators Arithmetic Operators   Unary Operators  Comparison Operators  String Operators  Logical Operators All of the operators won’t be covered in this one tutorial since all we need are the essentials to get started with programming. Once we’ve reached a certain level of programming I will go into more details on the ones that have been left out. Assignment Operators The most basic assignment operator is the = sign which assigns the value on the right operand to the left. The other assignment operators that are listed below are considered shorthand. If the last two statement above confused you a little, it’s okay. The first statement assigns x the value of 3. On the statement below it we aren’t creating a new variable since there is no var in front of it. What we are doing instead is taking the value of x and adding 5 to it with the += operator which gives you the value of 8 in the end.  Finally, the last statement takes the value of x, which is currently 8 and subtracts 1.  That leaves x as 7. Arithmetic Operators Arithmetic has the basic operators used in JavaScript and are easily recognizable. It’s not just limited to 2 operands, but for example purposes lets stick to simple expressions. Another operator is known as the modulus which is represented by the % symbol. What it does is divides the two operands and the remainder is the result. Unary Operators Unary operators only need a single operand, and it can be placed in front or behind the operator. They...

JavaScript Operators

Javascript Variables And DataTypes

To get started in game development you should have some basic knowledge of JavaScript. The best way to learn is through game programming examples. To do that we are going to start with Variables and Datatypes. Variables Variables are named containers that store data in a program. You can store the player stats, scores or game object locations. Before being able to use a variable they must be declared first in JavaScript. To do that you simply add the keyword var in front of the variable you want to create. Examples: Variables can be given almost any name except for a few rules: You cannot use JavaScript reserved keywords as a variable name. I created a full list infographic here. Names cannot start with a number, but they can be added anywhere else in the name! They are also case-sensitive, meaning “weapon” and “Weapon” are two different variables. Another thing to note is you only need to declare a variables once. For example: Notice when I wanted to change the name I put in the variable characterName I did not put the keyword var in front of it. Datatypes There are six primitive datatypes: Numbers Strings Booleans Null Undefined Object Number Numbers are essential in game development. They are used to keep track of score, how far an enemy is from the player, and how many lives the player has left, etc… To simply create a variable with a number you would declare it like the example below: String Strings can be considered as a sequence of characters. These can be used to display helpful information on the HUD or dialogue within the game.   Take the score for example. It would be helpful if there was text in front of the score number within a game to make it clear where the score number...

JavaScript Reserved Words

Cocos2D-X vs Unity3D Infographic

Javascript Video Tutorials For Beginners

Introduction I’m the type of person that enjoys learning on a daily basis. I go through a lot of video and written tutorials on everything I can find taht is JavaScript related.  Lately, I’ve been on a Udemy binge, watching all the courses that look good.  Doing a search for “JavaScript” on Udemy will bring up countless courses that are both good and bad.  I want to give an honest review on one of my personal favorites and one of the best javascript 101 tutorials.   Javascript the Basics JavaScript the Basics – JavaScript for Beginners is a course meant for beginners who want to get an in depth understand of the language. Here is a more detailed list: JavaScript Building Blocks (Variables, Strings & Operators) Objects – What they are and how to use them Arrays, Functions, Loops, Conditions Regular Expressions Context: This, Bind, Call & Apply Functional Programming Algorithms ES6 The course has 67 lectures with 7 hours of video at the time of writing this review with updates made regularly. Pros There are a lot of topics that are covered where other courses do not. It goes into detail on Regular Expressions, Context, Functional Programming and Algorithms. Another great feature are the labs. Once a concept is learned, a lab is presented to the student where they get to practice what they just learned. This is a great way to get some practice, because  Passive learning creates knowledge. Active practice creates skill. Cons Each section in the course introduces a new topic, but there isn’t a finished project in the end.  All lab work is wiped as soon as the browser is closed.  On top of that, there isn’t the use of an IDE besides   the Google Chrome’s Developer Console.  The console is simple and easy to use, but as I’ve mentioned before your work...

Changing Bootstrap’s Default Modal Position

Bootstrap is one of the most popular frameworks used in developing responsive websites for mobile and desktop in HTML, CSS and Javascript. It’s something that is real easy to get started with, and a new way to start a new project. One feature that it offers is the plugins. Bootstrap comes equipped with a lot of plugins that utilize the JQuery library. One in particular is known as the modal, which can be used to display a message, form or warning as an overlay on top of it’s current page. A typical Bootstrap modal will look like this: Displaying a modal A modal can be displayed when an event is trigged. For example, when the page is fully loaded, a button is clicked or even when a mouse pointer is hovering over an image. They are perfect when wanting to grab the user’s attention at any given time. What may not be perfect is the default position of the modal, which is top-center. Changing position with just one line of code That’s right, with just one line of code the modal can be moved all over the screen. The best part is the fact that it’s not complicated enough to make anyone want to pull their hair out. There is a catch!  The catch is that you must run it after the modal is showing or have a fixed height/width.  If there isn’t a fixed height/width then the modal has to be already showing for this to work.  The reason why it needs a fixed dimension is because when it’s hidden the height/width is technically zero and our calculations won’t be accurate.  Regardless of which method is used it’s usually ran by a triggered event. Bootstrap provides events for most of their plugins, which come in handy.  They can be triggered at different...

Getting Started With Cocos Creator

Cocos Creator is a must have for any small team of game developers that want to reach a larger market by distributing on multiple platforms. It provides a wide variety of tools that houses the powerful Cocos2d-x game engine. The most exciting part about it is that all of your games can be developed in Javascript! Features of Cocos Creator Installation   Dashboard After Installation is complete,  run Cocos Creator and you will be presented with a Dashboard. There are four tabs listed: • Recent Projects – most recent projects • New Projects – start new project • Open Other – open a project not listed under most recent Editor Interface When a project is opened in the editor there are menus and panels that make up the interface. Panels can be moved and combined to customize it even more. Here we will take a look at the default layout: Toolbar The Toolbar contains the basic scene editing tools, game preview window, and remote debugging information. Asset Manager The asset manager shows all the objects/assets within the project in a hierarchy format. You can drag and drop files over it to easily add more assets. Scene Editor Scene editor is a WYSWYG working area where you can work on your project in real time. Attribute Properties The Attributes Properties is the area where we can view and edit properties of the currently selected object/node.   This is an easy way to setup and install Cocos Creator.  Next we will get started on our first game tutorial!  Feel free to subscribe to our newsletter to get the latest news and updates.

CodeWordjs Newsletter
Get up-to-date tutorials and information weekly on Javascript.
Your Information will never be shared with any third party.