Making Your First Game in Blue

Hello everyone! Today, I'm writing a post about how to get started with Blue. Blue is a creative, graphical, and browser-based programming language which makes it easy and enjoyable to get started with programming. First off, you can check it out at https://blue-js.herokuapp.com. Blue is also open source, and its GitHub is https://github.com/i8sumPi/blue.

In this tutorial, we'll be making a carrot catching game, with only 25 lines of code (try it here)

The Code!

Let's start by drawing our main character. We can do this using:

var player = new Premade(costume, x, y, size)

We replace the word "costume" with the character that we want, and x and y with the coordinates of where we want to place our new character.

Blue uses the same coordinate system as Scratch. The x axis goes from -240 to 240, and the y axis goes from -180 to 180.

In our case, we can use:

var player = new Premade("bunny1_ready", 0, -112, 0.4)

This places the bunny in the bottom-middle, and makes its size 0.4 of the original. Note that the name of the costume must be in quotations.

If you would like to use a different character than the bunny, go into the documentation > premade characters and sounds > all images.

The Background

Now let's draw a simple background. We can draw it using rectangles. Rectangles are created using:

new Rectangle(x, y, width, height, color)

The x and y values of a rectangle represent the coordinates of the top-left corner. The color can be a string with the color name, like "red" or "blue", but if you want more detail, you can also use hexidecimal colors. You can find a hexidecimal color using htmlcolorcodes.com.

In our case, we want a blue sky and a green ground, which can be done using:

new Rectangle(-240,180, 480, 360, "#D0F8FF") # sky
new Rectangle(-240, -150, 480, 30, "green") # ground

Note that the grey text after a # does not run. It is a comment, and its purpose is just to remind us of what we're doing.

Note: if you don't see the bunny anymore after drawing the background, you drew the background over it. You can put the bunny on top by either putting the bunny's code after the background, or by adding the line player.layer = 1. A layer of 1 or more brings a character to the top, and a negative layer brings it underneath.

Motion

We need to make the bunny follow the mouse. We can do this with the following code:

forever:
    player.x = mouse.x

The code inside the forever loop runs constantly. The second line is setting the player's x position to the mouse's x position. This means that at every moment, the player is moving to where the mouse is, or in other words, the mouse is moving the player.

How does Blue know what is inside or outside the forever loop? It's pretty simple—code that is inside the forever loop is indented. This indented chunk of code is known as a code block. Code that isn't inside the forever loop isn't indented.

An example of this (that doesn't relate to the current project, so don't add this to your code):

forever:
    print("I am inside the forever loop")
    print("I am also inside the forever loop")
print("I am not inside the forever loop")

Note that you can also have a code block within a code block, or a code block within a code block within a code block. To do this, you simply use multiple indentations.

Clones

Now we need to generate many many many carrots :D

In order to keep track of the carrots, we will use a list. A list is a special kind of variable that can hold multiple values. We initialize (start) a new, empty list using:

var carrots = []

We can add lots of carrots using:

var carrots = []
repeatEvery 0.3:
    carrots.push(new Premade("crop_carrot", random(-230, 230), 180))

Let's break down this code. new Premade("crop_carrot", random(-230, 230), 180) is creating a new carrot with a random x value, and a y value of 180, which puts it at the top of the screen. random(-230, 230) returns a random value from -230 to 230.

carrots.push() adds this newly generated carrot to our list called carrots.

repeatEvery 0.3 repeats the code below it every 0.3 seconds. You can change the difficulty of the game by changing this number, for example, if you used repeatEvery 0.5 instead, the carrots would appear more slowly, and the game would be easier. When you run this code, you should see lots of carrots appearing at the top of the screen.

Moving the carrots

We can move each carrot down by using a forEach loop. The forEach loop will iterate through (or go through each one of) the carrots so that we can move each carrot down. We add it to the end of our already existing forever loop in order to do this constantly. Note that the first two lines of this code are from the forever loop that we already have.

forever:
    player.x = mouse.x
    forEach carrot in carrots:
    carrot.y -= 10

carrot.y -= 10 is shorthand for carrot.y = carrot.y - 10. It just moves the carrot's y position down by 10.

Score

We can display the score using a text. You create a new text using:

new Text(text, x, y, font size)

We need one variable to be the text that displays the score, and another to store the score itself.

var scoreCounter = new Text("Score: 0", 0, 0, 20)
var score = 0

In order to update the score whenever the bunny touches a carrot, we can use distanceTo. We add this to the end of our forEach loop:

    if carrot.distanceTo(player) < 50:
    carrot.delete()
    score += 1
    scoreCounter.text = "Score: "+score
    new Sound("jingles_PIZZI16", 0.2)

carrot.delete() deletes the carrot so it disappears.

score += 1 adds 1 to the score.

scoreCounter.text = "Score: "+score updates the score display.

new Sound("jingles_PIZZI16", 0.2) plays the bu-dup sound. The 0.2 means it is 0.2 of the original volume. You can choose another sound in Blue Documentation > Premade Characters and Sounds > All sounds.

Losing

The last thing to add is making the game stop when you miss a carrot. We can do this by checking if any carrot's y is less than -240, which is the bottom of the screen, and if so, stop the game. So, we can add this to the bottom of our forEach loop:

    if carrot.y < -240:
    scoreCounter.text = "You missed a carrot! Your score was "+score+"."
    pause()
    new Sound("jingles_PIZZI01")

The pause() freezes the game at that moment. The new Sound("jingles_PIZZI01") plays the losing sound.

Music

As a final touch, we need to add some music to complete the vibe. The 1 means to keep 100% of the volume, and the true indicates that you want the music to loop as the game continues.

new Sound("bensound-jazzyfrenchy", 1, true)

You're Finished!

Congrats on finishing your first game in Blue! Feel free to share it with your friends, and start another project of your own. Thanks for reading!

The Final Code:

new Sound("bensound-jazzyfrenchy", 1, true) # background music
new Rectangle(-240,180, 480, 360, "#D0F8FF") # sky
new Rectangle(-240, -150, 480, 30, "green") # ground

var carrots = [] # store carrots
var player = new Premade("bunny1_ready", 0, -112, 0.4)
var scoreCounter = new Text("Score: 0", 0, 0, 20)
var score = 0

forever:
    player.x = mouse.x
    forEach carrot in carrots:
    carrot.y -= 10
    if carrot.distanceTo(player) < 50:
    carrot.delete()
    score += 1
    scoreCounter.text = "Score: "+score
    new Sound("jingles_PIZZI16", 0.2)
    if carrot.y < -240:
    scoreCounter.text = "You missed a carrot! Your score was "+score+"."
    pause()
    new Sound("jingles_PIZZI01")

repeatEvery 0.3:
    carrots.push(new Premade("crop_carrot", random(-230, 230), 180))