AS3 Creating arcade-like arrow controls for a game (combination like in Fahrenheit)

Hi

I have very little programming experience.
I want to create a little game in Flash (AS3) and I am attempting to create controls similar to the game Fahrenheit - like in this video:


youtu.be/awa_ZhEBWv4?t=2m54s

Basically, there should be different stages in the game.

  1. The standby stage where some animation is looping
  2. When you press ready, you enter the next (active) stage where you have to get ready to get particular combinations right with the arrow keys. For instance: up, up, left, right. (when this stage is active, the looping animation should slightly change after each set of combinations completed)
  3. If you get the combo right, a short “victory” animation is playing and you move to the next (level2) standby stage.
  4. When you press ready, you enter the active stage (Level 2) and you have to enter a combination that is a bit more complex, for instance: up, up, left, right, left, right

And the game continues like that. Different factors should change throughout the game like: the speed between the arrows that you need to activate, before they expire. The lenght of the combinations. And the intervals between sets of combinations. But all of this is secondary. Right now I would like to be able to make it simple with a combination that you need you need to press before the corresponding keys expire.

I am not asking anyone to do my job for me, but if you have any pointers on which methods or particular code templates I could use for this, I would be very greatful.
To begin with, I would like to make a playing animation where after 10 seconds, I need to press UP, DOWN, LEFT, RIGHT (within 5 seconds) and if I do that, the animation reaches the end. But if not, I am taken to the start of the animation.

Thank you in advance :slight_smile:

-Alex

The first thing you need are key event listeners for stage. This let’s you detect when people type up, down, etc.

The timing of the sequence is a little trickier. I’m trying to think of the most straight forward approach to that. I guess this would be using setInterval. Basically have an array of your directions and go through that array on each interval iteration until it’s complete or the user messes up at which point you clear the interval to stop it from going any longer. A recent tweening thread here has a similar code sample

So, when ready is pressed, set up key listeners, start interval, and check that when a key is pressed, it matches the currently tracked position in your expected keys array. Then on the next interval, update that tracked position and wait for the next key.

You’ll want to do some checking of whether or not the user clicks the same key twice (which I think would be ok) and decide how other key presses are handled, and if it means losing or not. If a key does result in losing, clear the interval, remove the key listener, and show the opposite of whatever is Victory, etc.

1 Like

Thank you for the reply. I have tried fiddling with it. I am attempting to make this game very simple - nothing too fancy regarding the code - just some keyframes and simple codes. Here is what I would like to do. (I made a visual explanation) https://www.dropbox.com/s/hzvfhx4tfts4sb7/code_explanation.jpg?dl=0

An example: You press Ready and the game begins (it goes to frame 2 and plays). Suddenly a right arrow appears and you have to press the right-arrow-key in order for the playhead to keep playing.

Just imagine that you have one long animation on the main timeline split into different continuous phases. (with the progression of each phase, the animation progresses as well). Each phase has a certain amount of keys that you need to press (I will add these manually on the timeline) and you have a window of oportunity wherein you can press a specific key. If you press a wrong key (one of the three other arrow-keys) or if you don’t press the right key in time there is an obsticle which will prevent you from going to the next step.

So far I have fiddled with key event listeners as you said but setInterval seems a bit complex to me. As I said, I am not so good at programming (even though I still understand the basics, functions, variables) and I don’t mind doing lots of manual work to get this thing working.

Again, I am very greatful for any help :slight_smile:

If you’re doing everything manually on the timeline, then you don’t have to worry about setInterval. What setInterval does for you is give you a dynamic, code-controlled version of that timeline allowing you to easily - through code - have adjustments in timing and count. This means you could have a potentially infinitely long game that progressively gets longer (more keys) but also faster (shorter time between keys). It could also be randomly generated so that its different every time you play.

On the timeline you’re fixed with what you have. And that’s fine. Its more work and harder to maintain, but if you’re up for the work (which you said you are), it will be more straightforward to complete :wink:

Ultimately the concept is the same. For each phase you have key listeners set up to detect the appropriate key. At the start of a key window, you need to set up which key to look for. This can be just a variable to detect in the key listener. When a key is pressed (key listener) you determine if its right or wrong. If right, you can let it continue until the next set up frame, but if wrong, you do some clean up (remove key listeners) and go to the failure frame. At the last frame of a group of arrows, you have your victory.

So imagine this timeline:

[a]---[b]---[c]---[d]-[W]-[L]

a-d represents your phase, a-c being starts of a key window and d being the end of the last window ©. The W frame is the frame for winners and L the frame for losers.

a is where you set up your key listener. In W and L you’ll need to remove the listener because thats the end of the game and its no longer needed. In a, b, and c you need to define what key your key listener needs to listen for. The key listener itself will check the key pressed with what you defined here. You also need to track if any key was pressed, and clear that out once a key is pressed. Because what if someone doesn’t press a key between a and b? So, b, c and d each need to check to see if a key was not pressed and go to L if that was the case since they also represent the end of a key window. Here’s what I imagine frame a to look like:

// frame a
setupListeners();
setExpectedKey(Keyboard.LEFT, false);

frame b might be

// frame b
validateKeyPressed();
setExpectedKey(Keyboard.UP, false);

and c (similar to b) would look something like

// frame c
validateKeyPressed();
setExpectedKey(Keyboard.RIGHT, true);

while d is just

// frame d
validateKeyPressed();

both W and L would include

cleanupListeners();

What are these functions? (And yes, functions are preferred instead of a bunch of code since you’re going to have a lot of these frames). They’d be defined in frame one of your timeline (and therefore accessible everywhere) look something like

var expectedKey = -1; // key code for each window to be checked
var isLast = false; // lets us know if we go on to win on the last key window
var keyWasPressed = false; // lets us know if no key was pressed

function setupListeners() {
   stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
}

function cleanupListeners() {
   stage.removeEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
}

function setExpectedKey(expectedKey, isLast) {
   this.expectedKey = expectedKey;
   this.isLast = isLast;
   this.keyWasPressed = false;
}

function handleKeyDown(event:KeyboardEvent) {
   this.keyWasPressed = true;
   if (event.keyCode !== this.expectedKey) {
      gotoAndStop("L");
   }else if (this.isLast) {
      gotoAndStop("W");
   }
}

function validateKeyPressed() {
   if (!this.keyWasPressed) {
      gotoAndStop("L");
   }
}

This is all off the top of my head, so probably won’t work, but it will give you an idea of where to go.