DEV Community: Adrian

Quick intro to JavaScript and codeguppy.com

Adrian — Thu, 14 Nov 2024 04:06:08 +0000

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.

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);
}

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.

JavaScript is like Python

Adrian — Thu, 14 Nov 2024 04:02:12 +0000

This article presents a comparison between the syntax and fundamental programming constructs of JavaScript and Python. It aims to highlight similarities in how basic programming concepts are implemented across these two popular programming languages.

While both languages share many commonalities, making it easier for developers to switch between them or understand the other's code, there are also distinct syntactical and operational differences that one should be aware of.

It's important to approach this comparison with a light-hearted perspective and not to overemphasize the likeness or differences between JavaScript and Python. The intention is not to declare one language superior to the other but to provide a resource that can help coders who are familiar with Python to understand and transition to JavaScript more easily.

Hello World

JavaScript

// In codeguppy.com environment
println('Hello, World');

// Outside codeguppy.com
console.log('Hello, World');

Python

print('Hello, World')

Variables and Constants

JavaScript

let myVariable = 100;

const MYCONSTANT = 3.14159;

Python

myVariable = 100

MYCONSTANT = 3.14159

String Interpolation

JavaScript

let a = 100;
let b = 200;

println(`Sum of ${a} and ${b} is ${a + b}`);

Python

a = 100
b = 200

print(f'Sum of {a} and {b} is {a + b}')

If Expression / Statement

JavaScript

let age = 18;

if (age < 13) 
{
    println("Child");
} 
else if (age < 20) 
{
    println("Teenager");
} 
else 
{
    println("Adult");
}

Python

age = 18

if age < 13:
    print("Child")
elif age < 20:
    print("Teenager")
else:
    print("Adult")

Conditionals

JavaScript

let age = 20;
let message = age >= 18 ? "Can vote" : "Cannot vote";
println(message);  // Output: Can vote

Python

age = 20
message = "Can vote" if age >= 18 else "Cannot vote"
print(message)  # Output: Can vote

Arrays

JavaScript

// Creating an array
let myArray = [1, 2, 3, 4, 5];

// Accessing elements
println(myArray[0]);  // Access the first element: 1
println(myArray[3]);  // Access the fourth element: 4

// Modifying an element
myArray[2] = 30;  // Change the third element from 3 to 30

// Adding a new element
myArray.push(6);  // Add a new element to the end

Python

# Creating a list to represent an array
my_array = [1, 2, 3, 4, 5]

# Accessing elements
print(my_array[0])  # Access the first element: 1
print(my_array[3])  # Access the fourth element: 4

# Modifying an element
my_array[2] = 30  # Change the third element from 3 to 30

# Adding a new element
my_array.append(6)  # Add a new element to the end

ForEach

JavaScript

let fruits = ["apple", "banana", "cherry", "date"];

for(let fruit of fruits)
    println(fruit);

Python

fruits = ["apple", "banana", "cherry", "date"]

for fruit in fruits:
    print(fruit)

Dictionaries

JavaScript

// Creating a dictionary
fruit_prices = {
    apple: 0.65,
    banana: 0.35,
    cherry: 0.85
};

// Accessing a value by key
println(fruit_prices["apple"]);  // Output: 0.65

Python

# Creating a dictionary
fruit_prices = {
    "apple": 0.65,
    "banana": 0.35,
    "cherry": 0.85
}

# Accessing a value by key
print(fruit_prices["apple"])  # Output: 0.65

Functions

JavaScript

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

let result = addNumbers(100, 200);
println("The sum is: ", result);

Python

def add_numbers(a, b):
    return a + b

result = add_numbers(100, 200)
print("The sum is: ", result)

Tuple Return

JavaScript

function getCircleProperties(radius) 
{
    const area = Math.PI * radius ** 2;
    const circumference = 2 * Math.PI * radius;

    return [area, circumference];  // Return as an array
}

// Using the function
const [area, circumference] = getCircleProperties(5);

println(`The area of the circle is: ${area}`);
println(`The circumference of the circle is: ${circumference}`);

