Quick intro to JavaScript and codeguppy.com

JavaScript is one of the most versatile programming languages and a core tool for creative coding, game development and web development. Whether you are a beginner or looking to refresh your knowledge, this guide offers a quick overview of fundamental JavaScript concepts, designed to help you hit the ground running. You'll also learn how to leverage codeguppy.com, a beginner-friendly online coding platform, to practice your skills. From variables to loops and functions, this article-book serves as a reference to get started quickly with JavaScript.

Table of Contents

Chapter 1: JavaScript Syntax

• Variables
• if statement
• For loop
• While loop
• Do While loop
• Switch statement
• Functions
• Array methods
• String methods
• Random numbers
• Modules

Chapter 2: Drawing on canvas using JavaScript

• About canvas
• Clearing the canvas
• Background color
• Drawing shapes
• Shape settings
• Turtle Graphics
• Colors
• Angles
• Animations

Chapter 3: User Input

• keyPressed event
• keyReleased event
• keyTyped event
• mouseClicked event
• mousePressed event
• mouseReleased event
• mouseMoved event
• mouseDragged event
• doubleClicked event
• mouseWheel event
• keyIsPressed
• key
• keyCode
• mouseX
• mouseY
• pmouseX
• pmouseY
• mouseIsPressed
• mouseButton
• keyIsDown()
• keyWentDown()

Chapter 4: JavaScript Game Development with codeguppy.com

• Drawing layers
• Setting Background Images
• Loading built-in sprites
• Loading custom sprites
• Loading animated custom sprites
• Set sprite position
• Moving sprites automatically
• Mirroring Sprites
• Sprite rotation
• Rotate sprites automatically
• Drawing depth
• Changing animations
• Mouse events on sprites
• Hiding sprites
• Removing sprites
• Sprite Collisions
• Sprite Groups
• Background Music
• Sound Effects
• Collisions between shapes
• The Game Loop
• Preloading assets
• Showing a scene
• The enter event
• Passing data to a scene

Chapter 5: Other coding hints

• Printing data
• Building data input UIs

Chapter 1: JavaScript Syntax

Let's start our article by exploring the JavaScript syntax.

Declaring variables

Variables are used to store data such as numbers, strings (text) or even complex objects. Remember:

• You can have as many variables as you want inside a program.
• You need to name each variable with a name that represents the data it stores.
• Give different names to variables inside the same code block (e.g. whats between { ... }) or even inside a function

Declare variable x

let x;

Declare x and initialize it with a numerical value

let x = 1;

Declare s and initialize it with a string

let s = "Hello, World!";

Assigning values to variables

Once a variable has been declared with let it can be assigned / reassigned with different values as many times as you want.

You can assign it with simple constants or even complex expressions that include constants, other variables and even the same variable! Computers are very good at evaluating expressions.

Assign number 100 to variable x

x = 100;

Assign string "Hello" to variable s

s = "Hello";

Assign an empty array to variable ar

ar = [];

Assign an array of 3 numbers to variable ar

ar = [1, 2, 3];

Assign and array of 2 strings to variable ar

ar = ["A", "B"];

Assign an inline object to variable o

o = {   Type: 'car', 
        x : 100, 
        y : 200 
    };

Variable sum is equal to a + b

sum = a + b;

Assign an expression to variable avg

avg = (a + b) / 2;

Variable sum is increased by 10 (the new sum becomes the older sum + 10)

sum = sum + 10;

Variable i is increased (incremented) by 1

i++;

Variable i is incremented by 2

i += 2;

if statement

if statements are great for controlling the flow of the program. Normally a program is executed one instruction at a time, from top to bottom.

if allow to take a decision and execute a set of instructions if the condition is met.

Executes the block of instructions between {} if condition is true

if (mouseX < width)
{

}

Executes the first block of instructions if condition is true, otherwise the second block

if (hour < 12)
{

}
else
{

}

Executing different blocks based on different conditions

In the following example, if the first condition is true, then the first block will be executed and the others not.

However, if the first condition is not true, the else if is used to test another condition, and if is true, the block of that else if is executed.

The block after the last else is executed only if no other condition was true until that point.

if (minute <= 15)
{
}
else if(minute <= 30)
{
}
else
{
}

Note: You can have multiple else if blocks in this kind of experessions.

for loop

Prints numbers from 0 to 4 using a for loop and println

for(let i = 0; i < 5; i++)
{
    println(i);
}

Prints numbers from 10 down to 0 using a for loop

for(let i = 10; i >= 0; i--)
{
    println(i);
}

Prints even numbers from 0 to 100

for(let i = 0; i <= 100; i+=2)
{
    println(i);
}

Print all elements of an array

let ar = [10, 20, 30];

for(let element of ar)
{
    println(element);
}

while loop

Print numbers from 0 to 9 using a while loop

let i = 0;

while(i < 10)
{
    println(i);
    i++;
}

do while

Print numbers from 0 to 10 using a do while loop

let i = 0;

do
{
    println(i);
    i++;
}
while(i < 10)

Note: do while loop places condition after the code block, therefore the block can execute at least once even if the condition is false.

switch Statement

A switch statement is another instruction besides if / else if for controlling the flow of a program. You can use switch to compare an expression against different values and then run the coresponding set of instructions based if that expression is equal to any case value.

Usually switch is used less often than if / else if / else.

switch(myExpresion)
{
    case 100:
        //...
        break;
    case 200:
        //...
        break;
    case 300:
        //...
        break;
    default:
        //...
}

Functions

Functions are great for creating new language instructions that you can use over and over again in a program.

