Kaboom.js is a relative newcomer to the game development scene, but it is already making a big splash – especially among indie creators. This JavaScript-based library was made specifically with games in mind, in the same vein of frameworks such as Phaser or Pixi.js. However, there are many aspects that have made it stand above its competitors and worth your time checking out.

In this article, we’re going to introduce you to Kaboom.js and show you how you can get started learning this new tool.

Let’s get started!

What is Kaboom.js?

As mentioned, Kaboom.js is a JavaScript library in the vein of HTML5 games, which use the browser to render games made with it. The library was made with the idea of simplicity, but comes with many important game development features – such as layering, collision detection, input handling, and more. Regardless, though, the goal is to allow novice developers to create game scenes as quickly as possible.

Game objects in Kaboom.js are conveniently rendered with a component-based system. This means they’re extremely easy to manipulate and apply behaviors too. The behaviors can include everything from simple game mechanics like health to basic movement-based animations – so each game object essentially suits object oriented programming principles.

Beyond this, it is worth noting Kaboom.js is also an available template for Replit – a popular, in-browser coding environment. This means its well-suited for developers who aren’t interested in setting up local development environments or just want to play around with the library.

Key Pros of Kaboom.js

Why should you use Kaboom.js? Below, we’re going to explore what makes Kaboom.js stand out and how, as a developer, you can benefit from the advantages Kaboom.js offers.

Fast and lightweight

Unfortunately, not everyone has a computer that can run game engines such as Unity or Unreal Engine – which both are pretty process intensive programs. However, Kaboom.js does not require a great computer and can be used even with low-end laptops. In fact, due to its incorporation with Replit, as mentioned above, you really only need a browser if you’re intent on using it – not even a code editor is required.

Likewise, because of how lightweight it is, games made with Kaboom.js run very smoothly as well. This means you don’t have to get hung up too much on optimization. Instead, your games will likely run quickly right out of the box, leaving you more time to focus on what matters.

No dependencies

Many frameworks and libraries out there require several layers of dependencies to be able to run properly. If you forget the dependency, or more tragically, if the dependency has a breaking change, your game isn’t going to work.

Kaboom.js doesn’t require any sort of dependencies. While you certainly can add packages such as webpack, natively you just need to import the Kaboom.js library itself. Once that is added, you won’t have the extra worry of maintaining the dependencies. This helps Kaboom.js achieve its goal of making it quick to setup and allowing you to dive straight into the fun stuff of actually making the game.

Cross-platform compatible

Since Kaboom.js is specifically for creating browser-based games, this means that there are no platform limitations. If the device can connect to the internet, your players can play it from anywhere.

For you as a developer, this means two things. First, this helps you avoid messy setups of needing multiple game versions just to have it available for multiple platforms. Second, this opens you up for a wider audience since you can tap into different sorts of players. All in all, though, this is a boon that makes it much easier for you to get the game into multiple different hands.

Simplicity

If you’ve ever tried to read documentation for frameworks or libraries before, you’ll know they can get rather complicated. If you don’t believe us, just go check out Unity’s documentation. While certainly this is fine for experienced developers, beginner developers are going to find this a nightmare.

Kaboom.js was designed to eliminate this problem and be as simple as possible. Not only does this help with keeping it lightweight, but makes the documentation much, much easier to understand when you’re just a beginner. This, in turn, just makes development itself easier.

Additionally, it comes with the extra benefit that this documentation can more easily be maintained as the library is updated. This means you won’t be reading old information that was relevant five versions ago.

Specifically made for beginners

As you might have seen from the previous points, beginners were at the heart of the design choices for Kaboom.js. Everything about the library is made to benefit beginners who have never made a game before. While there is a need for JavaScript experience before diving in, this is a much lower point of entry compared to heftier engines.

Thus, you’re only going to need a few tutorials to get the gist of how Kaboom.js works – and soon be able to develop your own projects with it.

Active development