Python

import math

def getCircleProperties(radius):
    """Calculate and return the area and circumference of a circle."""
    area = math.pi * radius**2
    circumference = 2 * math.pi * radius
    return (area, circumference)

# Using the function
radius = 5
area, circumference = getCircleProperties(radius)

print(f"The area of the circle is: {area}")
print(f"The circumference of the circle is: {circumference}")

Variable number of arguments

JavaScript

function sumNumbers(...args) 
{
    let sum = 0;
    for(let i of args)
        sum += i;
    return sum;
}

println(sumNumbers(1, 2, 3));
println(sumNumbers(100, 200));

Python

def sum_numbers(*args):
    sum = 0
    for i in args:
        sum += i
    return sum

print(sum_numbers(1, 2, 3))
print(sum_numbers(100, 200))

Lambdas

JavaScript

const numbers = [1, 2, 3, 4, 5];

// Use map to apply a function to all elements of the array
const squaredNumbers = numbers.map(x => x ** 2);

println(squaredNumbers);  // Output: [1, 4, 9, 16, 25]

Python

numbers = [1, 2, 3, 4, 5]

# Use map to apply a function to all elements of the list
squared_numbers = map(lambda x: x**2, numbers)

# Convert map object to a list to print the results
squared_numbers_list = list(squared_numbers)

print(squared_numbers_list)  # Output: [1, 4, 9, 16, 25]

Classes

JavaScript

class Book 
{
    constructor(title, author, pages) 
    {
        this.title = title;
        this.author = author;
        this.pages = pages;
    }

    describeBook() 
    {
        println(`Book Title: ${this.title}`);
        println(`Author: ${this.author}`);
        println(`Number of Pages: ${this.pages}`);
    }
}

Python

class Book:
    def __init__(self, title, author, pages):
        self.title = title
        self.author = author
        self.pages = pages

    def describe_book(self):
        print(f"Book Title: {self.title}")
        print(f"Author: {self.author}")
        print(f"Number of Pages: {self.pages}")

Usage of classes

JavaScript

// Creating an instance of the Book class
// This is actually a real book (see Curriculum section for more info)
const myBook = new Book("Illustrated JavaScript", "Adrian", 684);
myBook.describeBook();

Python

# Creating an instance of the Book class
# This is actually a real book (see Curriculum section for more info)
my_book = Book("Illustrated JavaScript", "Adrian", 684)
my_book.describe_book()

Conclusion

We encourage you to get involved in refining this comparison. Your contributions, whether they are corrections, enhancements, or new additions, are highly valued. By collaborating, we can create a more accurate and comprehensive guide that benefits all developers interested in learning about JavaScript and Python.

Credits

This article was republished from the blog of the free coding platform https://codeguppy.com platform.

The article was influenced by similar comparisons between other programming languages:

Kotlin is like C# https://ttu.github.io/kotlin-is-like-csharp/
Kotlin is like TypeScript https://gi-no.github.io/kotlin-is-like-typescript/
Swift is like Kotlin https://nilhcem.com/swift-is-like-kotlin/
Swift is like Go http://repo.tiye.me/jiyinyiyong/swift-is-like-go/
Swift is like Scala https://leverich.github.io/swiftislikescala/

Book: JavaScript for the Whole Family

Adrian — Thu, 14 Nov 2024 03:57:28 +0000

After much consideration, I'm excited to announce a paperback edition of my course, now available for all interested coders and parents!
This book is designed especially for parents who want to introduce their kids to coding in a fun, engaging way.

The paperback is available in a print-on-demand format through Lulu Publishing.

Preview the book: https://www.youtube.com/shorts/uJmS-s4DKAM

Order your copy: https://bit.ly/3Yvpt7A

If you're an e-book reader, you can get the PDF version instead:

e-book edition:
https://codeguppy.gumroad.com/l/js/launch

Happy Coding!

Tech Papers

Adrian — Thu, 14 Nov 2024 03:50:16 +0000

This is a small collection of tech papers by Marian Veteanu

You can download them in PDF format from:
https://github.com/mveteanu/techpapers/

