Three.js scene not reacting while program is running - javascript

three.js r114
What happens is that I want to create a playfield field for field.
When a button is pressed, a new playfield shall be created.
That works.
Before the new playfield is created, the old one has to be deleted.
Then the new playfield shall be created with a little delay after every single part of the field.
I tried a lot to make every change directly visible but there are no changes visible while the program is running.
First I try to make the playfield- object3d invisible so I call the method to do so. The field stays visible.
sample code:
function make_invisible(){
playfield.visible = false;
}
make_invisible();
The field stays visible.
If I return directly after calling that method so my program ends/ class is left, I can see the playfield.
function make_invisible(){
playfield.visible = false;
}
make_invisible();
return;
The field goes invisible.
Same with creating the playfield in two simple for- loops ( row/line).
I take a little delay after every part of the playfield that I add to the group which was previously added to the scene so that every second or so a new part of the playfield should show up on screen.
Here I have the same effect, the playfield is shown completely when the script ends but not after the single parts are inserted.
I hope that sounds familiar to some people.
Thanks in advance.

Related

How to create and use buttons in Spark AR (for Facebook)?

I'm working on a simple AR effect for Facebook in Spark AR studio using JavaScript. I have two 3D objects in the scene and I want to switch between them on button click.
So, for example, I have two buttons, and when I click on the first button I want to show the first 3D object (and hide another one). And vice versa - when I click on the second button I want to show the second 3D object and hide the first one.
I can see some examples of how can I access the object in the scene through the script, but I didn't find yet an example of how to create or use buttons in Spark AR.
Is there any easy "drag-and-drop" way to create a button and assign a function to it (like in Unity)? Or should I create an image of the button on the canvas in the scene, use JavaScript to "find" it, detect if the finger touch was made over this image and trigger a function this way?
There is no easy "drag-and-drop" way to create a button and assign a function to it.
You will need to create an image of the button on the canvas in the scene, use Javascript to "find" it, detect if the finger touch was made over this image and trigger a function this way. Here is example code:
var Scene = require('Scene');
var TouchGestures = require('TouchGestures');
var myBtn = Scene.root.find('button');
TouchGestures.onTap(myBtn).subscribe(function() {
//do stuff here
});
Also do not forget to enable the Tap Gesture in your project capabilities settings.
There is also the Native UI Picker that you can make use of:
https://developers.facebook.com/docs/ar-studio/docs/native-ui
(I'm not sure if this was available at the time the question was posted, I'm new to the game)
This is more "drag-and-drop" in that you don't have to create and place the buttons, just assign textures to fill them in, and then you can write a script to do whatever you want when the user selects a button.

Clear page data without reloading page?

I have a simple game that produces a random number and takes a user input where the user attempts to guess the number, and the code appends each user guess to a list so they know which numbers they've guessed. There is also a "new game" (.new) link up top that the user can hit at any time to start over. Currently I have the following js:
/*--- Reset game ---*/
$(".new").click(function() {
location.reload();
});
While this works, I would prefer to change the operation so that the page doesn't need to refresh, but rather resets the code to the beginning (i.e. produces a new random number, clears the list items, etc.)
Not sure how to go about doing this. Any Ideas?
Have a function that builds the random number and the call it every time new game is clicked.
So for example have a function called generateRandomNumber() and use it the following way:
/*--- Reset game ---*/
$(".new").click(function() {
generateRandomNumber(); //Function to start everything from the beginning
});
You could have a list, and when user checks their guess, add an element to the list. For the new, just get all the li elements from the list and remove them.
Two buttons, new and check, and two click events. I've made a quick sketch:
https://codepen.io/anon/pen/oxVKJB
You could complete it with the random number generation, validation and stuff.

Adobe Animate CC - Reused Button Not Working HTML5

