I am building a grid that will be playing sounds in HTML5/Javascript, and essentially I want it to keep repeating by looping through so I set:
window.setInterval(playMusic,INTERVAL);
This works all good and fine so far, but its when I try to add setTimeout events on each column:
function playMusic(){
for(var i=0;i<GRID_SIZE;i++){
setTimeout(playCol(i),INTERVAL/GRID_SIZE*i);
}
}
The reason I do it this way is so that from left to right it will play the sounds one after the other in increments. In the developer console I can see the individual timer events firing at the right times, but the sounds aren't being played. Then at the end of the interval all the sounds play at the same time. So there is something I'm not understanding about why each beep isn't playing one after the other like I want it to. Does setInterval stop the code from each timeout being run until the end of the interval? If so is there some work around for this where I can get the beeps to play at the right times?
You could make your playMusic a recursive function having your counter outside:
var i = 0;
function playMusic(){
if( i < GRID_SIZE ){
playCol(i);
i++;
setTimeout( playMusic, INTERVAL/GRID_SIZE );
}
}
Doing this way the playMusic() function will keep calling itself until the if condition is false. The i variable is updated and will be used to select a different sound for your playCol function.
Related
I have a question on how to stop the timer in a "find the pair" game, built in javascript for a school project.
While trying to look for help online I noticed other javascript projects for a similar game.
However, the ones I found had more use of CSS functionalities, while the one I am trying to finish has practically all the functionalities built in javascript.
To give a description, there is a board (6x8) with random logos, let's call them 'cards'.
The game starts and all the cards are sorted randomly and then hidden.
For 60 seconds all the cards remain in the same position while the player tries to match them.
After that time, only the cards that have not been paired are sorted again, and the player will have to try to pair them again.
One of the things that the code must do is to stop the time when all the cards are correctly paired, i.e. when the game is finished.
Below there is the last version of the code made to end the game.
The function tempo() is supposed to define the time.
The temporizador is the time progress bar.
The contador is the variable used to count the time.
function tempo(){ //function that controls our time progress bar, uses 60 seconds (maxCount) for its cycle
let contador=0;
let maxCount=60;
temporizador=null;
if (temporizador != null) clearInterval(temporizador)
else
temporizador=setInterval(()=>{
contador++;
document.getElementById("time").value=contador;
if(contador===maxCount-5)document.getElementById("time").classList.add("warning"); //when it takes 5 seconds to end the 60 seconds
if(contador===maxCount) { //in the time bar, you can see the bar in red, blinking
clearInterval(temporizador);
document.getElementById("time").classList.remove("warning"); //when cycle finished the red blinking stops
scramblerEscondidas(); //and the function scramblerEscondidas() to sort the unmatched pairs, is executed
}
},1000)
for (let i=0; i<6; i++) { //cycle to iterate the rows of the board
for(let j=0; j<8; j++){ //cycle to iterate the columns of the board
if (game.board[i][j].virada=true) tempo.stop(); //'virada' is a property of each card of the board, if true it displays the logo. defined in the 'const' for the card
game.sounds.win.play();
}
}
}
The last cycle for in this function is supposed to check if all the cards are turned to the player, meaning the game is finished.
It is supposed to stop the time (the progress in the time bar) when this happens, but the timer doesn't stop.
Sorry for my noobness. Can anyone give any tips on how to find a solution for this?
I also tried different approaches but I fear they all used the same logic, which is likely faulty.
Any simple tip would help as I just recently started using javascript.
I didn't see what are you trying to do with these code.
But I got your point in stopping the timer.
To make a timer stop, you just have to make a boolean variable called isHaveWinner set it with with default false value.
Then wrap your counter function with
if (!isHaveWinner) {
...your timer iteration
}
In your game logic, if the game finished set the isHaveWinner to true. So your timer won't run no more
I have been developing a memory game and it working perfect. I wanted to add a life function in the game where after each wrong match , the player loses one of the hearts on the screen . I have attached the image below:
What i have achieved till now is, when i make the first unmatch, the life decrease by one but after that there is no decrease in life. I have attached the snippet code below :
function unmatched() {
openedCards[0].classList.add("unmatched");
openedCards[1].classList.add("unmatched");
life();
}
function life(){
for(let i=0; i<5; i++) {
if(i=4) {
starElementsArray[i].style.opacity = 0.1;
}
}
}
In the above code, when the function unmatch is executed it checks for the life function where the life is inside the array and i m reducing the opacity of one heart. when i make the first unmatch, it works , but after that I could not reduce the opacity of other hearts one by one. I m kin of stuck in this iteration part. Can someone help me fix this .
The issue is that because you define your life in the function, every time you call the life() function, its like resetting your life... and then looping.. continuously till i=4 and then decreasing opacity of square 4.
You need to store life outside the function and then you dont need to loop at all.. just reduce
var currentLife = 4;
function life(){
starElementsArray[currentLife].style.opacity = 0.1;
currentLife--;
if(currentLife < 0){
// do whatever happens when they run out of life because it continuously decreases as life() is ran
}
}
I'm going to recommend utilizing setTimeout() to invoke once the user gets a wrong answer and reset it when they get it right.
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
I'm using p5js to program an animation with a timer countdown. I set my timer up to be updated each frame within an object that is being animated by the draw() function in sketch. Because of this, setInterval() will not work for what I'm trying to do.
I thought I could use the frameRate and a frame counter to decide if a second has passed:
this.updateTimer = function(){
this.framecounter++;
if(this.framecounter > frameRate()){
this.framecounter = 0;
//increment seconds
}
}
Is this reliable? I tested it against an actual timer and it seems to be about 1 second ahead after about 15 seconds. Is there a better way to do this by calling a function each frame? Thanks!
Why don't you just use the frameCount variable? More info is available in the reference.
You could also use the millis() function instead. Again, the reference is your best friend.
If you still can't get it working, please post a MCVE (or better yet, a CodePen or JSFiddle) that we can run to see the problem.
I am trying to create a timer to limit the amount of time a player can use their jetpack in my phaser game. I've been following this(http://www.joshmorony.com/how-to-create-an-accurate-timer-for-phaser-games/) but I can't get anything to work. Is there a better way to implement this?
var use_jetpack;
jetpack_timer = game.time.events.add(
Phaser.Timer.SECOND * 1 /*change the 1 to however many seconds you want*/,
end_jetpack /*runs the function end_jetpack*/,
this);
function end_jetpack(){
use_jetpack = false;
//if you want a cool down, put it here. follow what was done in line 3.
}
if(use_jetpack){
//player can use jetpack
}else{
//player cannot use jetpack
}
Try this. I don't know what you couldn't get to work, but this is what my implementation would be. Of course you would need to put functions in update(), and the variable wherever you put those. This is just a quick demo. Also I had odd formatting for teaching purposes.
I'm making a simple game and I'm having a problem where after minimizing the window for a few seconds, upon return the game runs at twice the framerate, and even more after that, adding 60 each time. My game loop looks like this:
function disp(){
update();
draw();
requestAnimationFrame(disp);
}
requestAnimationFrame(disp);
With both update and draw not including requestAnimationFrame. I have tried this on both firefox and chrome with the same results. Any ideas why this is happening? I've used this same method tons of times and this is the first time this has ever happened.
EDIT: You can find a fiddle of it at http://jsfiddle.net/5ttGs/
It's really simple so far as this kinda paused my progress. Click it a couple times and enjoy 10000+FPS gameplay
Fixed the problem with the help of cocco. Basically the onclick event called the disp function every time the canvas was clicked. Because the disp function had a requestAnimationFrame frame in it, it called it twice as much every second, resulting in the influx of frames. In order to fix I simply got rid of the disp in
canvas.addEventListener
function mouse_up() {
var matches = 0;
var overlap = 69;
mouse.up = false;
console.log("clicked", mouse.x,mouse.y);
disp();
}
You can find the result here: http://jsfiddle.net/5ttGs/