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.
Related
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.
I am trying to create simple animation on "click" event in JavaScript library called TweenJs (part of CreateJs suite), but it seems that animation updates the display only the first time when I click on the rectangle. After animation is over for the first time, on every next click it seems that code is running, but the display stands still (or doesn't update). You can see in the console that it logs start and the end of animation.
Can someone please help me and explain what is the problem with my code, and also, in general is this the right approach to use stage.update() ?
Here is my code:
https://codepen.io/milan_d/pen/rNaJEKY?editors=1111
Thank you very much!
The issue is that once you rotate it, it is already rotated to the angle you specify in subsequent clicks.
An easy solution is to just add a zero-duration to() call when you click it that resets it.
createjs.Tween.get(square)
.to({rotation:0}) // This one has no duration, so it is immediate
.to({rotation:360},3000)
.call(squareRotationComplete);
Another option is to always rotate it based on the initial tween
createjs.Tween.get(square)
.to({rotation:square.rotation + 360},3000)
.call(squareRotationComplete);
Lastly, you could use the RelativePlugin. First install it, and then just use "+360" in your to() call.
createjs.RelativePlugin.install(); // Run once
createjs.Tween.get(square)
.to({rotation:"+360"},3000) // Note the value.
.call(squareRotationComplete);
Cheers!
I am working with the skrollr plugin.
I have a set of arrows. One points down and the other up. When you click the down arrow it takes you to the next section/chapter of the animation. Right now it works great. But my issues is lets say the user does the following:
He/she scrolls half way through the page(lets say section 5). They then decided to see how much of the animation is left. So they click the next section arrow.
This user will be put to section 2 even though they are at section 5 because I have no way to detect when the user hits each section so I can update the arrow #hrefAnchor.
What I was thinking is adding an interval/ event listener that would detect when the section is visible on the DOM and update the arrows to take you to the previous and next sections.
Does anyone know how I can approach this idea?... and will work in ie >= 9
If you're willing to modify the Skrollr library, something I had done was add:
else if(prop === 'javascript') {
eval(val);
}
as an option in skrollr.setStyle which allows then for you to add a hook for arbitrary JavaScript code on elements like each section here using data-XXX="javascript:myFunction();" and I believe Skrollr will even still interpolate numbers in your arguments for you.
If you have control of what gets executed when "next" is clicked, can you check the scroll value at that time to determine which section it is between and switch on that to send them to the appropriate section? Essentially, rather than trying to keep the target current at all times which is wasteful/difficult/error prone, just calculate it when it matters - when the click occurs.
If you give your element a class like "visible", you could select all the visible elements by using jQuery:
$(".element.visible:last-of-type").on("click", function() {
});
Sorry I am new to javascript. I just wanted to know can I make a javascript function for a check-box. When the user checks the check-box it will show the loading screen for 1 or 2 seconds.
Concept i looking for :
http://hibbard.eu/blog/pages/block_ui_with_jquery/
Use the JavaScript setTimeout property. Call a function to show the cover, then, after 2 seconds, fun another function to remove it.
JSFiddle Here.
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.