CSS - Test Your CSS Skills Number 32 - animation

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) :slight_smile:

I actually solved it by eye anyway but it was still very tricky - Good work :slight_smile:

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. :smiley:
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?

The 1px jump is the 1px border in action :smiley:

ill await your programmatic solution in the meanwhile :slight_smile:

Here’s Timo’s JS version:

http://www.pmob.co.uk/maze/entries/maze.js.html

Thanks Paul for hosting it.

I tried to reduce its laggyness to a minimum and made the links hover state permanent, so that you don’t have to worry about touching the walls. :smiley:

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:

http://www.geekcavecreations.com/css_maze.php?rows=30&cols=50

Edit:

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.

Timo, that maze is AWESOME!

I can’t believe you managed to crash so many browser with nothing but a piddly amount of HTML/CSS. Good job :smiley:

Thanks ryanhellyer, you compliments are always welcome. :smiley:

also I made another little animation demo that was inspired by Dave:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Minesweeper: YuriKolovsky</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
#container {
	position:relative;
	margin:20px;
	border:solid #000 3px;
	overflow:auto;
	width:270px;/*30 x 9*/
}
#container div {
	float:left;
	height:28px;
	width:28px;
	background:#c0c0c0;
	border:solid #999 1px;
	border-top-color:#fff;
	border-left-color:#fff;
	border-bottom-color:#808080;
	border-right-color:#808080;
	line-height:28px;
	font-weight:bold;
	text-align:center;
}
#container div:hover {
	border-color:#c0c0c0;
}
#container div, 
#container div b,
#container div i,
#container div u {
	color:#c0c0c0;
}
#container div:hover b {/*b stands for blue*/
	color:blue;
}
#container div:hover i {
	color:green;
	font-style:normal;
}
#container div:hover u {
	color:red;
	text-decoration:none;
}
#container div:hover s {
	position:absolute;
	width:270px;
	height:270px;
	top:0;
	left:0;
	background:red;
	color:#000;
	text-decoration: none;
}
s:hover:after {
	content:"ine blew up, and you died a gruesome *_* DEATH *_*";
}
</style>

</head>
<body>
<h1>Mindsweeper</h1>
<p>A CSS minesweeper</p>
<p><a href="http://www.geekcavecreations.com/css_animation.php">Inspired By Dave Morton</a> Created by Timo H</p>
<p>Memory, remember the sections and find every mine, a mine can't appear before a number, so be careful when passing numbers.</p>
<div id="container">
<div> </div><div><i>2</i></div><div><s>m</s></div><div><u>3</u></div><div><b>1</b></div><div> </div><div><b>1</b></div><div><s>m</s></div><div><b>1</b></div>
<div> </div><div><i>2</i></div><div><s>m</s></div><div><s>m</s></div><div><b>1</b></div><div> </div><div><i>2</i></div><div><i>2</i></div><div><i>2</i></div>
<div> </div><div><b>1</b></div><div><u>3</u></div><div><u>3</u></div><div><i>2</i></div><div> </div><div><b>1</b></div><div><s>m</s></div><div><b>1</b></div>
<div> </div><div> </div><div><b>1</b></div><div><s>m</s></div><div><b>1</b></div><div> </div><div><b>1</b></div><div><b>1</b></div><div><b>1</b></div>
<div> </div><div> </div><div><i>2</i></div><div><i>2</i></div><div><i>2</i></div><div> </div><div> </div><div> </div><div> </div>
<div> </div><div> </div><div><b>1</b></div><div><s>m</s></div><div><i>2</i></div><div><b>1</b></div><div> </div><div> </div><div> </div>
<div> </div><div> </div><div><b>1</b></div><div><i>2</i></div><div><s>m</s></div><div><b>1</b></div><div> </div><div><b>1</b></div><div><b>1</b></div>
<div> </div><div><b>1</b></div><div><b>1</b></div><div><i>2</i></div><div><b>1</b></div><div><b>1</b></div><div> </div><div><b>1</b></div><div><s>m</s></div>
<div> </div><div><b>1</b></div><div><s>m</s></div><div><b>1</b></div><div> </div><div> </div><div> </div><div><b>1</b></div><div><b>1</b></div>
</div>
</body>
</html> 

