css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Snakes and Ladders is an ancient Indian board game regarded today as a worldwide classic.

This is a multiplayer version (1-4 players) developed using HTML and CSS without any JavaScript. It is based on the idea of using radio-buttons, and labels to activate the radios, making the pieces move only using CSS positioning.

Older versions: - One-player version: https://codepen.io/alvaromontoro/pen/ejzJBJ - Simplified two-player version: https://codepen.io/alvaromontoro/details/zLNdZQ/

Comments

  1. Awesome thing is with "no JavaScript" ! Loved it

  2. So, I'm really likeing the Spot-light Help tips for how thw game works, can you describe that alone in a bit more detail. First time I've seen this that type of control. I would also like to be able to turn the spot-light on/off based on tool selection somehow as well. Look like all the spotlight locating is edge based though, is there a method for locating the spot-light location based on content and page flow?

    Really nice effect.

  3. Incredible! How do you handle the turn switching and randomization?

  4. Wow, loved this project!

  5. @brandonmcconnell Thanks!

    The turn switching is done with 4 radio buttons (one for each possible player). All the labels for those radio buttons overlap but only one is visible depending on the current player (if active player is 1, visible label will be for player 2, etc.)

    The dice is not really random as there is a pattern to it. It is a set of 6 overlapped labels that change z-index using CSS animations. It just happens fast enough for a normal human not to be able to be precise (they rotate every 0.1s). You can actually see the dice animation better on this other version of the game: https://codepen.io/alvaromontoro/pen/OwwQMm

  6. @blammo Thank you!

    The spotlight is done with a div that adapts its size to the one of the element that is going to be highlighted and then has a HUGE box-shadow (2 times the screen size, so if the spotlighted element is on a corner, it will still cover the whole screen).

    For this particular demo, it is all done in CSS, with the text in the content of a pseudo-element; but it would definitely be better to develop it on JavaScript (that way it would be possible to pass an element identifier, and the spotlight would detect the size and position automatically instead of hardcoding it as I did).

  7. This should be a PWA, then I can play it offline.

  8. @bhargavgv You can download the compiled code and save it on a .html file. It will work offline (only the sounds may not work, but they are not really needed).

  9. @blammo I created a small JS plugin for the spotlight. It is more generic than the one on this pen and it still needs improvements (e.g. right now if the user scrolls/resize the window, the spotlight is lost), but it could be useful for apps with a fixed viewframe. You can see it here: https://codepen.io/alvaromontoro/pen/bjQYLM

  10. Geez, I was just getting ready to ask you nicely about setting something like this up. I don't even get a chance to use my skills of persuasion. :c) Thanks for sending it along. I'm looking at a use for providing some tool explanations for this web app: pwgeo.org

  11. Great job!

    How long did it take you to do?

  12. @jotavejv Thanks!

    It took me longer than what I wanted (around 10 days), but only working on it here and there. And I already had some experience from a previous version (although this one was created from scratch to make it more generic).

  13. This is the most astonishing piece of code I've seen at least during last few month. Great job! And really makes the point about these kind of games.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...