Once you define a new instruction, it becomes indistinguishable from the built-in instructions present in JavaScript and codeguppy.com

Defining and calling the function balloon

// Function balloon draws a balloon using simple shapes such as circle and line
// It expects as arguments the coordinates for balloon center and the color of the balloon
function balloon(x, y, shapeColor)
{
    let r = 30;
    let stringLen = 100;

    fill(shapeColor);
    stroke(shapeColor);

    circle(x, y, r);
    line(x, y + r, x, y + r + stringLen);
}

// Call function balloon with different parameters
balloon(100, 100, "red");
balloon(300, 300, "blue");
balloon(500, 200, "yellow");

Functions that return values

function addNumbers(x, y)
{
    return x + y;
}

// Call a function
var sum = addNumbers(100, 200);
println(sum);

Note: codeguppy.com includes a big number of built-in functions such as circle, rect, etc. You can call these functions in the same way you're calling your own custom function.

Array methods

Use an array to conveniently store a series of values using a single variable name. An array has properties and methods that allow to manipulate its elements.

Declaring and initializing ar to an empty array

let ar = [];

Declaring and initializing ar to an array of 3 numbers

let ar = [10, 20, 30];

Length of an array

let ar = [10, 20, 30];
println("Length of array: ", ar.length); 

Append an element at the end of the array

let ar = [10, 20, 30];
ar.push(100);

println(ar);

Insert an element at the beginning of an array

let ar = [10, 20, 30];
ar.unshift(1);

println(ar);

Insert an element at an arbitrary position

let ar = [10, 20, 30];

// 1 -> after element with potion 1
// 0 -> delete 0 elements
// 15 -> insert number 15
ar.splice(1, 0, 15);

println(ar);

Insert an element at an arbitrary position (easy mode)

Note: The insert array method is present only in codeguppy.com

let ar = [10, 20, 30];
ar.insert(1, 17);

println(ar);

Read the value of element 2 of an array

let ar = [10, 20, 30];
println(ar[2]);

Calculate the sum of elements of an array

let ar = [10, 20, 30];
let sum = 0;

for(let element of ar)
{
    sum += element;
}

println(sum);

Assign a different value to al element of an array

let ar = [10, 20, 30];
ar[2] = 100;

println(ar); 

Accesing the first element

let ar = [10, 20, 30];
println(ar[0]);

Accessing the last element

let ar = [10, 20, 30];
let len = ar.length;
println(ar[len - 1]); 

Accessing the last element (easy way)

Note: The peek array method is present only in codeguppy.com

let ar = [10, 20, 30];
println(ar.peek()); 

Remove the first element of the array

let ar = [10, 20, 30];
ar.shift();

println(ar);

Remove the last element of the array

let ar = [10, 20, 30];
ar.pop();

println(ar);

Remove an element at an arbitrary position

let ar = [10, 20, 30];

// 0 -> element index
// 1 -> number of elements to remove
ar.splice(0, 1);

println(ar);

Remove all elements of an array

let ar = [10, 20, 30];

// clear() is CodeGuppy specific
// use ar.lenght = 0; outside CodeGuppy
ar.clear();

println(ar);

Concatenate two arrays

// Merge / concatenate 2 arrays
let ar1 = ["a", "b", "c"];
let ar2 = ["d", "e", "f"];

let ar = ar1.concat(ar2);
println(ar);

Extract a slice of an array

slice() is an interesting method that can be used to extract a "slice" from an array. The "slice" will be retured as an independent array. The method receives as arguments the index of the first element (inclusive) and the index of the last element that we want in the slice (exclusive):

let ar = ["a", "b", "c", "d", "e", "f"];

// Extracting a 'slice' from an array
let arSlice = ar.slice(2, 4);
println(arSlice);

Joining elements of an array

let ar = ["a", "b", "c", "d", "e", "f"];

// Join all elements in a string using separator ;
let s = ar.join(";");
println(s);

String methods

Just like with arrays, you can access and manipulate independent characters within a string.

Length of a string

let txt = "JavaScript";
println(txt.length);

Iterating all characters of a string

let txt = "JavaScript";

for(let chr of txt)
{
    println(chr);
}

Accessing string characters by position

let txt = "JavaScript";

for(let i = 0; i < txt.length; i++)
{
    println(txt[i]);
}

Converting text to uppercase

let txt = "JavaScript";

txt = txt.toUpperCase();
println(txt);

Converting text to lowercase

let txt = "JavaScript";

txt = txt.toLowerCase();
println(txt);

Determine if the string contains another substring

let txt = "Coding is cool!";
let search = "cool";

if (txt.includes(search))
{
    println(search + " was found in " + txt);
}

Determine if the string starts with a specified prefix

let txt = "JavaScript is cool!";
let search = "JavaScript";

if (txt.startsWith(search))
{
    println(txt + " starts with " + search);
}

Determine if the string ends with a specified sufix

let txt = "JavaScript is cool!";
let search = "!";

if (txt.endsWith(search))
{
    println("It is an exclamation!");
}

Find the position of a substring. Search starts at the beginning

let txt = "JavaScript is cool!";
let search = "cool";

let foundAt = txt.indexOf(search);

if (foundAt < 0)
    println("Not found!");

else
    println("Found at position " + foundAt);

Find the position of a substring. Search starts at specified index.

let txt = "JavaScript is cool! Super cool!";

let search = "cool";
let startAt = 18;

let foundAt = txt.indexOf(search, startAt);

if (foundAt < 0)
    println("Not found!");

