Live data from Hacker News

HTML5 Deck of Cards

pakastin.github.io

81–90 of 165 posts

Re: HTML5 Deck of Cards

#81
post #68

There's one card face missing. That's the back! A nice card back might be a more difficult challenge to do in HTML5.

I had the same thought. You could practice magic tricks if you could flip over the deck and then shuffle and fan it! "Pick a card, any card!"

This would only work for a very small subset of card tricks.

It would be difficult to practice sleight of hand.

Re: HTML5 Deck of Cards

#82

Earlier quoted context omitted.

Yes, but it is 18% faster do run the bitwise or on my machine: https://jsperf.com/or-vs-floor/2

i/13|undefined works too

That's just adding another conversion from undefined to Number to Int32 for the right operand. You could probably use false as well. Or the empty string.

Re: HTML5 Deck of Cards

#83
post #59

Earlier quoted context omitted.

Why not just i % 4?

that would alternate the suit for each card, and all the aces would be the same suit, etc.

If you also take the cards modulo 13 for their face, this approach works.

4 and 13 are relatively prime, so each number between 1 and 52 can be uniquely represented by the function (x) -> (x%13, x%4).

Re: HTML5 Deck of Cards

#84

Earlier quoted context omitted.

Yes, but it is 18% faster do run the bitwise or on my machine: https://jsperf.com/or-vs-floor/2

Its because they don't do the same thing Math.floor() favors the number equal to/less than the parameter, Math.floor(-15.5) is -16 while (-15.5 | 0) is -15 Also because the returned value is int32[0], Math.floor(2147483648.5) is 2147483648 while (2147483648.5 | 0) is -2147483648 You are fine if you know the input is less than (2^31) + 1 and you want to truncate, rather than floor. [0]: http://www.ecma-international.o…

Hmm, pretty sure floor rounds a number downward to its nearest integer. So Math.floor(-15.5) would be 15.

https://developer.mozilla.org/pt-PT/docs/Web/JavaScript/Refe...

Re: HTML5 Deck of Cards

#88
post #51

What's so HTML5 about this?

As far as I can tell, it uses 2d transforms, which are usually considered part of HTML5. The animation would probably be a bit jerkier and slower if done with absolute positioning instead.

Yeah, translates and transitions.. Both are CSS3

Re: HTML5 Deck of Cards

#89

Maybe it's a weird takeaway, but this line is really clever: var suit = i / 13 | 0; That's such a clean way to get a 0, 1, 2 or 3 from each card's `i` and I never would have thought of it.

Putting aside whether this sort of thing is clever and clean or occult and confusing, another pattern of the same ilk is:

  ~~(i/13)

Re: HTML5 Deck of Cards

#90
post #84

Earlier quoted context omitted.

Its because they don't do the same thing Math.floor() favors the number equal to/less than the parameter, Math.floor(-15.5) is -16 while (-15.5 | 0) is -15 Also because the returned value is int32[0], Math.floor(2147483648.5) is 2147483648 while (2147483648.5 | 0) is -2147483648 You are fine if you know the input is less than (2^31) + 1 and you want to truncate, rather than floor. [0]: http://www.ecma-international.o…

Hmm, pretty sure floor rounds a number downward to its nearest integer. So Math.floor(-15.5) would be 15. https://developer.mozilla.org/pt-PT/docs/Web/JavaScript/Refe...

Nope. Math.floor(-15.5) would be -16. It rounds a number downwards. -16 < -15.
Post reply on HN