Over the years, many HTML5 frameworks have come and gone. For others that remain, the development can often be slow and new versions, bug fixes, and features are few and far between. While many of these frameworks still technically work, the lack of developer support can eventually become a hindrance.

Kaboom.js, on the other hand, is very actively and caringly developed. Though we don’t expect them to break their principles of simplicity, improvements to the library come frequently. Thus, you can be assured the library will be supported for whatever time it needs for you to build your project.

What can you make with Kaboom.js?

Being based on HTML5 (i.e. for the browser), projects made with Kaboom.js do have limitations – as our browsers and internet are only so powerful no matter which JS library we’re talking about. So, you shouldn’t expect to make any kind of AAA game with the library. Kaboom.js was also specifically made for 2D development, so 3D graphics are kind of off the menu as well.

Past these two minor limitations, though, Kaboom.js does not put any further obstacles in your way. You can build small games in just about every genre, and only your imagination is there to hold you back. This includes everything from platformers to adventure games to old-style retro games like Breakout, Super Mario Bros., Space Invaders, and so forth.

If you want to explore the full scope of what people have already made, you can check out Kaboom.js made games below:

• itch.io Kaboom.js games
• Replit Kaboom.js games
• Newgrounds Kaboom.js games

Kaboom.js & JavaScript Tutorials

Ready to create games with Kaboom.js? Check out the links of tutorials below which cover Kaboom.js, JavaScript for HTML5 development, and the game development process.

• Kaboom.js Home page
• Kaboom.js Playground Demo
• JavaScript 101 by Zenva
• HTML5 Game Development Mini-Degree by Zenva
• Intro to Kaboom.js by the Kaboom.js team
• Code Zelda in JavaScript with Kaboom.js! by Code with Ania Kubów
• Code Mario in JavaScript with Kaboom.js! by Code with Ania Kubów
• 5 Tips for Getting Started with Kaboom.js! by Ourcade
• Let’s Code a Snake Game with Kaboom.js – Part 1 by Ourcade
• Learn to Make a Game with Kaboom.js in 39 Minutes by Replit
• I made a game entirely in my browser (Kaboom.js + Replit) by Replit
• Building an Arcade Game with Kaboom.js, RedisJSON and Redis Streams by Redis

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

However, did you know there was an alternative that not only overcomes these issues, but opens up a new audience for aspiring developers to aim for? In this post, we’re going to introduce you to KaiOS, and help you find the KaiOS game development tutorials you’ll need to start creating for this new platform!

What is KaiOS?

To put it plainly, KaiOS is an alternative mobile operating system for phones initially released in 2017. The entire operating system was based off of an open-source project which aimed to continue the work of the old Firefox OS that was abandoned by Mozilla. With KaiOS, the main aim of this alternative operating system is to help increase internet access and phone availability for users who have not yet been able to access these modern conveniences.

According to KaiOS, the expensive price of phones and touchscreen learning curves are a big factor in why billions of people still aren’t accessing the internet. With the KaiOS, though, companies who volunteer can easily get a license for the operating system and develop hardware for it. As the operating system was built to be extremely lightweight, this has allowed companies to put the KaiOS on keypad feature phones, which in turn are able to be sold for a much, much cheaper price than the average Android or iOS phone. Nevertheless, these phones are still able to come with modern technology like 4G, Wi-Fi, and GPS, giving a whole new set of people access to mobile devices.

In addition, apps for KaiOS still are able to offer plenty of robust experiences, as everything is based on HTML5. Thus, the operating system offers cross-platform compatibility for developers wishing to create software for KaiOS devices.

Advantages of KaiOS?

Why would someone want to develop for KaiOS, though – especially compared to something like Android and iOS? There are some very distinct advantages this newfound operating system can offer for keen developers who want to try it out!

HTML5 Based

As mentioned earlier, apps for KaiOS are web-based on HTML5. As such, there are only three things you really need to know to start building them: HTML, CSS, and JavaScript. This makes the development process not only very easy to learn, but multi-functional as these are the same pillars for the entire web development sector too. Even further, this means it’s very easy to make cross-platform applications, so even if you don’t get any bites from KaiOS, you still have other markets like Android and iOS that can access your projects.