Subjects are: Azure, Cloud Computing, Physical Product Design, AI, etc.

Tech Papers

Adrian — Thu, 14 Nov 2024 03:48:34 +0000

This is a small collection of tech papers by Marian Veteanu

You can download them in PDF format from:
https://github.com/mveteanu/techpapers/

Subjects are: Azure, Cloud Computing, Physical Product Design, AI, etc.

Illustrated JavaScript Coding Course

Adrian — Wed, 14 Feb 2024 23:46:54 +0000

Dear code newbies,

I've put together a comprehensive JavaScript coding course presented in the format of an engaging slideshow-style ebook. This ebook is packed with valuable content, spanning over 700 slides to aid in your learning journey.

The course is not for everyone, but you may be interested in it if you're passionate about creative coding and game development.

Download the first 200 slides

https://codeguppy.com/site/download/coding_course.pdf

Purchase the full e-book

https://codeguppy.gumroad.com/l/js/Launch

If you found the sample PDF helpful and informative, don't miss out on the chance to delve deeper into the course content.

For a limited time, seize the opportunity to acquire the full ebook at a discounted rate of $17.50 – that's 50% off the regular price.

Recursion in JavaScript - Practical exercises

Adrian — Sat, 03 Feb 2024 21:05:59 +0000

Recursion is one of the most useful but very little understood programming techniques. Special kinds of problems can be solved easily and effectively with a recursive function (e.g., locating a file in a hierarchical file system).

This article doesn't intend to explain how recursion works ... but instead, it presents you eight classical problems implemented using a recursive and an iterative solution.

As you can probably see, for some problems, recursion comes more naturally, but for others, it should not be the first choice.

How to run the code?

Examples from this article have been developed using the codeguppy.com editor.

To run the code in this article, paste in the codeguppy.com editor the appropriate code snippet.

If you prefer to run the examples outside codeguppy.com, replace println() with console.log(), and you can run it in any environment you prefer.

Without further ado, let's see the problems and their solutions.

1. Calculate the sum of natural number up to n

Recursive solution

let sum = addTo(10);
println(sum);

function addTo(n)
{
    if (n == 0)
        return 0;

    return n + addTo(n - 1);
}

Iterative solution

let sum = addTo(10);
println(sum);

function addTo(n)
{
    let sum = 0;

    for(let i = 1; i <= n; i++)
    {
        sum += i;
    }

    return sum;
}

2. Calculate factorial of n. Reminder n! = 1 * 2 * ... * n

Recursive solution

let prod = factorial(10);
println(prod);

function factorial(n)
{
    if (n <= 1)
        return 1;

    return n * factorial(n - 1);
}

Iterative solution

let prod = factorial(10);
println(prod);

function factorial(n)
{
    let prod = 1;

    for(let i = 1; i <= n; i++)
    {
        prod *= i;
    }

    return prod;
}

3. Calculate the value of n to the m power

Recursive solution

println(powerNo(3, 2));

function powerNo(n, m)
{
    if (m == 0)
        return 1;

    if (m == 1)
        return n;

    return n * powerNo(n, m - 1);
}

Iterative solution

println(powerNo(3, 2));

function powerNo(n, m)
{
    let prod = 1;

    for(let i = 1; i <= m; i++)
    {
        prod *= n;
    }

    return prod;
}

4. Find the nth Fibonacci number

Recursive solution

function findFibonacci(n)
{
    if (n == 0)
        return 0;

    if (n == 1)
        return 1;

    return findFibonacci(n - 1) + findFibonacci(n - 2);
}

let n = findFibonacci(10);
println(n);

Iterative solution

function findFibonacci(n)
{
    let fib0 = 0;
    let fib1 = 1;

    if (n == 0)
        return fib0;

    if (n == 1)
        return fib1;

    let fib;

    for(let i = 2; i <= n; i++)
    {
        fib = fib0 + fib1;

        fib0 = fib1;
        fib1 = fib;
    }

    return fib;
}

println(findFibonacci(10));

5. Calculate the sum of elements of an array of numbers

Recursive solution

let ar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let n = sum(ar);
println(n);


function sum(ar)
{
    return _sum(ar, ar.length - 1);
}

function _sum(ar, index)
{
    if (index == 0)
        return ar[0];

    return ar[index] + _sum(ar, index - 1);
}

Iterative solution

let ar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let n = sum(ar);
println(n);

function sum(ar)
{
    let sum = 0;

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

    return sum;
}

6. Sort an array of numbers using bubble sort algorithm

Recursive solution

let ar = [23, 1000, 1, -1, 8, 3];
println(ar);
bubbleSort(ar);
println(ar);

function bubbleSort(ar)
{
    let shouldSort = false;

    for(let i = 0; i < ar.length - 1; i++)
    {
        let a = ar[i];
        if ( a > ar[i+1] )
        {
            ar[i] = ar[i+1];
            ar[i+1] = a;
            shouldSort = true;
        }
    }

    if (shouldSort)
    {
        bubbleSort(ar);
    }
}

Iterative solution

let ar = [23, 1000, 1, -1, 8, 3];
println(ar);
bubbleSort(ar);
println(ar);

function bubbleSort(ar)
{
    let shouldSort = true;

    while(shouldSort)
    {
        shouldSort = false;

        for(let i = 0; i < ar.length - 1; i++)
        {
            let a = ar[i];
            if ( a > ar[i+1] )
            {
                ar[i] = ar[i+1];
                ar[i+1] = a;
                shouldSort = true;
            }
        }
    }
}

7. Find a number in a sorted array (binary search)

Recursive solution

//        0   1   2   3   4   5   6   7   8   9
let ar = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

let position = findNumber(90, ar);
println(position);

// Find number n in sorted array ar
// Returns array index if found or -1 if not found
function findNumber(n, ar)
{
    return _findNumber(n, ar, 0, ar.length - 1);
}

// Find number n in sorted array ar in between indexes i1 and i2
// using recursive approach
function _findNumber(n, ar, i1, i2)
{
    if (i2 < i1)
        return -1;

    println("Checking interval: [" + i1 + ", " + i2 + "]");

    let mid = i1 + Math.floor((i2 - i1) / 2);

    if (n === ar[mid])
        return mid;

    if (n < ar[mid])
        return _findNumber(n, ar, i1, mid - 1);

    return _findNumber(n, ar, mid + 1, i2);
}

Iterative solution

//        0   1   2   3   4   5   6   7   8   9
let ar = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

let position = findNumber(90, ar);
println(position);

// Find number n in sorted array ar using iterative approach
// Returns array index if found or -1 if not found
function findNumber(n, ar)
{
    let i1 = 0;
    let i2 = ar.length - 1;

    while(i1 <= i2)
    {
        println("Checking interval: [" + i1 + ", " + i2 + "]");

        let mid = i1 + Math.floor((i2 - i1) / 2);

        if (n === ar[mid])
            return mid;

        if (n < ar[mid])
        {
            i2 = mid - 1;
        }
        else
        {
            i1 = mid + 1;
        }
    }

    return -1;
}

8. Find the maximum number in an array containing numbers or other arrays of numbers

Recursive solution

let ar = [2, 4, 10, [12, 4, [100, 99], 4], [3, 2, 99], 0];

let max = findMax(ar);
println("Max  = ", max);

// Use recursion to find the maximum numeric value in an array of arrays
function findMax(ar)
{
    let max = -Infinity;

    // Cycle through all the elements of the array
    for(let i = 0; i < ar.length; i++)
    {
        let el = ar[i];

        // If an element is of type array then invoke the same function
        // to find out the maximum element of that subarray
        if ( Array.isArray(el) )
        {
            el = findMax( el );
        }

        if ( el > max )
        {
            max = el;
        }
    }

    return max;
}

Iterative solution

// Find the maximum number in a jagged array of numbers or array of numbers
// Do not use recursion

let ar = [2, 4, 10, [12, 4, [100, 99], 4], [3, 2, 99], 0];

let max = findMax(ar);
println("Max  = ", max);

// Use a stack to find the maximum numeric value in an array of arrays
function findMax(arElements)
{
    let max = -Infinity;

    // This is the stack on which will put the first array and then 
    // all the other sub-arrays that we find as we traverse an array     
    let arrays = [];

    arrays.push(arElements);

    // Loop as long as are arrays added to the stack for processing
    while(arrays.length > 0)
    {
        // Extract an array from the stack
        ar = arrays.pop();

        // ... and loop through its elements
        for(let i = 0; i < ar.length; i++)
        {
            let el = ar[i];

            // If an element is of type array, we'll add it to stack
            // to be processed later
            if ( Array.isArray(el) )
            {
                arrays.push(el);
                continue;
            }

            if ( el > max )
            {
                max = el;
            }
        }
    }

    return max;
}

Article reprinted from: https://codeguppy.com/blog/recursion-in-javascript-practical-examples/index.html

Building Raspberry Pi Paper Cyberdeck

Adrian — Thu, 12 Oct 2023 02:56:47 +0000

Introduction

Are you looking for a fun and educational project to engage your coding club members? Building a "Raspberry Pi Paper" computer is an exciting endeavor that combines coding, electronics, and crafting.

In this article, we'll guide you through the process of creating a simple yet functional Raspberry Pi-powered paper computer that can be a fantastic hands-on learning experience for middle and high school students.

Materials Needed

Before you start, gather the following materials:

Raspberry Pi 400
MicroSD card (8GB or larger)
LCD screen
HDMI cable
USB PowerBank (to make it portable)
Power supply USB cable
A piece of flexible cardboard
Assorted craft supplies (markers, colored paper, glue, scissors, etc.)

Let's do first a quick test with the case. Connect the LCD panel to the Raspberry Pi 400 computer using the HDMI cable and then power on the entire assembly.

If everthing works, you can start designing a case around these components using thing cardboard.

Designing the Paper Computer

Measure and cut the cardboard into a size that fits the Raspberry Pi and screen comfortably.
Design the layout of your paper computer. You can use markers, colored paper, and other craft supplies to make it visually appealing.
Cut holes in the board to accommodate the Raspberry Pi 400 keyboard and screen.
Attach the Raspberry Pi 400 and screen securely to the board using glue or double-sided tape.
Connect the screen to the Raspberry Pi 400 using the HDMI cable
Connect the USB power bank using the USB cable
Decorate your paper computer with creative elements like labels and graphics.
Ensure that all the components are neatly arranged and the cables are organized.

This is the back of the computer. You can use shorter cables for a more aesthetic look.

Use a code editor

Open codeguppy.com in a browser on the new Raspberry Pi paper computer
Code a small program
Currently the UI of codeguppy.com is not optimized for small and ultrawide screens but also this computer is not for real coding.

Conclusion

Building a "Raspberry Pi Paper" computer in your coding club is a fantastic way to introduce students to coding, electronics, and creative design. So, grab your Raspberry Pi 400 and the other supplies, and start building your own paper computer today!

Article reposted from: https://codeguppy.com/blog/building-a-raspberry-pi-paper-computer-in-your-coding-club/index.html

10 Coding Projects for Middle and High School Students

Adrian — Thu, 12 Oct 2023 02:52:21 +0000

Are you a middle or high school teacher looking for exciting and educational coding projects to engage your students? Or perhaps you're a student eager to explore the fascinating world of programming? Look no further! We've compiled a list of captivating project ideas that are perfect for students at these grade levels. And the best part? These projects are all available on CodeGuppy, a fantastic platform for learning and experimenting with coding.

1. Draw with Code

Encourage artistic expression through coding. Students can create unique drawings and artwork using code as their canvas. This project combines coding and artistry in a captivating way.

CodeGuppy Draw with Code Tutorial

2. Greeting Cards with Code

Coding virtual greeting cards is an excellent way to learn how to code. Codeguppy is offering tons of greeting card projects that you can use as starting point.

Greeting cards

3. Turtle Graphics

Turtle Graphics is a fantastic way to introduce students to the world of coding. They can create beautiful drawings and patterns by giving commands to a virtual turtle. This project enhances problem-solving skills and creativity.

CodeGuppy Turtle Graphics Tutorial

4. Breakout Game

Breakout is a classic arcade game where students can design their own version. They'll learn about game development concepts like collision detection and game loops while having fun playing their own creation.

CodeGuppy Breakout Tutorial

5. Invaders Game

Challenge students to recreate the iconic Space Invaders game. They'll gain valuable insights into game design, user input handling, and more. It's a great way to foster creativity and critical thinking.

CodeGuppy Invaders Tutorial

6. Analog Clock

Students can build a digital analog clock, perfect for learning about graphics and animations. This project introduces concepts like angles and trigonometry while creating a functional clock.

CodeGuppy Analog Clock Tutorial

7. Plot a Function

Introduce students to mathematics and coding simultaneously. They can create a program to plot various mathematical functions, helping them understand the relationship between code and real-world concepts.

CodeGuppy Plot a Function Tutorial

8. Prime Numbers and Fibonacci

Explore the world of mathematical algorithms with projects like finding prime numbers, generating Fibonacci sequences, or even working with cards. These projects offer a deeper understanding of numerical concepts and problem-solving.

CodeGuppy Prime Numbers Tutorial

CodeGuppy Fibonacci Tutorial

9. Artist and Color Blokly

Challenge students to become digital artists. They can create stunning digital artwork or experiment with color patterns using code. These projects encourage creativity and artistic exploration.

CodeGuppy Artist Tutorial

CodeGuppy Color Blokly Tutorial

10. Mars Attack

Take coding to a new level by developing a space-themed game like "Mars Attack." Students can design their own intergalactic adventure, gaining insight into game mechanics and programming logic.

CodeGuppy Mars Attack Tutorial

Get Started with CodeGuppy Today!

With the resources and tutorials available on CodeGuppy, students can begin coding these captivating projects right away.

Visit CodeGuppy today, explore the tutorials, and begin coding these captivating projects. With CodeGuppy, students can unlock their creativity and develop valuable coding skills.

Happy coding!

Article reposted from: https://codeguppy.com/blog/10-coding-projects-for-middle-and-high-school-students/index.html

Learn JavaScript (creative coding and game development)

Adrian — Fri, 14 Jul 2023 16:20:42 +0000

Dear coding enthusiasts,

I've build a 24 lesson coding course to teach JavaScript from 0 to hero (almost)!

I'm using a pragmatic method with tons of examples and creative coding projects and even mini-games.

The course is based on the free codeguppy.com coding platform that incorporates modified versions of popular libraries such as p5.js, p5play and p5.SceneManager.

Coding Lessons

Use this coding playlist if you want to learn JavaScript in a fun way!

https://www.youtube.com/playlist?list=PLZld0zbNGbZRfjut6JI7ZLx8ZbTDa5zn-

Coding Projects

While on the channel, please checkout also the list of coding projects:

https://www.youtube.com/playlist?list=PLZld0zbNGbZSLmJhOam5QRKn7xGHgK0c0

Happy Coding!

Youtube: Recreational coding channel

Adrian — Tue, 15 Nov 2022 04:57:49 +0000

Hi all,

I want to present you my recreational coding youtube channel.
It contains videos about JavaScript w/p5.js in an online coding environment.

Until now I uploaded an almost complete javascript course and some coding projects.

(link at the bottom)

For instance, these are the lessons in the coding course:

1/24: Introduction to coding
2/24: Drawing shapes on canvas using p5.js in codeguppy
3/24: Named colors | Draw with code project
4/24: RGB colors
5/24: Exploring built-in assets | Greeting card with code
6/24: Variables, Expressions and Operators
7/24: For loops
8/24: Nested for loops
9/24: Conditional statements and boolean variables
10/24: Functions and scope of variables | Pi day projects
11/24: Animations on the canvas | Fun projects
12/24: Keyboard and Mouse | Mini game projects
13/24: Arrays in JavaScript | Practical examples
14/24: Strings in JavaScript | Caesar cipher
15/24: Objects in JavaScript
16/24: Make games with sprites
17/24: Makes games with custom sprites
18/24: Music in abc notation
19/24: while loops | Bubble sort
20/24: Functions as data | Arrow functions
21/24: Functions inside objects
22/24: JavaScript Closures
23/24: JavaScript Classes. Basics
24/24: JavaScript Classes. OOP Inheritance

