Mix of Free templates by Photics

Using JavaScript with Hype
1

Hi all,

First I'm sorry for my poor English :cry:

I've a project to create a mini platform game with Hype. At first, I started with a blank Hype document but it seemed complicated to me. So I saw that a member (photics) was offering free (GREAT !) Templates to see how it works :

It is perfect for me because it constitutes a very good base of work :star_struck:
But (there is a "but"!) when I wanted to put the virtual controller (with buttons) on the template "Jump" then it doesn't work! Indeed, the "up" button does not allow a jump.(The "right and" left "buttons are OK).
See the capture :

capture
capture1155×353 76.5 KB

(All the buttons (with ID : up, left, right) execute a JavaScript function (window.direction = element.id)...)

I don't understand my mistake. The If condition must allow the function jumping(e), no ?

Thank you in advance for your help ! :hugs:

2

Hi! I'm glad that you like the templates! :grin:

I'm a bit busy right now, but I can look more into this issue later today. For now, I noticed some problems...

One... direction == "up" ...is not meant to be used as condition. The controlling template has constant movement... in a single direction... so it's either up, down, left, or right. The way you're using it, the value of "direction" wouldn't be changed to up.

Two... a "Jump" is different than "up". A "Jump" is meant to be a single action. Where as a direction value of "up" is meant to be continual upward movement.

I gotta run, but that info should be a good starting point for troubleshooting.

3

Thank you for your reply :blush:

I understand your comment and so I tried to create a single button that is used only to jump but it doesn't work. :sob:
For the IF condition, I made several tests like :
if(document.getElementById('saut').clicked == true)

:disappointed:

4

Your screenshot doesn't show the "jumping" function. That's where the action is at. You're trying to edit keyboard controls when you want to add button controls.

There is one key part in your screenshot... jumping(e) ...that loads the code not shown in the screenshot.

First, is to understand how event listeners work...

window.addEventListener("keydown", move);

Whenever a key is pressed, the "move" function is run.

Don't try to cram button elements (Jump button) in a key event related function.

What you probably want to do is run the "jumping" function when an element is pressed (mouse down / touch down)

Right now, on mobile devices, the whole screen is a jump button...

window.addEventListener("touchend", jumping);

NOTE — "touchend" is a mobile event.

One way to fix this is to....

  1. Add an event listener to your jump button element
  2. Rewrite the "jumping" function to respond to events from that element.

The reason you're struggling with this project is because you found a limitation of the template. It wasn't designed to do what you're trying to do. One template has keyboard controls, the other has on-screen controls. So, to make this work, the JavaScript needs modification.

You're close, so maybe keep working at it.

Something important to learn — event listeners. Since you mention a language barrier, you might be interested in this video on YouTube...

It covers JavaScript event listeners. What's really nice is the "Auto Translate" option...

auto-translate

languages
languages660×980 49.1 KB

...while auto translate is not perfect, it might be easier to read captions in your native language.

It's one of my longer videos, but it might help you to understand what's going on here. Working with "Event Listeners" is the important part. That's what's going on in the jump template.

See if you can figure it out. This is a great way to learn. I gotta go eat. If you're still stuck, just post where you're having trouble.

5

First of all, many thanks for sharing the video - it's awesome. I learned a lot of things :star_struck:
I want to tell you that your explanations are very educational! :+1:
So, I started to make changes. For example, I tried to do like on the video using this code:

var saut = document.querySelector("input[name='saut']:checked").value;

it did not work because I understood that it was necessary to make changes by adding a event for the function jumping(e)

I keep trying to be successful.
Thank you again for taking your time to answer me with all these details :star_struck:

1 Like
6

Great! I'm glad that you liked the video and that it helped you.

So, the first step is to create your Jump button, and then give it an ID.

hype-element-id
hype-element-id540×764 23.5 KB

Then, you can add an event listener to it by manually by adding this to the JavaScript...

hypeDocument.getElementById("jumpButton").addEventListener("click", jumping);

Next, find this part of the code...

 function jumping(e) {
      var ready = "true";

...and then change the following line...

      if (e.pageX) {

to this...

      if (e.pageX && e.target.id != "jumpButton") {

What's happening is that the touch control is conflicting with the possibility of adding button controls. So, adding another condition... is not equal to "jumpButton"... the variable "ready" stays "true".

Although, I suppose, since you're adding your own on-screen controls, you could just delete that whole section...

      if (e.pageX && e.target.id != "platform") {
           var tex = e.pageX;
           var tey = e.pageY;
           var dex = Math.abs(tsx - tex);
           var dey = Math.abs(tsy - tey);
           if (dex > 50 || dey > 50) {
                ready = false;
           }
      }

...and delete this...

 window.addEventListener("touchstart", function (e) {
      tsx = e.pageX;
      tsy = e.pageY;
 });
 window.addEventListener("touchend", jumping);

You have a big challenge, as it looks like there are two language barriers to overcome — English and JavaScript. But, it does seem like you're close to solving this problem. The information here should solve the problem.

Heh, you'll probably run into additional problems after solving this one. Making games is tough. So, stay and strong and motivated to get the job done! :slightly_smiling_face:

The "Jump" template is #34, but I've only released three Hype Template videos... https://www.youtube.com/playlist?list=PLORkPhKfIRglpDfk0PcLCnC4a1SiRDbaX ...the plan is to make a video tutorial for each template — but I'm going in order. It might be a long while before I get to the "Jump" video and the "Controlling" video.

7

Fantastic !
You are really talented and skilled in Javascript ! :star_struck:
It works great now! I can start my project with a good foundation :partying_face:

I have subscribed to your channel and I am impatiently awaiting future videos to learn a lot more.

Thank you again for everything and for your patience :+1:

1 Like