Yes post the scripted version as well as you’ve shown how to do it with css.
I quite like the fact that you can’t touch the walls in the CSS version but my mouse isn’t smooth enough to get through which is why I used the keyboard (and I didn’t want to change my mouse settings either)
I actually solved it by eye anyway but it was still very tricky - Good work
Having made hundreds of mazes in my youth (I once had a few dozen graph paper pads, all full of various types of mazes. Can’t do it any more because of my hands. :(), I can appreciate the difficulties involved in creating one programatically. However, that said, I’ve taken up the challenge, and will make that my next project. I have a simple maze script already done, that has a reasonable chance of creating a solvable maze (about 50-60%), and I’m sure that I can increase the probability to over 95%, in time. You can see it here.
The “animation” part is just a simple hover that places a smilie in the hovered div, but it’s something, at least.
I’ll post my progress with this project, as it improves.
BTW, one thing that’s giving me fits with this is the 1 pixel “jump” some of the borders are taking in random directions. There seems to be no rhyme or reason for it. Anyone have any clues as to why that is?
lol, already posted the link, but here it is again. I’m currently working on the jumping border problem, and you can see it in action. I’ve colored the borders differently, to show which border is jumping, but it doesn’t help me to figure it out. The divs are also titled, so you can see which div is the culprit (or victim, as it were, since a previous div may be poking it out). What I may have to do is reduce the size of the divs by 2 pixels in width/height, and set 1 pixel margins, then remove the margins on the opposite side of the div that the border is on. At least, that’s what I’m thinking.
Ok, I have the jumping border figured out. I did what I mentioned, but removed the margin from the same side of the border. Makes for strange looking intersections, but I can live with that. :D. I’ve also made the rows and columns adjustable. Here’s a larger example:
Please note that I still have no pathing coded in, so there will be some mazes that can’t be solved, due to complete blockades, but these are almost always within three or four squares of the entrance or exit.
As far as i know, its all the same one type of :focus!
just some open a new window and so on, but then id need to map all the possible clicks on different pages, which would work but would no longer be much about CSS.
Pretty impressive Timo. Have you had a look at the maze example that’s in ‘The art and science of Javascript’ made by James Edwards?
How he mapped out the data with four numbers makes sense for a map that size. I know that this was a css challenge so I’m not trying to minimize yours - it’s awesome. The js version is more fun to play with as you can go back and try other routes easily.