No Touchscreen Considerations

While it’s not impossible for KaiOS to someday aim for touchscreen devices, one of the main advantages is that KaiOS can be put on old-style keypad phones. Thus, when developing games or apps, you don’t really need to worry about whether or not the user tapped, dragged, or anything else that involves touch-based controls. This can take off a lot of pressure when developing – especially if this is your first journey into mobile devices.

Access to New Regions

Due to its affordability and the company’s own aim, KaiOS is able to get into regions where Android and iOS devices aren’t necessarily as prevalent or popular. This includes places like India, Africa, South America, and even many parts of Asia. As such, there is a huge audience, some of whom have never even accessed the internet before KaiOS, just waiting to play your games or use your apps.

Quickly Growing Platform

Although KaiOS is new, the platform is already growing quickly. In fact, according to Android Authority, KaiOS is already the second most popular OS for phones in India, beating out iOS. Even places like the US are seeing a number of users switch over to KaiOS simply due to the cheaper price point. To match this, many different companies, such as Google, Atari, Mozilla, AT&T, Sprint, T-Mobile, TED, and beyond, have partnered with the KaiOS company. As such, it’s not unwise to say the platform is growing in both audience and support, so it’s not going anywhere anytime soon and is quite stable for new-time developers.

Uncrowded Market

Earlier we mentioned that KaiOS only came out in 2017. While some might interpret this as a bad thing, since the market isn’t as established as the other mobile operating systems, this can also be a good thing. For anyone who has developed for Android or iOS, you know both their respective stores have, well, a lot of apps and a lot of competition. As KaiOS is a lot newer, though, the market is a lot less crowded. Because of this, there is an opportunity for developers who jump in early to establish their games and apps before any other competitor, thus giving them more opportunities for success.

What Can You Make for KaiOS?

While KaiOS still comes with generalized mobile device limitations (i.e. you aren’t gonna make Dark Souls), there are plenty of opportunities for different styles of mobile apps and mobile games. This includes:

• Apps for Entertainment
• Productivity apps
• Utility apps (weather, clocks, etc.)
• Common Webapps like Facebook, WhatsApp, and so forth
• HTML5 games in any genre

… and more! We highly recommend checking out KaiOS most popular apps from 2020 for a better idea, or simply browse the KaiOS app store to see the kinds of apps are possible.

Tutorials

You can dive into KaiOS game development & app devel9opment by checking out the tutorials below and taking advantage of this new platform for your projects!

About KaiOS

• KaiOS Website
• KaiOS Developer Portal
• KaiOS App Store
• How KaiOS is catching up with Android by Mrwhosetheboss

User Tutorials

• Setting up your KaiOS developer environment by KaiOS Technologies
• Learn to develop for the KaiOS operating system with these resources by Harshdeep Vaghela
• How to submit your app to the KaiStore by KaiOS Technologies
• App monetization on KaiOS by Asis Rai
• How to Convert Android Apps to KaiOS by Harshdeep Vaghela
• KaiOS Walkthrough by Jose Briones by Koji
• Develop Your First Kai OS App by Tech Expo
• The joy and challenge of developing for KaiOS by Nolan Lawson
• HTML & CSS 101 – Web Development Fundamentals by Zenva
• JavaScript 101 – First Programming Steps by Zenva
• HTML5 Game Development Mini-Degree by Zenva

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

If you’ve never coded before, finding the right place to start can be difficult. However, no matter the age, a good first tool/language to explore is Scratch.

Scratch is a visual coding language that allows for the creation of digital stories, games, and animations by anyone who’s interested – including kids. Scratch is also the world’s largest coding community for children and is available for free in more than 70 different languages.

In this tutorial, you’ll learn the basics of coding through the implementation of a mini-project that animates the movement of a cat sprite in Scratch.

If you’re ready to dig in, let’s get started!

Projects Files

