Free Hype Templates 🏗

Template Gallery
104

Hi @Photics Michael.
That was a very comprehensive tutorial of you, giving a lot of useful building blocks for added functionalities. Since I am fairly new to JS, I would like to ask how to add/append a function
that would trigger a named timeline (e.g. hypeDocument.continueTimelineNamed from Hype's JS API) on game completion to your flipping-a-card game's "web10"-function?

function
function686×1029 88.8 KB

Having troubles to come up with a viable solution due to the lack of JS-literacy. Any advice much appreciated.

1 Like
105

The project like this one was intentionally left incomplete, similar to the Jigsaw puzzle. It's a problem that people can figure out to learn JavaScript.

…or bring the community closer together when someone else solves the problem, like here…

Try solving the problem. That's a great way to learn. Here are some clues to get you started…

  • Think of the logic — How would you define a game over?
  • Hype has an API — Looks like you have a little head start, as you mentioned the… hypeDocument.continueTimelineNamed('timelineName', hypeDocument.kDirectionForward, false) API. You know what you want to run.
  • Understand the events — Which JavaScript event causes a card to flip?
  • Building — Is there an event that could be used to “Check” the state of the game?
  • Does the Check happen instantly — Do you need a delay before checking? If so, how is that done with JavaScript efficiently?

If you get stuck, then post here where you're having trouble.

1 Like
106

Hi Michael.Thank you for giving me some clues and directions. It's for sure an engaging method for learning those cryptic interrelationships and logics of js-functions.

107

It's not so cryptic. At least it's in English. Look…

document.getElementById("Group").addEventListener("click", click)

First word… document …that is a JavaScript thing, but basically it's saying “this web page”.

Then it says… getElementById …camelcase, so it's separate words, but it means what it says. Look for the HTML element with the ID of “Group”. I put all the cards in an element called “group”. It's a Hype group, which is essentially a "div" tag. Basically, only work with this group, not other stuff on the page.

The main part is this… addEventListener …again, that's JavaScript thing, but it means what it says. When a specific "Event" happens inside this "Group" element (in this case… click …is the event) then run the "click" function.

I use a lot of the same words… I called my Hype Group element "group" and I called my function for clicks… "Click".

So, if you can understand how click events work… how can that be expanded to end the game? :thinking:

1 Like
109

At least you're trying, so here's another hint.

Look at line 53. :eyes:

It says…

console.log("Match! 🙂");

It's not about counting clicks. Because if two different cards are clicked, that doesn't bring you closer to winning the game. You need to count matches.

So, by carefully reading the code, you can see where that happens. I added little messages for that. Are you using the developer tools in your web browser? You can see when those messages are being displayed…

console
console1144×1308 52 KB

If you're not using the developer tools / inspector, that's probably why you're struggling with JavaScript.

So, what's next?

Well…

  • You'd need to know how many matches were found.
  • You'd need to know many matches are needed to win the game.
  • You'd need a way to check if the cards matched is equal to the cards needed to win the game. (Win condition)
  • Once the win condition has been met, you'd use the Hype JavaScript API to load a new scene or play a timeline.
  • You'd also need to know how to delay running JavaScript code, to create a more game-like experience. (You don't want to end the game while the cards are still flipping.)

Believe in yourself! This is mostly in English. Try to see the logic and take the time to translate what is being said in JavaScript.

2 Likes