#Can't wrap my head around anime js (possibly js in general)

4 messages · Page 1 of 1 (latest)

cinder scaffoldBOT
#

@left quiver

Jernemies Uploaded Some Code

So I'm doing an assignment where I'm supposed to create a memory game with a minimum of 8 cards, using bootstrap, javascript, jQuery, anime.js, and maybe a little bit of angular thrown in (though we barely got to scratch the surface on angular). I've got the cards and shuffling logic done, I can hide the color of the cards, and they change color and rotate correctly when clicked - once. Unfortunately when I reset their color back to gray, they no longer respond to clicks. In some iterations of the code I've managed to make the color of the cards to reactivate, but never the rotation. Unfortunately I've gone through many iterations of the same code and I'm not sure if I've made progress in the last 4 hours.

It's possible this is partially a javascript issue, as I did my programming basics on C#, while the rest of the group did javascript, so I may be missing the small technical details. This is basically the second step after programming basics.

Probably the biggest issue I've got is that I can't seem to troubleshoot the logic I want for the pair checks. As said, I've gone through many iterations. The one I'm on right now involves 4 variables, one for each pair, with a 5th one being the sum of the other 4. When an user clicks a specific card, the code checks for the right pair, adds one to the correct variable. When sum reaches 2, it checks if any other variables have reached 2. If yes, it removes the cards from the pool, if not, it resets everything and animates everything back to grey. Right now it does nothing, usually it lets more than 2 through before resetting (and running into the animation issue), and at best It's managed to remove one pair in total. That iteration is lost though.

TL;DR: Animations don't repeat per click, and logic doesn't seem to work properly. It's "homework", or a final assignment for the course.

Attachment: style.css
.kortti {
    height: 220px;
    width: 180px;
    border-radius: 5px;
    border: 2px solid black;
}


/* #Nappi{
    position:absolute;
} */
#kortit{
    display:none;
}
Uploaded these files to a Gist

js.js
Loppu.html

View The Gist

For safety reasons we do not allow file attachments.
left quiver
#

Bumping this. I should also note that in ```$(".kortti").click(function(e) {
++klik;
interaktio(e, puna, sini, kelta, purp);
});````
Anything after interaktio() doesn't seem to execute. In fact, even inside the function, after the first 4 if-elses (i've also tried a switch case function with the same result), the later if-elses don't seem to execute either, or I'm not passing the variables correctly to the function. Adding anim.play in 3 of the 4 card flipping animations solves the problem for 3 cards, but as soon as I add it to all 4, it suddenly stops doing the undo function, where the cards flip back to grey

left quiver
#

Okay I finally solved it. I'm not exactly sure what I did correctly, but I did. I put the reset animation in its own variable and managed to make it restart properly. Pair checks now happen before checking for clicks, which seems to solve that problem

glass vale
#

Good job!