Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

HTML5 Deck of Cards

pakastin.github.io

Post reply on HN
Print view View original

111–120 of 165 posts

Re: HTML5 Deck of Cards

#111

Post by pkstn »

kenbellows wrote: post #55
adam12 wrote: post #38

Earlier quoted context omitted.

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.

I don't see any problem using couple of SVG image files for example.. The problem is that I'm not such a great drawer myself. In the first version I just used big J, Q, K like this: http://pakastin.fi/cards_2006

Re: HTML5 Deck of Cards

#112

Post by pakastin »

jameshart wrote: post #73
kenbellows wrote: post #55

Earlier quoted context omitted.

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.

http://lea.verou.me/css3patterns/ could provide a pretty good source for patterned card backs.

Thanks, that's great source!

Re: HTML5 Deck of Cards

#113

Post by pakastin »

ricket wrote: post #68
retrogradeorbit wrote: post #34

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!"

I will add flipping ;)

Only thing about is that it easily looks like crap. I mean if you don't curl & flip the card looks too solid..but I'll check it out.

Re: HTML5 Deck of Cards

#114

Post by pakastin »

esprehn wrote: post #67
thomasfoster96 wrote: post #6

Each of these cards could probably be made with one element and some CSS3 pseudo-element selectors, as opposed to the four elements (wrapper element and three child elements) that are currently used per card. Additionally, with three elements (possible just one if you're crazily good at CSS), it'd be possible to have flippable cards. Still just using CSS3. Edit: Can someone explain these downvotes for me?

Browsers implement pseudo elements using actual elements internally, there's no difference in power from using ::before or just putting a as a child. Pseudo elements will probably be a little bit slower though.

I agree. Some people rant about me using "value | 0" instead of "Math.floor(value)" and another would do "::before {content: attr(data-value..." -stuff instead of just using a good old elements..

Go figure :)

Re: HTML5 Deck of Cards

#115

Post by pakastin »

femto113 wrote: post #103
indubitably wrote: post #75

Earlier quoted context omitted.

That’s nice CSS but the HTML is so borked… why not ︎ Or something?

On the "least amount of HTML possible" theme here's a version using only "class", e.g. http://codepen.io/femto113/pen/avzWJq Doesn't include the card centers, but does have top and bottom corners. EDIT: HN doesn't seem to like unicode characters? The class should include the suit symbol.

I think I'll stick with good old elements :)

Thanks anyway, and I really appreciate true CSS ::-wizards, don't get me wrong.. ;)

Re: HTML5 Deck of Cards

#118

Post by pakastin »

kyle_u wrote: post #72

Very nice! I tried the CSS3 routes for card animations when I first built my card game ( https://solitaire.gg ), but ended up going with WebGL since the cross-browser support for CSS3 animations was so wonky.

I know the feeling..

Re: HTML5 Deck of Cards

#119

Post by pakastin »

danvesma wrote: post #37

the animation is lovely and fluid. bit of a shame that the card faces don't have the pictures for the royal cards and the usual layout of multiple suit signs on the number cards, but this is still super.

Flash version had some of those: http://pakastin.fi/cards_2006

I used 52-framed movieClip as a card, where frames were values.

And then every suit graphic was one movieClip as well with 4 frames: spade, heart, club and diamond

Worked great! Not so easy to do with HTML though. Lots of figuring out coordinates manually.

Re: HTML5 Deck of Cards

#120

Post by gcb0 »

AUmrysh wrote: post #105
AndyKelley wrote: post #63

This is similar to something my room mate is working on: https://github.com/thejoshwolfe/board-gamer-2d The user can create a JSON string that represents a game (checkers, solitare, dominion, smash up, etc). Then the engine creates cards, tokens, dice, etc. It does not enforce rules but it supports multi player and some rules about visibility to other players. Its intended use case is for testing out new games or exp…

This is actually something you can do with Tabletop Simulator on steam, as I'm using it for that exact purpose. It even uses JSON as the underlying data structure. Granted, it's proprietary and not free.

proprietary. not free. not standard web tech for use in browser. requires a DRM (with bittorrent client) spyware to be always running.

yeah, not even close i would say.

but the use of JSON is nice.

Post reply on HN