 |
A portfolio is a must-have for any designer or developer who wants to stake their claim on the Web. It should be as unique as possible, and with a bit of HTML, CSS and JavaScript, you could have a one-of-a-kind portfolio that capably represents you to potential clients. In this article, I’ll show you how I created my 2-D Web-based game portfolio.
The 2-D Web-based game portfolio of Daniel Sternlicht.
Before getting down to business, let’s talk about portfolios.
A portfolio is a great tool for Web designers and developers to show off their skills. As with any project, spend some time learning to develop a portfolio and doing a little research on what’s going on in the Web design industry, so that the portfolio presents you as an up to date, innovative and inspiring person. All the while, keep in mind that going with the flow isn’t necessarily the best way to stand out from the crowd.
One last thing before we dive into the mystery of my Web-based game portfolio. I use jQuery which has made my life much easier by speeding up development and keeping my code clean and simple.
Now, let’s get our hands dirty with some code.
The HTML
Let’s warm up with a quick overview of some very basic HTML code. It’s a bit long, I know, but let’s take it step by step.
<div id="wrapper">
<hgroup id="myInfo">
<h1>DANIEL STERNLICHT</h1>
<h2>Web Designer, Front-End Developer</h2>
</hgroup>
<div id="startCave" class="cave"></div>
<div id="startCaveHole" class="caveHole"></div>
<div id="mainRoad" class="road"></div>
<div id="leftFence"></div>
<div id="rightFence"></div>
<div id="daniel"></div>
<div id="aboutRoad" class="road side"></div>
<div id="aboutHouse" class="house">
<div class="door"></div>
<div class=�lightbox�>…</div>
</div>
<div id="aboutSign" class="sign">
<span>About Me</span>
</div>
…
…
<div id="rightTrees" class="trees"></div>
<div id="leftGrass" class="grass"></div>
<div id="endSea" class="sea"></div>
<div id="endBridge" class="bridge"></div>
<div id="boat" class="isMoored">
<div class="meSail"></div>
</div>
</div>
The HTML is not very complicated, and I could have used an HTML5 canvas element for this game, but I felt more comfortable using simple HTML DOM elements.
Basically, we have the main #wrapper div, which contains the game’s elements, most of which are represented as div elements (I chose divs because they are easy to manipulate).
Have a quick look at my game. Can you detect what makes up the game view?
The game view
We have roads, trees, fences, water, caves, houses and so on.
Back to our HTML. You’ll find an element for each of these items, with the relevant class and ID. Which brings us to the CSS.
The CSS
First of all, note that I prepared the HTML to follow the principles of object-oriented CSS by determining global classes for styling, and not using IDs as styling hooks. For example, I used the class .road on each element that should look like a road. The CSS for the .road class would be:
.road {
position: absolute;
background: url(images/road.png) repeat;
}
Take trees as another example:
.trees {
position: absolute;
background: url(images/tree.png) repeat 0 0;
}
Note that almost all of the elements are absolutely positioned on the game’s canvas. Positioning the elements relatively would be impossible for our purposes, especially because we want the game to be as responsive as possible (within limits, of course — the minimum width that I deal with is 640 pixels). We can write a general rule giving all of the DOM elements in the game an absolute position:
#wrapper * {
position: absolute;
}
This snippet will handle all of the child elements inside the #wrapper div, and it frees us from having to repeat code.
One more word about the CSS. The animations in the game are done with CSS3 transitions and animations, excluding certain features such the lightboxes and player “teleporting.� There are two reasons for this.
The first is that one of the purposes of this portfolio is to demonstrate innovation and up-to-date development, and what’s more innovative than using the power of CSS3?
The second reason is performance. Upon reading Richard Bradshaw’s very interesting article “Using CSS3 Transitions, Transforms and Animation,� I came to the overwhelming conclusion: use CSS3 when you can.
A great example of the power of CSS3 animations in my portfolio is the pattern of movement of the water. The CSS looks like this:
.sea {
left: 0;
width: 100%;
height: 800px;
background: url(images/sea.png) repeat 0 0;
-webkit-animation: seamove 6s linear infinite; /* Webkit support */
-moz-animation: seamove 6s linear infinite; /* Firefox support */
animation: seamove 6s linear infinite; /* Future browsers support */
}
And here is the code for the animation itself:
/* Webkit support */
@-webkit-keyframes seamove {
0% {
background-position: 0 0;
}
100% {
background-position: 65px 0;
}
}
@-moz-keyframes seamove {…} /* Firefox support */
@-keyframes seamove {…} /* Future browsers support */
The sea PNG is marked out.
The repeating sea.png image is 65 pixels wide, so to give the sea a waving effect, we should move it by the same number of pixels. Because the background is repeating, it gives us the effect we want.
Another cool example of CSS3 animations happens when the player steps into the boat and sails off the screen.
The boat sails off the screen, revealing the “Contact� section.
If the player gets back onto the road, you’ll notice that the boat moves in “reverse,� back to its original position. It sounds complicated, but you have no idea how easy it is with CSS3 transitions. All I did was capture the event with JavaScript to determine whether the user is “on board.� If the user is, then we add the class .sail to the boat element, which make it sail off; otherwise, we withhold this class. At the same time, we add a .show class to the #contact wrapper, which smoothly reveals the contact form in the water. The CSS of the boat looks like this:
#boat {
position: absolute;
bottom: 500px;
left: 50%;
margin-left: -210px;
width: 420px;
height: 194px;
background: url(images/boat.png) no-repeat center;
-webkit-transition: all 5s linear 1.5s;
-moz-transition: all 5s linear 1.5s;
transition: all 5s linear 1.5s;
}
When we add the class .sail to it, all I’m doing is changing its left property.
#boat.sail {
left: -20%;
}
The same goes for the #contact wrapper with the class .show. Except here, I’m playing with the opacity property:
#contact.show {
opacity: 1;
}
CSS3 transitions do the rest of the work.
The JavaScript
Because we are dealing with a 2-D game, we might want to base it on a JavaScript game engine, perhaps an existing framework. But the thing about frameworks (excluding jQuery, which I’m using as a base) is that they are usually good for a head start, but they probably won’t fit your needs in the long run.
A good example is the lightboxes in my portfolio, which provide information about me and are activated when the user enters a house.