else
    println("Found at position " + foundAt);

Extract a substring from the string

let txt = "JavaScript is cool!";

let index1 = 14;
let index2 = 18;

let txt2 = txt.substring(index1, index2);

println(txt2);

Remove whitespaces from beginning and end of the string

let txt = "    I love coding !    ";

txt = txt.trim();
println("'" + txt + "'");

Remove whitespaces from beginning of the string

let txt = "    I love coding !    ";

txt = txt.trimStart();
println("'" + txt + "'");

Remove whitespaces from the end of the string

let txt = "    I love coding !    ";

txt = txt.trimEnd();
println("'" + txt + "'");

Pads the start of the string with another string

let no = 3;

let txt = no.toString(2).padStart(8, '0');
println(txt);

Pads the end of the string with another string

let n1 = "1";
let n2 = "3";

txt = n1 + "." + n2.padEnd(4, '0');
println(txt);

Codes of characters

let txt = "JavaScript";

for(let chr of txt)
{
    // Obtain the Unicode code point value
    // ... identical to ASCII code for the range of ASCII values
    let code = chr.codePointAt(0);

    let line = chr + "\t" + code.toString() + "\t" + code.toString(16).toUpperCase() + "\t" + code.toString(2).padStart(7, "0");

    println(line);
}

Characters from codes

let msg = "73 32 76 79 86 69 32 67 79 68 73 78 71"
let base = 10;

let arMsg = msg.split(" ");

for(let i = 0; i < arMsg.length; i++)
{
    if (!arMsg[i])
        continue;

    let code = parseInt(arMsg[i], base);

    // Obtain the character from the Unicode code point
    // (the Unicode code point is the same with ASCII code for the range of ASCII values)
    let chr = String.fromCodePoint(code);

    println(chr);
}

Random numbers

Random numbers are extremly useful in coding.

To obtain a random number in JavaScript between 0 (inclusive) and 1 (exclusive) you can use Math.random() function.

let r = Math.random();
println(r);

codeguppy.com extends the support for random numbers with additional instructions that let you quickly pick a random number in the prefered range.

Random floating point number between 0 and 1 (1 not included)

This is the same as Math.random()

let n = random();
println(n);

Random floating point number between 0 and n (n not included)

let n = random(100);
println(n);

Random floating point number between n1 and n2 (n2 not included)

let n = random(-100, 100);
println(n);

Random int between min and max (both included)

You can use either randomInt or randomNumber

let n = randomInt(0, 10);
println(n);

Random char between chr1 and chr2 (both included)

function randomChar(chr1, chr2)

let char = randomChar("A", "Z");
println(char);

Random element of an array

let ar = ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"];

let char = random(ar);
println(char);

Shuffle an array

let ar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let ar2 = ar.shuffle();

println(ar2);

Modules

To better organize your code, especially in bigger programs, codeguppy.com introduces the concept of modules.

Instead of writing all the functions of a program in a single code page, you can split them into several code pages, each code page becoming in this way a module.

A module provides strong encapsulation for variables and functions defined inside. This encapsulation allows you to define functions / variables with same name in different modules.

To use the functions inside a module, you need first to require that module.

Main program

const math = require("MathUtils");

let sum = math.add(2, 3);
let prod = math.prod(3, 4);

println(sum);
println(prod);

Module MathUtils content

function add(a, b)
{
    return a + b;
}

function prod(a, b)
{
    return a * b;
}

Note: Another use for code pages is for defining game scenes. codeguppy.com has a built-in game scene manager. Please refer to the Game Development article for more details.

Chapter 2: Drawing on canvas using JavaScript

codeguppy.com is a great environment for graphical based activities using both cartesian and turtle graphics.

About canvas

In codeguppy.com, the graphical canvas is 800 x 600 pixels.
The system is automatically initializing the width and height variables with the dimensions of the canvas

It is recommended to use these variables in your program instead of hardcoding constants (whenever is possible).

println(width);
println(height);

Clearing the canvas

clear() is used to clear the drawing canvas. This function is very useful for animations, inside the loop() event, to clear the frame before the next draw.

clear();

Background color

The background command is used to set the background color of the canvas.

💡 The background command is not erasing the shapes drawn on the canvas. To erase the canvas, use clear() instead.

Set the background color to a built-in color specified as a string

background("navy");

Set the background color to a color specified as a hex "#RRGGBB" string

background("#F012D3");

Set the background color to a gray color (0 - black, 255 - white)

background(255);

Note: In codeguppy.com you can set even an image as the background. Please refer to the "Games" page for more details about how to set an image as a background.

Drawing shapes

Draw a circle at coordinates 400 x 300 and radius of 200 pixels

circle(400, 300, 200);

Draw an ellipse at coordinates 400 x 300 and width and height of 300 x 200 pixels

ellipse(400, 300, 300, 200);

Draw a rectangle having the top-left corner at coordinates 400 x 300 and width and height of 300 x 200 pixels

rect(400, 300, 300, 200);

Draw a line between coordinates 400 x 300 and 500 x 500

line(400, 300, 500, 500);

Draw a triangle by specifying each corner coordinates

triangle(400, 100, 200, 400, 600, 500);

Draw an arc

To draw an arc, you specify the coordinates as for an ellipse (center position, width and height) and in addition you specify the start and end angle.

arc(400, 300, 300, 200, 0, 180);

Draw a point at coordinates 400 x 300

point(400, 300);

Draw text JavaScript at coordinates 400 x 300

text('JavaScript', 400, 300);

Shape settings

