This is part 4 in a series, you can read part 1 here.

This time I’m trying something new: a video tutorial!

In the video tutorial I’m creating a very basic version of the game Space Invaders. You can see the endresult of the video-tutorial here.

I’ll try to recap most of what I did in text form below and I’ve improved the game a lot since the video-tutorial. Read below how I did it, or play the updated version!

Assets (Aliens, user and bullets) #

I just sliced all assets from an image I found online (slice image by right clicking on it or use CMD-^ on Mac).

I name the bullet i_bullet and the aliens i_alien (prefix i_ because they are images). I create a dynamic panel for the user, named dyn_user and add pin to browser with bottom, center, 20, 0. This way the user always starts out in the middle of the browser window in the bottom of the screen.

I’ve grouped the aliens into g_aliens and added two labels to the page: l_score (showing the score) and l_message (for ‘you won’ or ‘you lost’).

Lastly I create three variables: score, numAliens (amount of aliens left), playingGame (whether the came is running (value: 1), or it’s over (0)).

Moving the user and firing a bullet #

We’re moving the user by capturing keypresses on the page. For going left: properties › Interactions › More Events › OnPageKeyDown and adding a case key pressed equals Left, move the dyn_user left by 10 pixels.

We will use the z-key for firing, because the space-bar has a special usecase in browsers: scrolling the page. When the z-key is pressed, we move the i_bullet to the same position as the user.

The main loop #

Our game will work with a main loop (a repeating ‘function’). In every loop we will:

• move the aliens down
• move the bullet up
• update the score
• check if an alien was shot
• check if the user lost or won

This is the part where the magic happens. I’ve added the main-loop to the page-interactions, but in hindsight it might be better to create a separate object for it (a dyn_mainloop for instance). We can move this object off-screen to make sure no-one accidentally interacts with it.

The trick is that the mainloop is inside an interaction people don’t use that much, the OnPageContextMenu. In this interaction we have a couple of cases:

if playingGame is 1
  move g_aliens by 10 pixels down
  move i_bullet by 20 pixels up
  score + 10
  set l_score to score
  wait 200ms

if i_bullet is over area of i_alien1
  hide i_alien1
  score + 2000
  numAliens - 1

(repeat for i_alien2 and i_alien3)

if g_aliens.y is more than dyn_user.y
  playingGame = 0
  set text on l_message to "you lost"

if numAliens is 0
  playingGame = 0
  set text on l_message to "you won"

As you can see, the bullet is always moving, even after it hit an alien or when it’s off-screen.

I start the game as soon as the page is loaded by adding a fire OnPageContextMenu on Page to the interaction OnPageLoad.

If this all sounds like gibberish to you: download the Axure file and play around with it a bit! Link is at the end of the article!

Game update #

After making the video-tutorial, I couldn’t resist improving the game a bit. I added an instruction in the beginning and updated the variables to make the game more exciting. But the most important change is in the way I detect if an alien was shot.

Improvement in alien-kill-detection #

First “alien-kill-detection” was in the main game loop, but there I had to add it separately for every alien. With three aliens that was doable, but I want to have an army 😂 And besides that, I want different aliens do different things!

My fix? I put each alien inside it’s own dynamic panel. In the onMove of the dynamic panel I added the detection for being shot. Axure is kind enough to trigger the onMove also when the element is inside a group that moves, so I didn’t have to do anything else! Take a look at the Axure file to see exactly how it works (link below).

Play the updated game

Homework assignment 🤓 #

Who can:

• give the user multiple bullets
• make the variable numAliens unnecessary
• create multiple levels
• align the aliens in the middle (like the user is)
• make it so people with high screens don’t have an advantage
• add a scoreboard (bonus-points if the scoreboard is world-wide)

Download the Axure file

Note: if you use cases and interactions this heavily in real-life, you’re probably doing it wrong! Prototyping is MAKING FAKE STUFF. Just sayin’.

This is part 4 in a series, you can read part 1 here.