I am having an issue with reusing the same button within an HTML5 canvas. The button needs to be reused over the course of several separate frames as well as several times within the same frame.
The button works correctly with the first use:
this.button_13.addEventListener("click", fl_ClickToGoToAndStopAtFrame_24.bind(this));
function fl_ClickToGoToAndStopAtFrame_24()
{
this.gotoAndStop(72);
}
At frame 72, I reuse the same button symbol with a new instance name. Unfortunately, this button does not work:
this.button_14.addEventListener("click", fl_ClickToGoToAndStopAtFrame_25.bind(this));
function fl_ClickToGoToAndStopAtFrame_25()
{
this.gotoAndStop(78);
}
Clicking this second button shows the button states, but will not advance the user to frame 78.
*If the 2nd button exists on the timeline for frame 72 only, it is not present in the published result at all. If the 2nd button exists on frame 72-77, the button is present but not functional.
Any ideas?
Try to do this
this.button_13.removeEventListener("click", fl_ClickToGoToAndStopAtFrame_24.bind(this));
before creating the second event listener.
You have two options here.
Put your separate button instances on different layers.
Create one button instance on its own layer, have a script set the button's visible property (true/false) as needed, and modify your click handler to react based on the value of this.currentFrame.
Animate CC (2015.2 for me at the time of this writing) seems to generate its HTML 5 script output with animation in mind. When you have like object instances on multiple frames on the same layer, instead of creating a new instance of that object, it re-purposes the instance from a prior frame.
e.g. I create a dynamic text box named "myText" on frame 1. On frame 2, I create another dynamic text box and name it "myOtherText". When I publish and look at the script, the script calls Tween.to() first to place the "myText" object on the canvas and give it its appearance and position, then chains another .to() call to make myText look like myOtherText. Under the hood, myOtherText simply doesn't exist.
Creating another layer forces Animate to create the instances explicitly in CreateJS. However, if you have a lot of buttons, that could end up making a ton of layers and making your timeline look messy. I'd recommend option 1 if you only have a couple button instances, but for the latter case, option 2 may be the way to go.
Create a new layer. Name it whatever you want, like "button layer".
This layer will have only one keyframe.
Place your button instance on this layer. For continuity's sake, let's name it button_13.
Bind a tick handler to the root MovieClip (i.e. this) to handle whether the button should appear or not.
var tickHandler = function () {
switch (this.currentFrame) {
//Add case statements for each frame you want the button to appear on
//Remember, frame indexes in CJS are 0-based!
case 12: case 13:
this.button_13.visible = true;
break;
default:
this.button_13.visible = false;
}
}.bind(this);
this.removeEventListener('tick', tickHandler); //Make sure not to double-bind
this.addEventListener('tick', tickHandler);
Bind a click handler to the button that will gotoAndStop on a frame dependent on the current frame.
var clickHandler = function () {
switch (this.currentFrame) {
//Add case statements for each frame that should have a jump
//Remember, frame indexes in CJS are 0-based!
case 12:
this.gotoAndStop(72);
break;
case 13:
this.gotoAndStop(78);
break;
}
}.bind(this) //Proxy the handler, as done above.
this.button_13.removeEventListener('click', tickHandler); //Make sure not to double-bind
this.button_13.addEventListener('click', tickHandler);
Place both of those scripts onto frame 1 of your movie.
I haven't tested this myself as presented, but it should accomplish what you're looking for.
The solution is to move the instance on another layer. In that way, two different instances can be used in different images with different scripts and different names.

Ending a reaction game Javascript

Here is the related link: http://jsbin.com/cebisoqovo/edit?html,output
I just started on code learning and recently created a game called Reaction Tester with my limited knowledge. However, I am faced with a minor problem at the end.
Question:
So whenever there is random square or circle shown, all you have to do is click and the time taken to click & the point will be shown on the right side. However, I do not know how to set the ending time of the game and it just keeps continuously popping out the shapes. I have the try again and result (under css) set as display:none in order to only have these popped out at the end of the game. However, i do not know how to end it. Please help! Thank you!
p/s: There was something wrong with the insertion of code directly here. If it's okay for you, please go to the jsbin link and copy the code and paste on your respective application to have a better look at it since jsbin isn't really showing it clearly. Sorry for the inconvenience.
create a global variable named gameRunning, set it to true. create a timeout function set for 30 seconds that sets gameRunning to false. In your function that creates shapes, first check if gameRunning is true. If gameRunning is true, then create shapes as normal. If gameRunning is false, then do nothing.
^ the above solution works, but you would get 1 last box created after the game has ended because of the way boxes are created.
https://jsfiddle.net/vmo5x2vz/3/
After working with it for a while, I found a different and better way of doing it for your particular situation.
I create a global variable named makeBoxTO, the 'TO' meaning timeout.
var makeBoxTO;
Then I assign the timeout found in makeBox() to this makeBoxTO variable. This is so that we can refer to that timeout outside of the makeBox() function.
makeBoxTO = setTimeout(function()...
Then I set a 10 second timer to end the game.
setTimeout(function(){
clearTimeout(makeBoxTO);
document.getElementById("Box").style.display = "none";
alert('game over');
},10000);
It clears our makeBox timeout, hides any box's on screen, and lets the user know the game is over.

jQuery/JavaScript program breaks after completion number is changed

In a spelling game I have created there is a grid that is populated with words. The aim of the game is to spell the words by clicking on the letters on the side, which animate into the empty spaces in the grid. Words are highlighted if they are to be spelt, so the user can see where to go next. The aim of the game is to spell the required amount of words in the grid to complete the game. I usually set this to two, but have just changed it to 3 and the program keeps breaking after I spell the second word.
if (score.right == 3) {
................
................
}
Usually when you spell a word correctly I use a "click.trigger" function to move to the next highlighted word in the grid. At the moment after 2 correct ones the program either just doesn't go onto the next one or goes back to the last one and doesn't allow you to click the letters.
setTimeout(function() {
jQuery('.next-question').trigger('click');
}, 1500);
I have tried to go through with break points but cannot seem to find the issue. Can someone help me to get it working again and tell me where I was going wrong?
At the moment in my game there is no hint pictures or hint sounds so to find the highlighted word you have to use the console. Try answering two right then it will crash.
Here is a fiddle for the broken one: http://jsfiddle.net/smilburn/Dxxmh/101/
Here is a fidddle to a previous one that worked fine: http://jsfiddle.net/smilburn/Dxxmh/100/ (some class names may have changed)
First thing. The images dont show in the new version because for their links, you're using relative path which doesnt exist as far as jsfiddle is concerned. The earlier one uses absolute links. Same thing goes for the audio files.
Next thing, at the beginning you have var definitions like
var hintPic = $("#hintPic")[0];
This statement returns the first element from the set as a plain DOM element. So later when you're trying to show it
hintPic.show();
It wont work because 'show' is a jquery function. Remove the [0]'s from the variable definitions and it should work just fine.

Categories

Resources