I Love It!!! :D:D:D

I have to say that I don’t feel myself creative or knowledgeable enough to od this… but what a great way to start 2010! Good luck guys :smiley:

I thought id post this one too, its the same thing but clickable instead of hover, can’t really figure out how to have multiple clicks though. :confused:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Minesweeper: YuriKolovsky</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
#container {
	position:relative;
	margin:20px;
	border:solid #000 3px;
	overflow:hidden;
	width:270px;/*30 x 9*/
}
#container a {
	display:block;
	float:left;
	height:28px;
	width:28px;
	background:#c0c0c0;
	border:solid #999 1px;
	border-top-color:#fff;
	border-left-color:#fff;
	border-bottom-color:#808080;
	border-right-color:#808080;
	line-height:28px;
	font-weight:bold;
	text-align:center;
}
#container a:focus {
	border-color:#c0c0c0;
	outline:none;
	cursor:default;
}
#container a,
#container a b,
#container a i,
#container a u {
	color:#c0c0c0;
}
#container a:focus b {/*b stands for blue*/
	color:blue;
}
#container a:focus i {
	color:green;
	font-style:normal;
}
#container a:focus u {
	color:red;
	text-decoration:none;
}
#container a:focus s {
	position:absolute;
	width:270px;
	height:270px;
	top:0;
	left:0;
	background:red;
	text-decoration: none;
	color:#000;
}
#container a:focus s:after {
	content:"ine blew up, and you died a gruesome *_* DEATH *_*";
}

</style>

</head>
<body>
<h1>Mindsweeper</h1>
<p>A CSS minesweeper</p>
<p><a href="http://www.geekcavecreations.com/css_animation.php">Inspired By Dave Morton</a> Created by Timo H</p>
<p>Memory, remember the sections and find every mine, a mine can't appear before a number, so be careful when passing numbers.</p>
<div id="container">
<a href="#void"> </a><a href="#void"><i>2</i></a><a href="#mine"><s>m</s></a><a href="#void"><u>3</u></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#mine"><s>m</s></a><a href="#void"><b>1</b></a>
<a href="#void"> </a><a href="#void"><i>2</i></a><a href="#mine"><s>m</s></a><a href="#mine"><s>m</s></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"><i>2</i></a><a href="#void"><i>2</i></a><a href="#void"><i>2</i></a>
<a href="#void"> </a><a href="#void"><b>1</b></a><a href="#void"><u>3</u></a><a href="#void"><u>3</u></a><a href="#void"><i>2</i></a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#mine"><s>m</s></a><a href="#void"><b>1</b></a>
<a href="#void"> </a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#mine"><s>m</s></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#void"><b>1</b></a><a href="#void"><b>1</b></a>
<a href="#void"> </a><a href="#void"> </a><a href="#void"><i>2</i></a><a href="#void"><i>2</i></a><a href="#void"><i>2</i></a><a href="#void"> </a><a href="#void"> </a><a href="#void"> </a><a href="#void"> </a>
<a href="#void"> </a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#mine"><s>m</s></a><a href="#void"><i>2</i></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"> </a><a href="#void"> </a>
<a href="#void"> </a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#void"><i>2</i></a><a href="#mine"><s>m</s></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#void"><b>1</b></a>
<a href="#void"> </a><a href="#void"><b>1</b></a><a href="#void"><b>1</b></a><a href="#void"><i>2</i></a><a href="#void"><b>1</b></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#mine"><s>m</s></a>
<a href="#void"> </a><a href="#void"><b>1</b></a><a href="#mine"><s>m</s></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"> </a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#void"><b>1</b></a>
</div>
</body>
</html>

What about mouse3, or shift-click?

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.

Good work - I’m liking these demos :slight_smile:

Dave that maze creation is good also.

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.

No haven’t seen it, thanks for pointing me at it, ill have a look.

Here’s something simple i cooked up in 2004. That’s why i posted the direct link instead of the full code. (with Paul’s’ permission)

Hover over the ladies face to see the effect.

Thanks for all entries so far :slight_smile:

Any one else have any ideas or working on anything?

It doesn’t have to be that complicated so don’t be over-awed by Timos version.

I have a couple more ideas If I get time to work on them :wink: