In this post, I will be discussing the basics of the Pi.js JavaScript library. I will be using the Pijs.org editor to code. You can find it here: Pijs.org Editor.
Once you open the Pijs.org Editor, the first thing you should do is to create a new JavaScript file. You can do this by going to File -> Create new File. Select JavaScript for the File Type. Note that the pijs.org editor will create the HTML file for you when you run or download the project, and it will automatically include all of your scripts as sources.
In this example I will be naming the file "main.js" and it will be placed in the root folder. You do not need to enter an extension when creating the file name because the .js will be added by default.
Once the file has been added, you will see it in the upper left-hand side of the page. Note the green "x" next to the name, indicating that the file is an active file. This means that when you run the program, this file will automatically get included. If you uncheck it, it will no longer be green and it won't be included when you run the project, but it will still download when you click download project as part of the Project Settings.
Generally, the first thing you want to do when creating a pi.js project is to create a screen. Let's create a 300x200 screen and print our "Hello World" project.
$.screen("300x200");
$.print("Hello World");Press Ctrl+R to run it. You will see the output on the screen.
Let's update our project settings so that the default run browser will fit the same aspect ratio as our screen. We will update the project to 900x600.
Now, let's make a simple guessing game.
$.screen("300x200");
$.print("Welcome to the Guessing Game!\n", false, true);
$.input("Guess a number between 1 and 100: ", function (guess) {
$.print("You guessed " + guess);
} );In the print statement, we added a "\n" at the end, meaning we want an extra space. We also added two parameters. The second parameter is false, meaning it will not be inline, and the third parameter means we want the text to be centered on the screen. We then prompt the user to guess a number between 1 and 100. In this statement, we pass in a function that gets called after the user enters their number, and we print that number.
Press Ctrl+R to run it. You can see the "Welcome" text is centered now, and there are two new lines before the prompt. Enter a number, and it returns your guess.
Now let's add an answer and see if the user can guess it.
$.screen("300x200");
$.print("Welcome to the Guessing Game!\n", false, true);
let answer = Math.round(Math.random() * 99) + 1;
$.input("Guess a number between 1 and 100: ", function (guess) {
$.print("You guessed " + guess);
if(answer === guess) {
$.print("You guessed correctly!");
} else {
$.print("Wrong, guess again.");
}
} );Here we have added the answer which is a random number between 1 and 100. Then we let the user guess the answer, but they only get one guess. To implement another guess, we could do a bunch of nested input methods with callbacks, but that would be ridiculous.
One thing I don't like about this code is that with the callback function in the input, it is kind of messing with the flow of our program. Let's try another approach to make this easier to deal with.
$.screen("300x200");
$.print("Welcome to the Guessing Game!\n", false, true);
guessingGame();
async function guessingGame() {
let answer = Math.round(Math.random() * 99) + 1;
let guess = -1;
while(guess !== answer) {
guess = await $.input("Guess a number between 1 and 100: ");
if(answer !== guess) {
let hint = "too high";
if(guess < answer) {
hint = "too low";
}
$.print("Wrong, " + hint + "!");
}
}
$.print("You guessed correctly!");
}This is much better. Here we have everything happening sequentially all laid out in one function. You have to add the keyword “async” in order to make this work because this is a requirement in JavaScript in order to use the "await" keyword. What is going on is that the $.input function is returning an object called a promise, I won’t go into detail about promises here but the value in the assignment on the left hand-side, the guess variable, when used with the await keyword won’t contain the promise but it will have the ultimately be the value that we want, the guess. Just remember, that await and async must go together or this won’t work.
Now we also have a loop here so the user can make as many guesses as they need until they get the right answer. We're also giving them a hint if they are too high or too low.
There is one problem with this code. And that is the guess is a string and not a number so let's fix that.
guess = await $.input("Guess a number between 1 and 100: ", null, true, true, false);Here I’m telling the input first, that I don’t have a callback so that value is null, then I pass true to set it to a number, and true to set it as an integer, and finally I set false so that there are no negative numbers. This means that I can’t enter any decimal values or string values, and the value will be converted to a number after the await.
In the final step let's add some sound.
$.screen("300x200");
$.print("Welcome to the guessing game!\n", false, true);
guessingGame();
async function guessingGame() {
let answer = Math.round(Math.random() * 99) + 1;
let guess = -1;
while(guess !== answer) {
guess = await $.input("Guess a number between 1 and 100: ", null, true, true, false);
if(answer !== guess) {
let hint = "too high";
if(guess < answer) {
hint = "too low";
$.play("SQUARE V20 T140 O2 L8 CDGAB");
} else {
$.play("SQUARE V20 T140 O4 L8 CDGAB");
}
$.print("Wrong, " + hint + "!");
}
}
$.print("You guessed correctly!");
$.play("SQUARE V20 T120 O4 L16 CEG>C< T240 O5 L16 CEG>C< T480 O6 L16 CEG>C<");
}Now we have successfully added sound effects to the guessing game using Pi.js.
The play method in Pi.js is a powerful tool for generating sound effects and music in your JavaScript projects. By using note values, you can create unique melodies and soundscapes to enhance the user experience of your application.