Note: Once set, these settings will be applied to all successive shape drawn on the canvas

Set the size of text to 20

textSize(20);

text("JavaScript", 400, 300);

Set "Magenta" as the color to fill shapes

fill('Magenta');

circle(400, 300, 100);

Set "Teal" as the color to draw shapes

stroke('Teal');

circle(400, 300, 100);

Set the line thickness to 2 px

strokeWeight(2);

circle(400, 300, 100);

Draw empty shapes, without fill color

noFill();

circle(400, 300, 100);

Draw shapes without an outline

noStroke();

fill("lightblue");
circle(400, 300, 100);

Turtle Graphics

codeguppy.com allows you to combine cartesian graphics with turtle graphics.

When working with Turtle Graphics, you can use the default turtle (recommended for beginners and regular programs) or create additional turtles (for complex programs).

Working with the default Turtle

To use the default turtle, all you need to do is to use the following global instructions.

Reset the default turtle to home position

home();

Sets to Red the pen color of the default turtle

pencolor("Red");

Sets to 2 the pen size of the default turtle

pensize(2);

Put the pen on the paper. The turtle will draw.

pendown();

Raise the pen from the paper. The turtle will advance but not draw

penup();

Move the turtle to an arbitrary position on the canvas

setposition(100, 100);

Turns the default turtle to the left by the number of specified degrees

left(30);

Turns the default turtle to the right by 30 degrees

right(30);

Sets the turtle heading (direction) to an arbitrary angle

setheading(180);

Moves the turtle forward by number of specified pixels.

Note: The turtle moves in the direction that was previosly set with left, right or setheading. If the pen is on the paper, the turtle will draw.

forward(100);

Moves the turtle back by number of specified pixels.

Note: The turtle moves in the oposite direction than would move with forward

back(100);

Retrieve the x and y position of the default turtle as an array of 2 numbers

let p = position();

println(p[0]);
println(p[1]);

Retrieve the default turtle direction in degrees

let angle = heading();

println(angle);

Working with multiple turtles

In complex programs, you may find useful to work with multiple turtles, since each of them maintains their own state such as position, color, etc.

Create multiple turtles

let t1 = createTurtle();
let t2 = createTurtle();

t1.pencolor("Red");
t1.forward(100);

t2.pencolor("Blue");
t2.right(90);
t2.forward(100);

Get the default turtle

let t = getDefaultTurtle();
t.forward(100);

Colors

As observed in the above examples, codeguppy.com allow users to specify colors in a variaty of ways. In this way, you can use the most convenient method for your program.

Named colors

There are a variaty of colors with predefined names in codeguppy.com You can explore all of them on the "Backgrounds" pallete.

fill("Red");
circle(400, 300, 100);

RGB / HTML style colors

When predefined colors are not enough, you can create any color by specifying the Red, Green and Blue ammounts. You can pass these colors as strings to fill and stroke functions using the #RRGGBB format:

fill("#F3E2B5");
circle(400, 300, 100);

Quick gray colors

If you need to quickly create a shade of gray, just pass a number from 0 to 255 to any function that expects a color such as fill or stroke

fill(100);
circle(400, 300, 100);

Colors using the color() function

Another way to create a color is by using the color function and the R, G, B ammounts. These ammounts are in the range of 0 to 255

let myColor = color(100, 200, 150);
fill(myColor);

circle(400, 300, 100);

Changing to HSB mode

By default, codeguppy.com color system is using the RGB mode, where colors are specified by R, G, B ammounts (as seen above).
However, advanced users can switch to HSB mode, where colors are specified by Hue, Saturation and Brightness.

In HSB mode, the values for color function are in the interval 0 - 360

colorMode(HSB);

let c1 = color(100, 50, 300);
fill(c1);
circle(300, 300, 50);

let c2 = color(100, 300, 300);
fill(c2);
circle(500, 300, 50);

Changing back to RGB mode

colorMode(RGB);

Angles

All the trigonometric functions, as well as certain drawing functions such as arc are working with angles.

To appeal to young coders and beginners, all angles in codeguppy.com are in "DEGREES" by default.

However, advanced users can switch to "RADIANS" mode by using angleMode. Don't forget to switch back to "DEGREES" when done working with RADIANS.

angleMode(RADIANS);
arc(400, 150, 300, 200, 0, PI);

angleMode(DEGREES);
arc(400, 350, 300, 200, 0, 180);

Using trigonometric functions

Via the p5.js library, codeguppy.com offers users a series of easy to use trigonometric functions such as sin, cos, etc.

textSize(40);
let x = 0;

function loop()
{
    let y = 300 + 50 * sin(frameCount);
    x++;

    clear();
    text("Hello, World", x, y);
}

Animations

To implement animations, codeguppy.com offers users a method similar to the one use by "cartoons": think of your animation as a series of frames! All you have to do is to draw the first frame, then erase and draw the second frame in a slightly different position, and so on!

loop() is at the base of animations

In codeguppy.com, function loop() is special. All you have to do is to define this function in your code, and the codeguppy.com engine will run it for you up to 60 times per second! There is no need to call it yourself.

Move an horizontal line on the screen

let y = 0;

function loop()
{
    // Clear the frame
    clear();

    // Draw the frame
    line(0, y, 800, y);

    // Update the state
    y++;
    if (y > 600)
        y = 0;
}

Bounce a circle on the screen

let x = 400;
let y = 300;

let dx = 1;
let dy = 1;

let speed = 3;