🎥 You can find all the lessons in this YouTube playlist:

https://www.youtube.com/playlist?list=PLZld0zbNGbZRfjut6JI7ZLx8ZbTDa5zn-

In addition, I also uploaded a few coding projects using same language and coding environment. These are fun projects.

🎥 You can find the projects in this other YouTube playlist:

https://www.youtube.com/playlist?list=PLZld0zbNGbZSLmJhOam5QRKn7xGHgK0c0

I hope you like it. Make sure to explore the channel to discover other videos that you may like.

Implement a CPU emulator (a virtual machine) in JavaScript

Adrian — Fri, 08 Jul 2022 02:51:18 +0000

I recently start a youtube channel with coding videos for beginners and recreational coding hobbyists.

This current video is from my channel.

You can find more on youtube at:
https://www.youtube.com/c/CodingAdventures/

DEV Community: Adrian

Quick intro to JavaScript and codeguppy.com

Table of Contents

Chapter 1: JavaScript Syntax

Chapter 2: Drawing on canvas using JavaScript

Chapter 3: User Input

Chapter 4: JavaScript Game Development with codeguppy.com

Chapter 5: Other coding hints

Chapter 1: JavaScript Syntax

Declaring variables

Declare variable x

Declare x and initialize it with a numerical value

Declare s and initialize it with a string

Assigning values to variables

Assign number 100 to variable x

Assign string "Hello" to variable s

Assign an empty array to variable ar

Assign an array of 3 numbers to variable ar

Assign and array of 2 strings to variable ar

Assign an inline object to variable o

Variable sum is equal to a + b

Assign an expression to variable avg

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

Variable i is increased (incremented) by 1

Variable i is incremented by 2

if statement

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

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

Executing different blocks based on different conditions

for loop

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

Prints numbers from 10 down to 0 using a for loop

Prints even numbers from 0 to 100

Print all elements of an array

while loop

Print numbers from 0 to 9 using a while loop

do while

Print numbers from 0 to 10 using a do while loop

switch Statement

Functions

Defining and calling the function balloon

Functions that return values

Array methods

Declaring and initializing ar to an empty array

Declaring and initializing ar to an array of 3 numbers

Length of an array

Append an element at the end of the array

Insert an element at the beginning of an array

Insert an element at an arbitrary position

Insert an element at an arbitrary position (easy mode)

Read the value of element 2 of an array

Calculate the sum of elements of an array

Assign a different value to al element of an array

Accesing the first element

Accessing the last element

Accessing the last element (easy way)

Remove the first element of the array

Remove the last element of the array

Remove an element at an arbitrary position

Remove all elements of an array

Concatenate two arrays

Extract a slice of an array

Joining elements of an array

String methods

Length of a string

Iterating all characters of a string

Accessing string characters by position

Converting text to uppercase

Converting text to lowercase

Determine if the string contains another substring

Determine if the string starts with a specified prefix

Determine if the string ends with a specified sufix

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

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

Extract a substring from the string

Remove whitespaces from beginning and end of the string

Remove whitespaces from beginning of the string

Remove whitespaces from the end of the string

Pads the start of the string with another string

Pads the end of the string with another string

Print numbers from 0 to 9 using a `while` loop

Print numbers from 0 to 10 using a `do while` loop

Defining and calling the function `balloon`

Declaring and initializing `ar` to an empty array

Declaring and initializing `ar` to an array of 3 numbers

Read the value of element `2` of an array

Module `MathUtils` content

Sets to `Red` the pen color of the default turtle

Colors using the `color()` function

Changing to `HSB` mode

Changing back to `RGB` mode