The code for our final cat animation can be downloaded here: Cat Animation in Scratch. Although we will guide you along every step of the way, it’s good to also have the complete code so that you can compare it to your version at any time!

We also recommend you check out our Jr Coder Mini-Degree (for learners) or Zenva Schools (for teachers) to explore more topics pertaining to coding with Scratch.

BUILD YOUR OWN GAMES

Get 250+ coding courses for

$1

LEARN MORE

AVAILABLE FOR A LIMITED TIME ONLY

A Closer Look at Scratch’s Interface

To start this tutorial off, we’ll first explore how to create Scratch projects and explore the interface!

Creating a new Project

First off, head over to the Scratch homepage then click on ‘Create‘:

This will initiate a new project as seen below:

Game Stage

At the top-right corner, we have the game stage where we can see our animation running:

We can click on the green flag icon above the game stage to start our animation and on the red button to terminate it. Note that as we don’t have any code to run just yet, it only shows its default cat sprite for the moment. By clicking on the rightmost icon above the game stage, you can also put it in fullscreen mode:

Sprite Properties

To alter the cat’s position inside the game stage area, just drag it around as you wish. You’ll see that its x and y coordinates in the sprite properties panel vary according to its current location:

Here in the properties, we can also rename the sprite to ‘Cat’ and change its size and direction too. To hide or display your sprite, click on the eye icons next to ‘Show’.

At the bottom of the right-hand side of the screen, the sprite area shows us all the sprites we have in our project (only the cat, in our case). To add more sprites, click on the plus button:

From there, you’ll have a huge variety of options to choose from. When you add a new sprite to the project, it will appear next to the previous ones you already had:

To delete a sprite, just click on the trash bin icon that’s on top of its thumbnail:

Changing the Background

Next to the sprites, there’s the backdrop area, where you can select a different background for your animation:

Changing our default white background to ‘Room 2‘ (under the ‘Indoors‘ filter), we’d have:

Block Palette

On the left side of our screen, on the other hand, we have all possible blocks of code that we’ll be using in our code. Each block contains a single instruction for the computer to execute and is assigned to one of the various categories shown below:

Workspace

And finally, to the very center of the screen is the workspace, where we’ll be placing all our code blocks:

Making our First Code

Now that we’ve grasped the Scratch tool, it’s time to move on to the main part of making a Scratch project: block-based coding.

To start our project, let’s delete the cat sprite and add a chick character (or feel free to add the sprite of your choice):

In Scratch, we build our program using blocks that we can select from the block palette on the left side of the screen. Let’s begin by clicking and dragging the first block from the Motion category (the one that says “move 10 steps“) to the workspace:

Now, every time you click on this block the chick sprite moves 10 steps in the game stage. You can check its new position by the updates on its x coordinate in the sprite properties panel.

Note that you can also change the number of steps the chick will move each time by entering a new number directly in the block itself:

Although we already have a line of code, when we click on the green flag to start the program nothing happens. This is so because we need to add a starting event in order for our character to move when the green flag is clicked. To do it, go to the blocks under the Events category:

Then, drag the “when green flag clicked” block to the workspace and place it on top of the move block that is already there:

With this, whenever we click on the green flag our character moves 10 steps to its right.

Adding More Blocks

On the blocks palette, go to Looks and drag the “say Hello! for 2 seconds” block to the workspace, connecting it under the move block as follows:

Note that the blocks fit together perfectly. We can change both text and duration if we want:

Clicking on the green flag, we see it is working correctly:

Go on and add the “think Hmm… for 2 seconds” block to our code as well:

Order of Execution

It’s important to notice how all these commands are always executed in order, from top to bottom:

First, we are moving the sprite 10 steps, then we make it say ‘Hi’, and at last we make it think ‘Hmm’.

If we were to place the think block before the say one, we’d see that the character would think ‘Hmm’ first and only then would say ‘Hi’:

Remember that if you want to stop the program at any time, you need only press the red icon next to the green flag.

Adding Sounds