function loop()
{
    // Clear the frame
    clear();

    // Draw the frame
    circle(x, y, 10);

    // Update the state
    x += speed * dx;
    y += speed * dy;

    if (x < 0 || x > width)
        dx *= -1;

    if (y < 0 || y > height)
        dy *= -1;
}

Change the default frame rate

frameRate(30);
textSize(40);

let n = 0;

function loop()
{
    clear();
    text(n, 400, 300);

    n++;
}

Obtain the frame rate

function loop()
{
    clear();
    text(frameRate(), 400, 300);
}

Chapter 3: User Input

There are two main ways to get keyboard/ mouse user input into a codeguppy.com program: via events or via the loop() function by reading built-in system variables and functions.

Events

codeguppy.com engine can notify your program when a keyboard or mouse event occurs. All you have to do is to define the appropriate function (e.g. event handler) in your program and the system will call it automatically when that event appears.

keyPressed event

Executes once when a key is pressed

function keyPressed()
{
    clear();
    text(key, 400, 300);
    text(keyCode, 400, 320);
}

keyReleased event

Executes when a key is released

function keyReleased()
{
    clear();
    text(key, 400, 300);
    text(keyCode, 400, 320);
}

keyTyped event

Executes when a key is typed execept for special keys

function keyTyped()
{
    clear();
    text(key, 400, 300);
    text(keyCode, 400, 320);
}

mouseClicked event

Executes once when the mouse is pressed and released

function mouseClicked()
{
    circle(mouseX, mouseY, 10);
}

mousePressed event

Executes once when the mouse button is pressed

function mousePressed()
{
    stroke("red");
    circle(mouseX, mouseY, 10);
}

mouseReleased event

Executes when the mouse button is released

function mouseReleased()
{
    stroke("blue");
    circle(mouseX, mouseY, 10);
}

mouseMoved event

Executes when the mouse is moved and button is not pressed

function mouseMoved()
{
    line(mouseX, mouseY, pmouseX, pmouseY);
}

mouseDragged event

Executes when the mouse is moved an a button is pressed

function mouseDragged()
{
    line(mouseX, mouseY, pmouseX, pmouseY);
}

doubleClicked event

Executes when the mouse is double clicked

function doubleClicked()
{
    circle(mouseX, mouseY, 10);
}

mouseWheel event

Executes when the user uses the mouse wheel or touchpad

function mouseWheel()
{

}

System variables

Besides events, the system also populates automatically some system variables with appropriate event data.

You can access these variables from within the event handlers or from within the main animation / game loop().

This is usually the prefered way of getting user input when building games.

keyIsPressed

Boolean system variable that indicates if a key is pressed.

noStroke();
text("Press any key to change color", 10, 10);

function loop()
{
    let color = keyIsPressed ? "Red" : "Green";

    clear();
    fill(color);
    circle(400, 300, 100);
}

key

System variable containing the last typed key.

function keyPressed()
{
    if (key.toLowerCase() === "s")
    {
        showScene("Game");
    }
}

keyCode

System variable containing the code of the last key pressed.

The following constasts can be used instead of a numeric key code: LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW. Use them without quotes.

function keyPressed()
{
    let ENTER_KEYCODE = 13;

    if (keyCode === ENTER_KEYCODE)
    {
        showScene("Game");
    }
}

Note: To find the keyCodes you can write a test program or use a site such as keycode.info.

mouseX

System variable containing the horizontal coordinate of the mouse coursor.

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}

mouseY

System variable containing the vertical coordinate of the mouse coursor

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}

pmouseX

System variable containing the previous horizontal coordinate of the mouse coursor

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}

pmouseY

System variable containing the previous vertical coordinate of the mouse coursor.

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}

mouseIsPressed

Boolean system variable indicating if any mouse button is pressed.
To detect which button is pressed check mouseButton variable.

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}

mouseButton

System variable containing the pressed mouse button. It has one of these values LEFT, RIGHT, CENTER.

To detect if mouse is pressed check mouseIsPressed.

function loop()
{
    let drawColor = mouseButton === LEFT ? "Red" : "Blue";
    stroke(drawColor);

    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}

Functions

keyIsDown()

Use keyIsDown() function inside the loop() event to detect if the specified key is pressed. You need to specify the key code.

The following constasts can be used instead of a numeric key code: LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW. Use them without quotes.

let shipX = width / 2;

function loop()
{
    if (keyIsDown(LEFT_ARROW))
        shipX -= 10;

    else if (keyIsDown(RIGHT_ARROW))
        shipX += 10;

    draw();
}

function draw()
{
    clear();

    noStroke();
    fill("Black");
    text("Use LEFT and RIGHT arrows to move the ship", 10, height - 5);

    fill("Magenta");
    rect(shipX, height - 40, 100, 20);
}

Note: To find key codes you can use a site such as keycode.info

keyWentDown()

keyWentDown() is also intended for loop() event and is similar to keyIsDown().

The difference is that this function returns true just once per key pressed. To retrigger the function, the user need to release the key and press it again:

/i/code.html?hints/userinput_10

Chapter 4: JavaScript Game Development with codeguppy.com

Game development is extremely easy and fun with codeguppy.com. The system comes with built-in background images, sprites, music and sound effects to allow you to focus on the code rather than searching for assets.

Drawing Layers

codeguppy.com has a layered drawing architecture. There are up to 5 drawing layers on top of the canvas at any time as shown in the following diagram:

The engine combines automatically all the layers and displays the final image on the screen.

Setting Background Images

The background command was also presented in the "Drawing" section as a way to set the background color of the canvas, like this:

background('LightBlue');

However, background command can do more than just setting a plain color as a background.

