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.
HTML5 Deck of Cards
51–60 of 165 posts
Re: HTML5 Deck of Cards
#52Earlier 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
plus
i/13|undefined
Re: HTML5 Deck of Cards
#53There's one card face missing. That's the back! A nice card back might be a more difficult challenge to do in HTML5.
It's done in CSS3 + JS, so it should be pretty easy. https://desandro.github.io/3dtransforms/examples/card-01.htm... #card.flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); }
He means drawing the complex decorative design on the back of most cards.
Re: HTML5 Deck of Cards
#54What? No 52 pick up? ;-)
Re: HTML5 Deck of Cards
#55There's one card face missing. That's the back! A nice card back might be a more difficult challenge to do in HTML5.
It's done in CSS3 + JS, so it should be pretty easy. https://desandro.github.io/3dtransforms/examples/card-01.htm... #card.flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); }
Sure but implementing the card back image is more difficult, which is what I think the parent post was getting at, rather than the flipping itself. The rest of the page is implemented without any images, which is neat; you'd have to work some SVG magic or something to create e.g. a Bicycle-esque card back without loading an image.
Re: HTML5 Deck of Cards
#56Earlier 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…
ECMAScript 2016 adds Math.trunc()[0] which should give the same value as | 0 for inputs that fit in 32 bits.
Re: HTML5 Deck of Cards
#57[deleted]
Re: HTML5 Deck of Cards
#58There's one card face missing. That's the back! A nice card back might be a more difficult challenge to do in HTML5.
The two joker card are also missing for it to be a complete deck.
Re: HTML5 Deck of Cards
#59Maybe 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.
Why not just i % 4?
Re: HTML5 Deck of Cards
#60Earlier quoted context omitted.
It exists in other languages, too, like PHP.
You can do this in PHP, but you shouldn't. Use (int), like C.
It is not much worse than using it in javascript. People do this in js because it saves a few keystrokes and its faster, not that it matters. Its a small thing. Its dirtier, for sure.
I just tested it in PHP and it seems it is 20% faster in PHP compared to casting to int. Maybe someone out there will have a weird use case for that, or someone doesn't want to put more effort into writing code into terminal and doesn't care about his code being unreadable. I think its useful to know it exists.
Btw, do you or someone else know why its faster in php too? Its a bitwise operation and I assume under the hood its casting to int, its weird to have it faster than casting it to int, why does this happen? It makes sense in javascript to that its faster than functions, but why it is faster than a cast in PHP?