Let’s add a sound to our program. Bring the “play sound until done” block from the Sound category to the workspace:

The suggested sound ‘Chirp’ is matching the sprite we’ve chosen, so it may differ for you.

At last, let’s move the chick again by 20 steps:

Play the animation one more time to see the whole execution take place.

One Script for Each Sprite

Bear in mind that our code is only being applied to the chick sprite. If you add a new sprite, the workspace will appear blank for that sprite while our code remains there normally for the chick:

And just like that, our first computer interactive program is done, and it already responds to user input by moving our character on the stage!

Algorithms and Flowcharts

We’ve covered a lot of ground in how the block-based coding of Scratch works. However, you might be asking, “Why” and “How” we knew what blocks to use. For that, let’s take a step back and discuss one of the most fundamental aspects of coding.

What is an Algorithm?

You may not realize it, but you have just created and executed an algorithm! Algorithms are everywhere and are not only related to computer science stuff. An algorithm is merely a sequence of steps that solves a real-world problem. In this sense, coding or programming is simply the process of making algorithms for a computer to execute.

An example of an algorithm from our daily lives can be something as common as making a piece of toast. It could be represented by the following steps:

1. Put a slice of bread into the toaster
2. Set the toasting level
3. Lower the lever
4. Wait until the toast is ready
5. Safely remove the bread from the toaster

As you can see, an algorithm lists all of the steps that are needed in order to achieve the desired outcome. In other others, an algorithm is nothing but a set of instructions that need to be followed in a specific order!

Flowcharts

Algorithms can be visually described by a flowchart. Our toast example above would produce this flowchart here:

We specify the start of our algorithm with a ‘Begin‘ block (in blue) then proceed to place statement blocks (green rectangles), each containing one of the steps of our algorithm. We finish it by adding an ‘End‘ block (also in blue) to point out where the algorithm ends. Note that although we’re using specific colors in this tutorial, they are not part of the flowchart convention. Flowcharts don’t need to have any particular colors.

Flowcharts are useful for code documentation and to allow us to check that we’ve implemented everything correctly, and have not skipped any of the necessary steps of our algorithm. With all this in mind, let’s now create a brand new project so we can move on to making our first animation in Scratch!

Using Coordinates

You may have noticed in the above section, we also mentioned the “x coordinate”. Before we proceed to our final first project, let’s talk about this concept so you understand why it’s important to moving sprites.

We’re going to use coordinates to move and position our sprite on the screen. For every spot on the game stage, we have a corresponding value for x and y that form the coordinate for that particular point in the grid. Coordinate (0, 0), also known as origin, is right at the very center of the game stage:

To help us better visualize how coordinates work, let’s choose a new background. Click on the ‘Choose a Backdrop’ button and search for “coordinates“, then select ‘Xy-grid‘:

This background allows us to see the values of x and y for the entire stage area:

The X-axis values increase as we move to the right and decrease to the left, so if you move left past zero you’ll have negative values for x. Similarly, values of y increase as we move the sprite up and decrease as we bring it down the game stage past the X-axis.

You can also enter specific values for one axis or both axes and the cat will be repositioned automatically:

Cat Animation Project

Now that we have a good understanding of Scratch, we’ll put everything to the test by making a Scratch animation involving simple sprite movement.

Before we step into the actual code for our new project, let’s rename it to ‘Cat Animation’ at the top bar:

For this project, let’s change the background once more to ‘Bedroom 2‘:

We’re choosing a new backdrop because we want to make our cat sprite move to the drawer, later to the computer desk, then to the window, and lastly to the bottom right corner of the carpet of the bedroom.

For our animation to start when the player clicks on the green flag button, let’s initiate our code by adding the event block for when the green flag is clicked:

As we want to have our cat positioned by the bed once the animation is started, we can use the “go to” block (from the Motion category):

To know which values for x and y to enter, we can place the cat where we want it to be at the start of our animation (in this case, on top of the bed) and then use the same coordinates shown in the sprite properties panel in the motion block in question. That is so because if you manually move the sprite around in the stage and then proceed to use any block that has the sprite’s coordinates, the block will already have the sprite’s updated location on it. Also, note that each category has a color, so, when you see a block you can automatically identify from which category that block is.