Using the same function, you can set any image from the codeguppy.com library as background:

background('Summer');

💡 To set the background to an image, open the "Backgrounds" palette, and drag and drop an image in the code area. The system will write the appropriate code for you.

The background commands sets the image in the Background layer as presented in the above diagram. In this way the background image won't be erased or altered by clear() instruction or shape drawing instructions or even sprites.

Sprites

Sprites are small images, often animated, that you can load and manipulate through the code. Sprites are an essential ingredient of a succesful game.

codeguppy.com contains a big library of built-in sprites, and in the same time it offers the user the ability to define custom sprites.

Loading Built-in Sprites

You can load any sprite from the built-in library using the sprite command.

Loading a sprite

The sprite instruction will load the built-in sprite plane and place it in the middle of the screen.

background('Summer');
sprite('plane');

💡 Open the Sprites palette and browse all the included built-in sprites. When you find one that you like, drag and drop it in the code editor and the system will write the code automatically.

Loading and positioning a sprite

background('Summer');
sprite('plane', 400, 200);

Loading and scaling a sprite

In the following code snippet, the sprite plane is scalled to 0.5 before being placed in the middle of the screen

background('Summer');
sprite('plane', 0.5);

Loading, positioning and scaling of a sprite

In the following code snippet, the sprite plane is scalled to 0.5 before being placed in the middle of the screen

background('Summer');
sprite('plane', 400, 150, 0.5);

Loading a particular animation of a sprite

For multi-animation sprites, you can specify the default animation at load time by including it in the same string as the sprite name using a . symbol (e.g. plane.shoot)

💡 You can discover what animations are supported by each sprite, by hovering the mouse over sprites in the "Sprites" palette. Check the information provided in the tooltip.

background('Summer');
sprite('plane.shoot', 400, 150, 0.5);

Note: For sprites with multiple animations, you can also change the displayed animation later-on using the sprite .show() method.

Loading custom sprites

For games that required custom graphics, users can define additional custom sprites directly in the code. codeguppy.com uses the Microsoft MakeCode Arcade format for custom sprites with up to 16 colors.

From text to images

Use img in a string template, or as a function, to convert a custom-sprite text to an image:

/i/code.html?hints/gamedev_10

From images to sprites

Custom sprites can also be loaded using the sprite command. In this way you can manipulate them like the rest of built-in sprites:

/i/code.html?hints/gamedev_20

Animated custom sprites

A custom sprite can also be animated. If you need animated sprites, then you need to create multiple frame images for each sprite:

/i/code.html?hints/gamedev_30

Custom sprites with multiple animations

You can even pack multiple animations in a custom sprite. This help you change later on the animations using the sprite .show() method:

/i/code.html?hints/gamedev_40

Custom palette for custom sprites

If your program required different colors, you can define a custom palette using setPalette.

/i/code.html?hints/gamedev_41

Note: You can obtain the current palette at any time using the getPalette() function.

Manipulating sprite properties

At runtime, the custom sprites are indistinguishable from the built-in sprites. No matter how you loaded / created the sprite, you can manipulate it in the same way through the code.

The sprite command is returning a reference to an object on which you can invoke methods and properties.

Set sprite position

The sprite command is returning a reference to a sprite object. Use the .x and .y properties to update the sprite position on the screen.

let player = sprite('adventure_girl.idle', 400, 300, 0.5);

player.x = 100;
player.y = 100;

Moving sprites automatically

Instead of changing the .x and .y coordinates yourself, you can let the engine move the sprite automatically on x or y axes by specifying a value for the appropriate .velocity.

let plane = sprite('plane.fly', 0, 100, 0.5);
plane.velocity.x = 1;

Mirroring Sprites

Sometimes you need to flip a sprite on either .x axis or .y axis.

To mirror a sprite use the .mirror method with -1 as argument. To mirror it to the original direction use 1 as argument.

plane.mirrorX(-1);

Sprite rotation

In certain games and programs, you may want to rotate your sprites at an arbitrary angle. You can do this using the .rotation property which allow you to specify a rotation angle.

Rotate sprites automatically

If you want the sprite to rotate automatically for an indefinite time, you can put it on autorotate by giving a greater than zero value to .rotationSpeed property:

/i/code.html?hints/gamedev_50

Drawing depth

Normally, newly added sprites are drawn on top of the previous ones.

To control which sprite is drawn on top, and which one is drawn behind, you can make use of the .depth property. Sprites with lower depth are drawn behind the ones with higher depth.

You can also combine sprites with classical shaped drawn using graphical APIs (circle, rect, etc.).

If you want sprites to appear behind the graphical plane, make sure you give sprites a negative depth, otherwise they will be drawn on top of the graphical plane.

Changing animations

If the sprite you selected contains multiple animations, you can specify what animation you want to display initially by adding the animation name with a . in the string of the first parameter:

let player = sprite('adventure_girl.idle', 400, 300, 0.5);

However, later one, you can change the animation of that sprite using the .show method:

player.show('run');

💡 Please check carefully the animations supported by a sprite by hovering over the sprite thumbnail in the Sprites palette.

Mouse events on sprites

You can detect mouse clicks on sprites by assigning an event handler (e.g. function) to the following sprite properties:

• .onMousePressed
• .onMouseReleased
• .onMouseOver
• .onMouseOut

/i/code.html?hints/gamedev_51

Hiding sprites

You can hide a sprite in two ways:

• Setting the .visible property to false
• Setting the .x and / or .y coordinates outside of the visible canvas

