Guess My Number game

Using JavaScript with Hype
,
1

I want to make a Guess My Number game in Hype to then include on a WordPress page. Perhaps this kind of game has been done before, but I can not find it. As a beginner, I’m asking for help pointing me to a similar project from which I could learn. I have the game in HTML/CSS/JS, but am trying to translate that to a Hype project. My setup is essentially an input field for the number guessed, a submit button, and a text line to display the outcome of the guess. Thanks.

2

This one seems close...

https://photics.com/free-template-tuesday-5-tumult-hype-pythagorean/

It uses sliders for inputs, but that could be changed to a text field. It doesn't even use a submit button. The project updates when the number changes.

This one is similar too...

https://photics.com/free-template-tuesday-12-tumult-hype-passcode/

...it's reminiscent of an old 8-BIT video game password system. Anyone who can read JavaScript can easily pick that lock. It's not meant to be secure. Video game codes are put on T-Shirts. In other words, that template is not meant for securing sensitive information. It's just a VERY minor deterrent. If that sounds like a match for your game, then maybe the template can be helpful.

3

I will have a look. Much appreciated.

4

Not sure how to pass variables in Hype. I put the random number in scene load and the rest of the action in the Submit Guess button function. They don’t seem to be talking with one another. Suggestions? GMN.hype.zip (24.2 KB)

5

The myNumber variable is scoped to the pickRandom() function and therefore would not be exposed outside of it.

Hype uses standard javascript, so you could use a global variable instead by adding it to the window scope like:

window.myNumber = Math.floor(Math.random() * 10 + 1);

And using it in solveIt() like:

if (yourGuess == window.myNumber) {

This is global to the whole page; sometimes the better recommendation is to scope it to the hypeDocument object so it won't interfere with anything else on the page. This code would instead look like:

hypeDocument.customData.myNumber = Math.floor(Math.random() * 10 + 1);

if (yourGuess == hypeDocument.customData.myNumber) {
2 Likes
6

By window or page you mean document or scene, no? I see that I can run a JS function On Scene Load, but don’t see how to run a function when the document loads.

7

JavaScript has an object called window which is basically where all globals for the entire webpage frame go. This variable would then be exposed to everything for that specific URL load instance.

The code example shows how to adjust your existing code to use that, using the current on scene load function. Since you only have a single scene, the On Scene Load is effectively an on document load.

You could also add code like this to a <script> tag in the Head HTML. There are also ways to hook into the hype document load in the documentation examples event, but this isn't exposed in Hype's UI.

The second way to do it with the hypeDocument.customData requires access to the hypeDocument object, and is most useful in cases where you don't control the page or might have multiple hype animations on the same page and need to avoid conflicts of writing over global data.

8

Window object. Okay, thanks Jonathan, that works (attached GMN.hype.zip (31.7 KB)). How do I reset the game (clear the input field, pick a new random number, reset the number of guesses to 1)? Refreshing the screen works, but seems ham-fisted.

I appreciate your patience and I realize this is trivial in HTML/JS. However, I like how Hype will let me throw a pinned group around the scene and solve a responsive issue that will crop up with more complex input/output user interactions later on.

1 Like
9

You may want to think about restructuring your code -- currently you have a solveIt() function that is run On Scene Load, on click for the submit button, and on click for the rest button.

Instead, you may want to divide it into two functions - one that resets values (run on scene load and reset), and another that checks values (on click of submit). Your reset would just look like:

window.myNumber = Math.floor(Math.random() * 10 + 1);
window.guess = 1;
hypeDocument.getElementById("guessField").value = "";

Then the check can just run the onclick code:

var yourGuess = hypeDocument.getElementById("guessField").value;
if (yourGuess == window.myNumber) {
	alert ("You guessed it in " + window.guess + " tries.");  
}
else if (yourGuess >window.myNumber)  {
	window.guess++;
	alert ("Too large, try a smaller number");  
}
else {
	window.guess++;
	alert ("Too small, try a larger number")   

}
10

Perfect! Thank you, kindly. GMN2.hype.zip (340.3 KB)

1 Like
11

Awesome - glad you got it. Now I want cheese!