Now if we click the green flag icon, the cat is moved to the bed straight away:

Next, we want to move the cat to the drawers next to the bed. Here, we’re going to use the “glide” block instead:

The glide block takes the amount of time indicated in seconds to move the sprite, thus it’s not immediate as the go to block.

Challenge

Now that we’ve shown you the basic process, try the rest yourself first! Update the coordinates and complete the remaining steps:

1. Glide the cat to the computer
2. Glide the cat to the window
3. Glide the cat onto the carpet

All moves should take 2 seconds each. Don’t worry if you get stuck – we’ll cover the final code next.

Final Code

The solution to the challenge is as follows.

Let’s add another glide block to our code, and move the cat to the computer:

Note that we’ve changed the duration of our first glide block to 2 seconds as well just so it matches the following glide blocks we’ll have.

Repeat this process for the window and carpet:

Our code is now complete! Running the code we see that everything goes as expected:

In the end, the cat is standing on the carpet by the bottom right corner of the bedroom.

If you have solved the challenge in a different manner, that’s fine! Quite often there is more than one way to do the same thing in programming. In case you couldn’t solve it, don’t worry as you can always keep practicing now that you’ve seen how the challenge was solved!

You can run our cat animation project by heading over to the public project page at https://scratch.mit.edu/projects/667377329/

Cat Animation Flowchart

Finally, let’s check the flowchart for our animation project:

For this flowchart, we’re using a new type of block (the one in orange) which can be used for user input/output, such as waiting for the user to press a button (as is the case above) or displaying a message to the user.

Conclusion

Congratulations on reaching the end of this tutorial! By now you not only have coded your first program in Scratch, but have also already created your first animation! You also have learned about algorithms and how to create flowcharts to better visualize the steps being taken.

Coding is an important skill that can be developed at any age and is being included more and more in schools in general. It improves creativity & problem-solving, and can offer a wide range of careers worldwide for those who take it professionally. Likewise, Scratch is used throughout the globe across many different age groups. With its intuitive drag-and-drop interface, it’s easy to learn the basics of programming and practice coding by trying out the various types of blocks from all the available categories in the block palette.

If you want to build more interactive projects in Scratch, you can check out the Jr Coder Mini-Degree offered by Zenva. This curriculum covers a slew of different Scratch projects and programming principles to help expand your skills and give you a solid understanding of programming in general.

On the flip side, for teachers who want to use Scratch as a tool for their classroom, Zenva Schools can help you out. Zenva Schools is an online platform that offers coding courses for use in the classroom on a variety of subjects, including Scratch, Python, HTML & CSS, and Unity. With other features such as pre-mapped course plans and reporting, it can be a fast and easy way to introduce students to a myriad of important digital topics.

In any case, we hope that you continue to explore and create real-world programs and games – and most of all that you have fun while doing it!

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

With this tutorial, you’ll learn the basics of animating with code using Scratch by building a fish animation. While some familiarity with Scratch will help, this tutorial is perfect for any age since it doesn’t require much knowledge!

If you’re ready to learn how to make coding fun, let’s dive in.

What is Scratch?

Scratch is a free visual coding tool developed by the Massachusetts Institute of Technology (MIT) for creating games and interactive media. As it uses code blocks instead of text-based coding, it’s very easy for even kids to use as they practice basic computer algorithms.

If this is your first time using Scratch, head over to the Scratch homepage and create a new project (or use one you already have if you wish). Although we’re not going over how to switch sprites or add a background, it all is pretty intuitive to get done.

Projects Files

All the contents of this tutorial can be downloaded here. 

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

Animating a Fish Sprite

For this tutorial, we have a fish sprite on an underwater backdrop in Scratch – and we want our fish sprite to move every time we press the green flag above the game stage:

First, drag the ‘when green flag clicked‘ block from the ‘Events‘ category to the workspace:

By having this block in our code, we’re saying that everything that comes below it is going to be executed whenever the green flag is clicked.

Adding Bubbles Sound

Next, we can add a bubble sound to our sprite. Over the ‘Sound‘ category, bring the ‘start sound‘ block to your code and pin it under the block we have already there:

Click on the arrow to replace the ‘ocean waves’ sound with ‘bubbles‘. If you press the green flag now, you’ll hear the bubbles sound already.

Moving the Fish Around

To move the fish, we use the ‘Motion‘ block that says ‘glide 1 secs to random position‘:

Glide takes the sprite to a new position over a period of time. That is, it’s going to move the fish to any position within the background area where the entire movement will only take 1 second. If you click on the green flag, you’ll see it moving:

Note that you can alter the duration (numbers of seconds) the movement is taking by typing a new value on top of the current one.

Repeating the Animation

At the moment, our fish sprite is moving only once when we click the green flag. Go to the ‘Control‘ category, where we have blocks that allow us to repeat a block of code. You’ll see the ‘repeat’ block, where you can enter the number of times you want your code to repeat, and also the ‘forever’ block – the one we want for this project.

Place the ‘forever‘ block below the green flag starting event, with the 2 blocks of code we had added inside it for them to get repeated:

Repetition blocks run the code that’s within them until a given condition is met. In our case, until we hit the stop button (the red button next to the green flag).

Running our program, we see the fish keeps changing its position on the screen while making bubbles sounds, as intended!

Conclusion

Surprisingly, that’s all there is to it! You now have a simple animation at your fingertips, as well as an understanding of a basic coding algorithm.

However, you don’t have to stop here and can expand this project in numerous ways. Perhaps you’ll want to add more fish to your “tank” that all have different animation behavior. You could also give each fish a unique behavior, such as rotating or flipping direction, whenever they reach the target position. Of course, these principles apply to any kind of animation you might want to try out. Perhaps you want to make a jungle where monkeys move from vine to vine.

The point here is that only your imagination is the limit! Either way, we hope these Scratch fundamentals have set you on the right path to expressing yourself in new ways!

Want to learn more about Scratch animating? Try our complete Scratch Projects – Fish Animation course.

Explore HTML5 game development like never before with Kontra.js – a lightweight library aimed at getting you developing your dream games fast! You can also extend the material covered here by checking out the full course below!

JavaScript Game Development with Kontra.js – Match 3

About

With the guidance of instructor Scott Westover, you will extend your skills beyond the usual HTML5 frameworks such as Phaser and learn how Kontra.js can help you structure your games more efficiently and simply. You will learn key topics such as game loops, adding sprites and images, and more – all for games playable right within your own browser. Whether you simply want more pieces to add to your portfolio or are looking to join competitions like Js13kGames, this free course will help you take the first crucial steps into cross-platform game development.

The js13kgames competition is a free online event where people from all over the world build games that are less than 13KB in size.

Zenva is one of the supporters of this initiative and we believe is a great way to put in practice what you’ve learned in our video courses, and to make something simple and fun!

Source Code

The source code for all the tutorials can be downloaded here

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

Tutorials

Some of the things you will learn in this course are how to use Java to solve complicated programming problems, understand OOP concepts, how to play music in your game, how to animate sprites, how to create a character select system and much, much more. Take your game development to the next level!

Access this course on Zenva Academy

This course is project based so you will not be spending time learning a bunch of useless coding practices. At the end of this course, you will have real world apps to use in your portfolio. We feel that project based training content is the best way to get from A to B. Taking this course means that you learn practical, employable skills immediately. What are you waiting for?

Access this course on Zenva Acadamy

Learn how to use the Corona SDK while building a game that pits Ninjas against Pirates in a time classic battle. Your game will feature animated characters, an intuitive playing style, an upgrade system, and in-game currency. Then this course takes it one step further and shows you how to generate revenue from your game. Get started now on the path to game development.

Access this course on Zenva Academy