let p = sprite('adventure_girl.idle', 400, 300, 0.5);

function mouseClicked()
{
    p.visible = !p.visible;
}

Removing sprites

To permanently remove a sprite from the program, use the .remove() method on the sprite. This is useful for sprites just as destroyed enemies, collected items, etc.

You can also make a sprite auto-remove after a certain number of frames using the .life property. This is useful for objects such as bullets, rockets, etc. that you shoot and forget about them. Collectibles can make use of this property. By default this property has value -1 (disabled).

/i/code.html?hints/gamedev_55

Sprite Collisions

There are 4 different methods to verify if sprites are colliding:

• sprite.collide(target, callback);
• sprite.displace(target, callback);
• sprite.overlap(target, callback);
• sprite.bounce(target, callback);

When called, some of these methods are automatically displacing the sprites, others are impacting their trajectories. They all return a Boolean indicating if the collision happened.

Experiment with these methods to discover their behaviors!

Parameters:

• target – this is a reference to the other sprite or group of sprites (more about groups later)
• callback – this is optional, but useful in some cases. Callback is a function with the following signature, that gets called automatically in case of collision:

function onCollide(spr, target)
{
    score++;
}

Note: Another way to check collisions between sprites, or between sprites and other shapes is by using the following shape collision functions.

Sprite groups

In games with multiple sprites of the same kind, it is sometimes useful to group various sprites in a single group created with new Group()

Main methods of a group are:

• .add(sprite) - Add a sprite to the group
• .remove(sprite) – Removes a sprite from the group
• .clear() - Removes sprites from group. Does not remove sprites from program.
• .contains(sprite) - Check if the specified sprite is in the group

/i/code.html?hints/gamedev_60

Note: Certain methods, such as sprite collision methods can operate on an entire group of sprites, rather than on a single sprite (as explained on the previous page).

Background Music

Play music named Rainbow

music('Rainbow');

Note: If any music was playing before, the music instruction interrupts that before playing the new music.

Play music named "Fun Background" at volume 0.1

music('Fun Background', 0.1);

💡 Use the "Music and Sounds" palette to discover music. When you find something that you like, drag and drop the song in the code area. The system will write the appropriate code for you.

Sound Effects

Play sound zap1

sound('zap1');

Note: The system plays in parallel all sounds triggered with the sound command.

💡 Use the "Music and Sounds" palette to discover sound effects. When you find something that you like, drag and drop the song in the code area. The system will write the appropriate code for you.

Collisions between shapes

💡 If your game is using only sprites, then we recommend you to use sprite collision methods.

However, if you are not using sprites, or if you use sprites in combination with regular shapes, you can use the following methods to detect collisions. They take as arguments the parameters of the two shapes and return true if the two shapes collide.

Note: For convenience, some instructions are define twice, with the arguments describing the shaped inversed.

Detect collision between point and circle

Use any of these instructions to detect the collision between a point and a circle:

collisionPointCircle(pointX, pointY, circleX, circleY, circleR)
collisionCirclePoint(circleX, circleY, circleR, pointX, pointY)

/i/code.html?hints/gamedev_61

Detect collision between point and line

Use any of these two instructions to detect the collision between a point and a line:

collisionPointLine(pointX, pointY, lineX1, lineY1, lineX2, lineY2)
collisionLinePoint(lineX1, lineY1, lineX2, lineY2, pointX, pointY)

/i/code.html?hints/gamedev_62

Detect collision between a point and a rectangle

Use any of the following two instructions to detect collisions between a point and a rectangle:

collisionPointRect(pointX, pointY, rectX, rectY, rectWidth, rectHeight)
collisionRectPoint(rectX, rectY, rectWidth, rectHeight, pointX, pointY)

/i/code.html?hints/gamedev_63

Detect collision between two circles

Use the following instruction to detect collisions between two circles:

collisionCircleCircle(circle1X, circle1Y, circle1R, circle2X, circle2Y, circle2R)

/i/code.html?hints/gamedev_64

Detect collision between a circle and a rectangle

Use any of the following two instructions to detect collisions between a circle and a rectangle:

collisionCircleRect(circleX, circleY, circleR, rectX, rectY, rectWidth, rectHeight)
collisionRectCircle(rectX, rectY, rectWidth, rectHeight, circleX, circleY, circleR)

/i/code.html?hints/gamedev_65

Detect collision between two rectangles

Use the following instruction to detect collision between two rectangles:

collisionRectRect(rect1X, rect1Y, rect1Width, rect1Height, rect2X, rect2Y, rect2Width, rect2Height)

/i/code.html?hints/gamedev_66

Detect collision between two lines

Use this instruction to detect collisions between two lines:

collisionLineLine(x1, y1, x2, y2, x3, y3, x4, y4)

/i/code.html?hints/gamedev_67

Detect collision between a line and a rectangle

Use any of the following two instructions to detect collisions between a line and a rectangle:

collisionLineRect(x1, y1, x2, y2, x3, y3, w, h)
collisionRectLine(x3, y3, w, h, x1, y1, x2, y2)

/i/code.html?hints/gamedev_68

The Game Loop

In virtually all games, you have to define a "game loop" - a special function that continously gets the user input, updates the game state and renders the game graphics.

In codeguppy.com you can easily implement the "game loop" using the loop() function. This is the same function described on the "Drawings" page in the "Animations" section. All you have to do is to define this function in your code, and the codeguppy.com engine will run it for you up to 60 times per second! There is no need to call it yourself.

If your game is using only sprites

To make your character move on the screen, read the keyboard and update character state (e.g. position) inside the loop()

