Interactive Minigame shooting Cannon Balls.

The Cannon aims towards the cursor. The Cannon shoots when you click on a block. The Blocks disappear as they are shot.

Download the project at the bottom of this post.

How to shoot the Cannon Balls

This works using JavaScript and Motion Paths. Let's explore how it's done!

I created 7 blocks and 7 corrosponding Motion Paths on a picture of a Cannon Ball. You can change the starting point of the animation independently of where the Cannon Ball is located!

The actual picture of the Cannon Ball is located off-screen. It also has a "reset" motion path. This is only needed if you add more complex interactivity that we are not going to explore in this demo.

Create this trigger to make the Cannon Ball disappear and reset after hitting a block:

Create these types of triggers to make the blocks disappear when they are hit:

Lastly, create this trigger to shoot the Cannon Ball:

Make the Cannon follow the Cursor

This is done using simple JavaScript. Create this trigger:

and add this code:

const rect1 = object('5i3YzB8KKND');

update(() => {
  const dx = rect1.x + rect1.width / 2 - pointerX();
  const dy = rect1.y + rect1.height / 2 - pointerY();
  const angle = Math.atan2(dy, dx);
  rect1.rotation = angle / Math.PI * 180;
});

This code can also be found in Articulates own write-up of the built-in JavaScript support in Articulate Storyline. :) You need to paste in the ID of your specific object in the top of the code. You can find it by right clicking on your object on the Canvas of Storyline.

That's it, you're done!

Now you can add layers, triggers that make things happen, sounds, visual effects etc, text, more blocks(!) etc. :)

Download the project file

Explore the project by downloading the project file right here. It's created by www.mindsparkelearning.com and you can freely use it as is. :)

All assets have been created using simple AI prompts. :)