/i/code.html?hints/gamedev_70

If your games is using sprites and shapes

If your game uses also classical shapes, then you need to re-render those inside the loop function. Sprites are rendered automatically when you change their properties.

/i/code.html?hints/gamedev_80

Think of your games as a series of frames! Start by drawing the first frame, then erase it and draw the second frame in a slightly different position, and so on!

Preloading Assets

codeguppy.com engine automatically scans your code prior to execution to identify what assets (e.g. background, sprites, music, sound effects) need to be loaded. The engine identify these by looking into the corrsponding background, sprite, music and sound commands you used.

If these commands don't specify the asset as a constant, then you need to preload the required assets using the preload function. Just list all required assets comma separated:

preload("adventure_girl", "knight", 'Fun Background');

myMusic = "Fun" + " " + "Background";
music(myMusic);

createPlayer("adventure_girl");
createPlayer("knight");

function createPlayer(spriteName)
{
    return sprite(spriteName, random(width), 300, 0.5);
}

Multi-Scene Games

Support for building multi-scene games is one of the main highlight of codeguppy.com environment!

By adding more scenes to a game, you're game will appear more polished. In the typical game, you may want to create an "Intro" scene to explain how to play the game, the actual "Game" scene and the "Congrats" scene that shows the congratulations / score after you finish the game.

Each scene is created in a new code page. Make sure you name the code pages appropriately since we need to refer to them later.

Showing a scene

When the program starts it will always run the first scene you define. To show other scene you need to use the showScene method:

function mouseClicked()
{
    showScene("Game");
}

The enter event

If your scene contains a function named enter, then the engine will automatically run this function when a scene is entered / shown. In a typical game a scene may be shown more than once during the game. For instance the "Game" scene will be shown each time the user restarts the game from the "Intro" scene.

This gives you the ability to set the scene state appropriately.

Note: The loose code outside functions is executed just once per scene. Successive displays of the scene won't trigger that code anymore.

background("Red");

let score;

function enter()
{
    score = 0;
}

Passing data to a scene

In certain cases, it is useful to pass data to a scene via the showScene method. For instance you can pass the game options from the "Intro" scene to the "Game" scene, or the player score from the "Game" scene to the "Congrats" scene.

Passing a number (e.g. score) to "Congrats" scene

showScene("Congrats", 1000);

Inside the "Congrats" scene, you can retrieve this passed data in the following way:

function enter()
{
    let score = sceneArgs;
    text(score, 400, 300);
}

Passing a complex structure to "Congrats" scene

let data = {
    score : 1000,
    time : 10,
    bonusPoints : 100
}

showScene("Congrats", data);

Inside the "Congrats" scene, you can retrieve this passed data in the following way:

function enter()
{
    let data = sceneArgs;

    text("Score: " + data.score, 400, 300);
    text("Time: " + data.time, 400, 320);
    text("Bonus Points: " + data.bonusPoints, 400, 340);
}

Further reading

For a deeper understanding on how to work with sprites in codeguppy.com, please consult these tutorials:

• Working with built-in sprites playground and tutorial
• Working with custom sprites playground and tutorial

Chapter 5: Other coding hints

codeguppy.com can also be used to practice algorithms or implement programs with basic data input UI. This article describes the support for this kind of programs.

Printing data

Use the print and println instructions to quickly print numbers, strings and other information on top of the canvas. These instructions operates on a separate scrollable text layer.

These instructions are perfect for debugging programs, for practicing language elements or algorithms:

Print the numbers from 0 to 9

for(let i = 0; i < 10; i++)
{
    println(i);
}

Print the first 10 prime numbers

/i/code.html?hints/other_10

Note: println is adding a new line character after each print, while print is not.

Building data input UIs

codeguppy.com offers simple instructions for creating data input user interfaces.

Creating input boxes

To create a single-line input box, use the createEdit instruction, specifying the control position and width.

text("Your name", 300, 90);
let nameBox = createEdit(300, 100, 200);

To create a multi-line input box, you also need to specify the height. If you omit the height parameter, then the system will automatically build a single-line input box.

text("Comments", 300, 190);
let commentsBox = createEdit(300, 200, 300, 100);

Note that the createEdit instruction is returning a reference to the edit box object. You can use the following properties to manipulate edit box content.

• .text
• .readonly
• .visible
• .width
• .height
• .onchange

Example:

noStroke();
fill(0);

text("Your name", 300, 90);
let nameBox = createEdit(300, 100, 200);

text("Comments", 300, 190);
let commentsBox = createEdit(300, 200, 300, 100);

nameBox.onchange = handleNameChange;

function handleNameChange()
{
    commentsBox.text = "Hello " + nameBox.text;
}

Creating buttons

Another UI element that you can create in the UI layer is a regular push button.

let btn = createButton(505, 100, 60, 20);
btn.text = "Enter";

The createButton instruction is returning a reference to the created button object. You can use this reference to access properties such as:

• .text
• .visible
• .disabled
• .width
• .height
• .onclick

Example:

https://codeguppy.com/code.html?hints/other_20

JavaScript is an essential tool for building interactive and dynamic applications, and understanding its core concepts is the first step toward mastering this powerful language. This guide introduced key JavaScript fundamentals, offering a quick, practical reference for variables, loops, functions, and more. By practicing on codeguppy.com, learners can take their newfound knowledge and apply it directly to coding exercises, deepening their understanding through hands-on experience. As you continue exploring JavaScript, remember that consistent practice and experimentation are key to becoming proficient and unlocking the full potential of creative coding.