Develop A One-Of-A-Kind CSS / JS-Based Game Portfolio

Advertisement

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.

Daniel Sternlicht Portfolio.
The 2-D Web-based game portfolio of Daniel Sternlicht1.

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 canvas2 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 game3. Can you detect what makes up the game view?

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 CSS4 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 Animation5,” 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 */

Sea.png6
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.

Boat sails7
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.

An example of a lightbox in the game8
An example of a lightbox in the game. (Large image9)

This kind of functionality doesn’t exist in a regular JavaScript game engine. You could always improve an existing framework with your own code, but diving into someone else’s code sometimes takes longer than writing your own. Moreover, if you rewrite someone else’s code, it could become a problem when a new version is released.

After passing over libraries such as Crafty10, LimeJS11 and Impact12, which really are great game engine frameworks, I felt I had no choice but to build my own engine to fit my needs.

Let’s quickly review the main methods that I’m running in the game.

To handle the keyboard arrow events, I use the following code:

$(window).unbind('keydown').bind('keydown', function(event) {
    switch (event.keyCode) {
        event.preventDefault();
        case 37: // Move Left
            me.moveX(me.leftPos - 5, 'left');
        break;

        case 39: // Move Right
            me.moveX(me.leftPos + 5, 'right');
        break;

        case 38: // Move Up
            me.moveY(me.topPos - 5, 'up');
        break;

        case 40: // Move Down
            me.moveY(me.topPos + 5, 'down');
        break;
    }
});

As you can see, the code is very simple. When the user presses the up or down arrow, I call the moveY() function, and when they press right or left, I call moveX().

A quick peek at one of them reveals all the magic:

moveX: function(x, dir) {
    var player = this.player;
    var canMove = this.canImove(x, null);
    if(canMove){
        this.leftPos = x;
        player.animate({'left': x + 'px'}, 10);
    }
    if(dir == 'left') {
        this.startMoving('left', 2);
    }
    else {
        this.startMoving('right', 3);
    }
}

At each step the player takes, I check with a special method named canImove() (i.e. “Can I move?”) to determine whether the character may move over the game canvas. This method include screen boundaries, house positions, road limits and so on, and it gets two variables, including the x and y coordinates of where I want the player to move to. In our example, if I wanted the player to move left, I’d pass to the method their current left position plus 5 pixels. If I wanted them to move right, I’d pass its current position minus 5 pixels.

If the character “can move,” I return true, and the character keeps moving; or else, I return false, and the character remains in their current position.

Note that in the moveX() method, I’m also checking the direction in which the user wants to go, and then I call a method named startMoving():

if(dir == 'left') {
   this.startMoving('left', 2);
}
else {
   this.startMoving('right', 3);
}

You’re probably wondering how the walking effect on the character is achieved. You might have noticed that I’m using CSS sprites. But how do I activate them? It’s actually quite simple, with the help of a jQuery plugin called Spritely13. This amazing plugin enables you to animate CSS sprites simply by calling the method on the relevant element and passing it your properties (such as the number of frames).

Back to our startMoving() method:

startMoving: function(dir, state) {
   player.addClass(dir);
   player.sprite({fps: 9, no_of_frames: 3}).spState(state);
}

I simply add a direction class to the player element (which sets the relevant sprite image), and then call the sprite() method from Spritely’s API.

Because we are dealing with the Web, I figured that being able to move with the keyboard arrows would not be enough. You always have to think of the user, your client, who might not have time to hang out in your world. That is why I added both a navigation bar and an option to “teleport” the character to a given point in the game — again, using the canImove() method to check whether the player may move to this point.

Next we’ve got the lightboxes. Recall what the HTML looks like for each house:

<div id="aboutHouse" class="house">
   <div class="door"></div>
   <div class="lightbox">
      <div class="inner about">
         Lightbox content goes here…
      </div>
   </div>
</div>

Did you notice the .lightbox class in the house div? We will use it later. What I basically did was define a “hot spot” for each house. When the player gets to one of those hot spots, the JavaScript activates the lightboxInit(elm) method, which also gets the relevant house’s ID. This method is very simple:

lightboxInit:  function(elm) {
   // Get the relevant content
   var content = $(elm).find('.lightbox').html();

   // Create the lightbox
   $('<div id="dark"></div>').appendTo('body').fadeIn();
   $('<div id="lightbox">' + content + '<span id="closeLB">x</span></div>').insertAfter("#dark").delay(1000).fadeIn();
}

First, I get the relevant content by finding the div.lightbox child of the house element. Then, I create and fade in a blank div, named dark, which gives me the dark background. Finally, I create another div, fill it up with the content (which I had already stored in a variable), and insert it right after the dark background. Clicking the “x” will call another method that fades out the lightbox and removes it from the DOM.

One good practice that I unfortunately learned the hard way is to keep the code as dynamic as possible. Write your code in such a way that if you add more content to the portfolio in future, the code will support it.

Conclusion

As you can see, developing a 2-D Web-based game is fun and not too complicated a task at all. But before rushing to develop your own game portfolio, consider that it doesn’t suit everyone. If your users don’t have any idea what HTML5 is or why IE 5.5 isn’t the “best browser ever,” then your effort will be a waste of time, and perhaps this kind of portfolio would alienate them. Which is bad.

Nevertheless, I learned a lot from this development process and I highly recommend, whatever kind of portfolio you choose, that you invest a few days in developing your own one of a kind portfolio.

(al)

Footnotes

  1. 1 http://danielsternlicht.com
  2. 2 http://sixrevisions.com/html/canvas-element/
  3. 3 http://danielsternlicht.com
  4. 4 http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
  5. 5 http://css3.bradshawenterprises.com/
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2012/04/3.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2012/04/4.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2012/04/5.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2012/04/5.png
  10. 10 http://craftyjs.com/
  11. 11 http://www.limejs.com/
  12. 12 http://impactjs.com/
  13. 13 http://www.spritely.net/

↑ Back to topShare on Twitter

Daniel Sternlicht is a Front End Developer based on Israel who has also a great passion for UX and Web Design. He specializes in CSS3, HTML5, and JavaScript. In his free time you'll find him exploring new web technologies, developing cool web apps and make his wife happy... Portfolio | Blog | Twitter

Advertising
  1. 1

    A good way to show off your JavaScript and CSS3 skills. Very original, too.

    I’d argue, though, that having ripped sprites (they are recognizably Pokémon FireRed / LeafGreen sprites) is a very bad idea. They are not of your own design, and it is your own design skills that you specifically want to show off. And it’s not exactly legal, which, seeing as you would use these assets to get more clients (and subsequently earn money), could be a bad idea.

    0
    • 2

      Daniel Sternlicht

      May 29, 2012 4:30 am

      You are totally right Joeri.

      However, the main idea of this portfolio was to show clients a creative thinking and Front End skills. Regarding web design, I do have the showcase of my recent works for this. So I think it covers all.

      0
      • 3

        It doesn’t matter what the “main idea” is, what you’ve done is illegal. You cannot steal art assets from a game company and use them without permission. It’s only a matter of time before you get slapped with a DMCA takedown notice, or worse: a lawsuit.

        0
        • 4

          I agree that he should have made his own graphics to make the thing seem more polished and unique. This is kind of arguable on both sides though.

          If Daniel was a game graphic designer, it would be unheard of to use someone else’s game art for your portfolio, but in all reality, he is simply a web designer/developer. The whole point of the site is to show his development skills and showcase his design portfolio, of which neither relate to the game graphics.

          On another note, I highly doubt Nintendo would come after a web developer for using their graphics on his site. You could argue that because of the nature of the site, it will generate revenue by gaining more work for him, but honestly Nintendo has bigger fish to fry. If they were going to be that way about it, they would shut down any fan website that uses Pokemon graphics and has banner ads that generate revenue.

          So once again, I agree that it would have been a more wise decision to create his own graphics, but I don’t think it’s a big enough deal that anybody really cares.

          0
          • 5

            Rizqi Djamaluddin

            May 29, 2012 5:03 pm

            I would argue that it’s less about if Nintendo would come after a website, and more about setting best practices. Smashing Magazine has a wide audience, and we certainly don’t want less experienced or less knowledgable designers thinking they can simply take other company’s art for their websites.

            0
          • 6

            I think it’s an incredibly big deal. If I was a potential client this would be a huge red flag. It tells me a few things. Either the developer doesn’t know international copyright law, or they don’t care about being law abiding in their work. It also tells me that this is someone who cuts corners, and is likely to be dishonest about their sources.

            I wouldn’t hire this person, because I wouldn’t know if they were breaking copyright law on my project. Clearly they either don’t know, or don’t care. So, why would they know or care when doing my site? And if they don’t care, then where are they going to cut corners on my project? I also wouldn’t trust them to with access to my company’s intellectual property, because they have shown that they don’t respect copyright law.

            A portfolio is how you “sell” yourself to your peers and your clients. This portfolio might be interesting, and the code might be good. But it sells the idea that this person isn’t trustworthy, and isn’t going to act in a way that is in the best interest of their clients.

            0
        • 7

          You’re just jealous. All real artists, crafts people, musicians, etc. copy each other, including and especially the most unique. This is a truism since the beginning of time. Taking a small aspect of a work or basing an idea from an aspect or aspects of another artist is part of art. Modern copyright law is extremely overblown and set in the best interest of well monied corporations. Blatantly copying something wholesale is one thing, but there is clearly originality involved here. There aren’t any kind of ethics violated here by any reasonable assessment, and those who would blindly support all of the interpretations of modern copyright law have little understanding of true art.

          I find it even a bit unsettling that there would be people here who would be hostile to the author over the reuse of a sprite… in an otherwise very original idea that expands well beyond the sprite itself. Although it makes me wonder if these people are connected in some way to either copyright enforcers or Pokemon lol.

          0
          • 8

            I don’t think jealousy has anything to do with it… that was kind of an uncalled for accusation.

            Second, recognizing copyright laws and their consequences is wholly different from supporting them.

            I kind of regret starting this whole copyright thing. The comment about the sprites was meant mainly as an observation that they might not be as well suited as other assets. The copyright thing was just a bit of an offhand comment. I don’t think anyone will get in trouble with Nintendo over this, and I certainly do not believe that it’s hurting anyone. It’s simply best practice to know and work with certain laws. It’s actually what makes design such an interesting field: working with certain constraints.

            Your statement about art is true for art. Not so much for commercial products. Copying anything outright sadly does not receive an automatic green light. Most of the times there are agreements made, rights to be bought. Design should also be a form of true art, but in the consumer sense, it is not, which is both fortunate and unfortunate for a number of reasons.

            But this discussion is kind of getting out of hand, and I would like to see it go back to the topic at hand: A cool portfolio idea and it’s effects on the presentation of your work.

            And again, this idea is original and fun and innovative. Yet the execution has certain aspects that I would not have found myself implementing, one of which is the choice of sprites. I still stand by this statement.

            0
          • 9

            As someone who was sued by a copyright troll over some clipart on my web site (which I got from a site that falsely claimed it was public domain), I’m going to tell you right now that copyright concerns are not overblown.

            Getty and other stock photo agencies regularly scour the web for photos they have licensing rights to and which they believe are being used illegally. A number of owners of small web sites have gotten letters from lawyers demanding payments of $2000+ because they had some image a careless web designer used without establishing its provenance or license status.

            Whether or not borrowing art is philosophically okay, unless you have $50,000 to mount a “fair use” defense against a copyright troll, using art/photos you haven’t created or don’t have clear rights to use is something you do at your own risk. And if you hire someone to develop something for your site, you are liable to the copyright owner. You can then sue the designer on the side to try to recoup your costs of dealing with the copyright owner, but good luck collecting.

            Our copyright system may be terribly warped or even broken, but until it’s fixed, you have to follow the law or have the money to fight it.

            0
  2. 10

    It’s okay, it definitely doesn’t feel that great (especially the movement, Firefox 12) and lacks anything more then being able to move around. The style appears to be a little inconsistent as well, the character is so sharp yet his world is pretty blurry and pieces seem to be cut off (trees, fences etc). Much more of a novelty than anything else.

    0
    • 11

      I agree with Phill. I would not show this as my portfolio and I don’t think of it as an original, superior idea.

      0
  3. 12

    Ryan Bollenbach

    May 28, 2012 5:33 pm

    Wow, this turned out amazing!! I’m definitely going to try out these techniques in the future.

    0
  4. 14

    Rizqi Djamaluddin

    May 28, 2012 9:01 pm

    I personally dislike portfolios that go a bit too full-featured like this. They feel gimmicky, and often distracts from other core issues with portfolios (on this particular example, the “recent works” section lacks case studies or anything beyond “I worked on this”). It’s an interesting idea, though, which I think is best spun off into its own side-project of sorts.

    More technically, I did get a lot of jerky movement (on Chrome and a modern computer). I also saw clipping issues (such as walking around signs) and some usability issues should be sorted out, like sign tooltips should also be links directly to the sub-content.

    Overall it feels like mystery meat navigation. The graphics of varying resolution/quality and (it appears to be ripped) pokemon style doesn’t quite help. Looks like a good concept, but poorly executed. Still a good article, though, since it’s all about the concept.

    0
  5. 16

    Marco Giammetti

    May 28, 2012 11:02 pm

    For a “game” done just with DOM elements is impressive. You need to work more on the animation of the character and add some more custom made sprite! Thanks for sharing.

    0
  6. 17

    Very great work! Original idea for a portfolio… I will copy you :)

    0
  7. 19

    It’s interesting to see someone developing an original, clever technique and describing it in detail… and then how first comments start with “This is plain wrong”, “You used copyrighted sprites”, “This is maybe original but it is wrong to make a portfolio this way”, “The animation in Firefox is not 100% perfect” and so on…

    Isn’t our job (as designers and developers) also to have fun, innovate, do things no one has done before, make cool things, mistakes and experiment — especially with our personal websites?…

    Just sayin’ :-/

    0
    • 20

      Perhaps – although not at the expense of ripping off other people’s work (I’m not suggesting the author has, incidentally, but as a basic principle it’s both illegal and unethical).

      It’s up to the individual designer to decide what is best for his or her site, but I think that a discussion about the basic premise of the article is perfectly valid – especially if said designer asserts in an online web magazine that a portfolio “should be as unique as possible”.

      So, in the spirit of open discourse – this is a great demonstration of the power of HTML/CSS/JS techniques, and it’s pretty well executed. It’s a good showcase of technical skills to prospective employers or agencies who may take you on in a freelance role.

      However, it’s not so good for showing to end clients. For starters, it doesn’t work in IE8 or lower; that’s fine if only targeting agencies who will likely use the latest Webkit builds, but you’ll be excluding around 20% of your ‘real world’ prospective clients. Instead, IE8 users are directed to a horrible page effectively chastising them for not having a ‘modern’ browser.

      It foregoes many of the basic principles of usability – rather ironically for a self-proclaimed UX-designer. Mystery meat? No thanks. Partly responsive? Great – but content is ‘chopped off’ under a certain browser width (which isn’t that wide). Mouse or arrow key only nav? Not particularly good for users with limited motor abilities.

      Shouldn’t a portfolio highlight the best of what you do? I don’t doubt that the author is capable of some great work in the UX field, but his site isn’t showcasing it.

      This sort of game-approach has its place, and I’d be delighted to have something like this as part of my portfolio, but I wouldn’t (personally) choose to have it as the portfolio itself.

      0
    • 21

      I very much agree with your statement, Michel. As I said, this is one of the better ways to show that you are not only original, but also flexibel in working with dynamic web languages.

      But while design is about innovating and having fun, design is also about understanding goals and finding the, for want of a better word, ‘correct’ means to those goals. Specifically addressing the copyright issue, I’d still argue that certain means chosen to represent the portfolio (ripped sprites) are to the detrement of its goals (showing off your skills as a designer of your own original content).

      So while I love the originality and solid programming behind the portfolio, I personally would not have made the same choices for the graphic design of it all.

      0
  8. 22

    Rizqi Djamaluddin

    May 29, 2012 3:34 am

    And as a general response to the criticism: in my opinion, this article would be best brought up as an experiment, instead of a link to the author’s actual portfolio. As an experiment, we would likely be far more tolerant of the sprites, jerky motion, and incomplete content. So the concept is indeed interesting, it could just do with some implementation polish.

    0
    • 23

      Rizqi, I would love to see some of your polished work! Please provide a link and a detailed write-up of what you did to achieve it!
      thx

      0
      • 24

        Rizqi Djamaluddin

        May 29, 2012 5:08 pm

        That would probably violate the ethics of no self-promotion, and no aggressive one-upping. :)

        And if you mean that facetiously: it’s doesn’t even matter. Regardless of what I do, I don’t have to have polished work in order to criticize other people’s work as unpolished. The technical term for this is a Tu quoque. Of course, if you’re being serious, disregard this paragraph. :D

        0
  9. 25

    Steve O'Rourke

    May 29, 2012 4:00 am

    Amazing stuff!
    I guess the title is pretty ironic though.

    0
  10. 26

    For me personally, this is fun, and interesting. But would I use it for my real portfolio? No, simply because I think as much fun as it is, it does get in the way of what matters with regards to your work.

    I’m not saying it’s bad, it isn’t, it’s very very interesting. But for me, just not something I’d be using for a real world portfolio. Once you’ve visited, and gotten over the novelty, repeat visits are just going to be annoying.

    0
  11. 27

    Daniel Sternlicht

    May 29, 2012 4:25 am

    Thank you Chennai!

    0
  12. 28

    While making your resume interactive (in contrast to the usual static resumes designed for print) is a nice idea, your example, although unique and shows some nice html5/css3 features, isn’t very practical.

    For one, your resume isn’t very smooth (on my machine at least, tested on the latest stable versions of firefox and chrome on a modest machine), which creates a bad user experience. Second, an animated gif would be more suitable for the sea sprite tile. Since your sprite tile is very simple, the limitations of gif (such as limited color palette and lack of full alpha transparency) should not be a problem. Not only will the animation be smoother, it will be compatible on older browsers as well. Last, ripping off graphics from nintendo’s pokemon is just wrong. While you may easily get away with this, don’t you think making your own graphics would be a better way to show off your photoshop skills?

    Putting all that aside, it is, again, a very nice experiment, I bet it was fun to make but I wouldn’t use it for the real world just yet. I suggest placing a link to a static version especially for those who just want to keep things simple or who are using slower machines.

    P.S. By resizing the buildings, you lose the beauty of the sharpness of pixel art. Now it just looks blurry. You should really fix the cut-off sprites (such as the trees and shrubs) too. Also, you forgot to “solidify” your signs :-).

    P.P.S. You might want a bigger or more obvious close button for those lightboxes.

    0
  13. 29

    Good lord some of the commenters above need to lighten up.

    Congrats on developing something different!

    0
  14. 30

    Rizqi Djamaluddin

    May 29, 2012 5:57 am

    Aside from the previous comments; for some reason, the site simply fails to launch at all on my iPad. It just stops at the “Just a few moments” page.

    My iPhone, on the other hand, reaches the “how to play” screen, but the text is rather too small to read (even on such a high-resolution screen, I had to look really close), and zooming in removes my ability to pan. This screen doesn’t answer any of my problems, either; it just mentions a keyboard and so forth. Tapping the easily missable x on the top right actually got me into the game. It slightly worked; tapping around teleports the player character, but the menu is way too small to see (and you can’t pan it while zoomed). Moving the character while zoomed in also results in the screen jumping away from the player.

    Additionally, both took quite a moment to load, as it was a somewhat hefty 2mb in all, with over 100 requests.

    Maybe a responsive follow-up is in order? :)

    0
  15. 31

    This is SO AWESOME! Love it!
    What a great opportunity to build even more crazy, funny and creative projects!
    Guys, lets go crazy!! Are you with me?

    0
  16. 32

    Daniel, You rock!
    I’m proud to see how much you matured in this industry, how fast you learned these new skills and how effectively you are using them.
    I remember the days… :)

    0
  17. 34

    Personally I dont think is original, the graphics style have been used many times before, it took ages to load to the point that only curiosity kept the tab open, I don’t see any employeer spending so much time just waiting to see that.

    0
  18. 35

    My first reaction to this was, holy cow! How amazing that you can achieve something like this with just javascript, css3 animations and html.

    I personally find it really inspiring.. Just imagine the possibilities. Good job on this! :)

    0
  19. 36

    Alberto Villalobos

    May 29, 2012 7:36 pm

    Good as experiment, but you stole the graphics of pokemon hehe…

    0
  20. 37

    Daniel Sternlicht

    May 29, 2012 11:27 pm

    This portfolio did started as an proof of concept and this is the reason I used the graphics of Pokemon and Zelda. I do agree it may have a copyrights issues, however – The main 2 goals I had while developing this portfolio was:

    1. Generally – Inspire web developers and help them push their web development limits far beyond what they know. It worked for me..

    2. Personally – What I wanted to achieve is not the “Designer” title but the “Front end developer” who has out of the box thinking. You right, this portfolio doesn’t aim to end users – they will probably will think it’s very cool, but won’t understand the effort I put into this. It does point to employers who have a basic understanding in web development and see the potential.

    I aware the Imperfect Responsive and Mobile support and I can secretly tell you that I’m still working on the portfolio and adding more cool stuff.

    Regardless of what has been written, hope you enjoyed the article and thanks everyone for your comments! :)

    0
    • 38

      Daniel,
      I must say that this example is inspirational! Disregard the nay-sayers and continue on your development path. I’m sure all the people who were “disgusted” are right clicking and viewing source! LOL! Great work!
      P.S. Please don’t sue me for using your name without permission…

      0
  21. 39

    Excellent site. Creative, engaging and interesting. And even better, we can build upon the techniques you have used to develop your efforts!

    The comments about ‘mystery meat’ navigation made me laugh. Did you miss the large navigation bar across the top of the screen?!

    0
  22. 40

    I tried to look at the example in my iPhone and couldn’t.

    So, if you feel your clients will never look at your site with a mobile device, and you are trying to show them how you can create a non-responsive complicated interface that is so non-intuitive that it needs instructions, then this tutorial is perfect.

    0
  23. 41

    I love this 8 bits graphic :D

    0
  24. 42

    Excellent work, just a sugestion… change arrow keys to WASD to move, because in opera and safary page scroller before character walk!

    0
  25. 43

    Sorry, but this isn’t going to be one-of-a-kind anymore :)

    But seriously, this is an awesome website! I need to think of something this cool.

    0
  26. 44

    When I saw this article on the frontage I thought someone had made a CSS/JS version of Pokémon. I clicked excitedly only to be let down, but I continued to read on and I was amazed – I’ve never seen a portfolio that shows off the developer’s/designer’s skills like this does. Great job, I’m sure clients will be standing in line outside your door within a matter of days.

    0
  27. 45

    Awesome, you’ve really made the impossible obvious, great job! and the best part, without flash.

    0
  28. 46

    I loved walking through your website..
    best experience
    Good Luck a head and so nice of you for sharing this with us..

    0
  29. 47

    When I first visited the portfolio, I could swear it was a heavy HTML5 canvas work. But it’s just jQuery and CSS3 used in a clever way. I must confess I’ve felt pretty dumb when I saw the character move function. It’s not exactly rocket science, yet it’s very impressive and effective. Congratulations. Next time, just be a little more careful about how you present your works and make them public, ’cause you have a nice piece that was overshadowed by copyright issues and debates over the concept of a portfolio.

    0
  30. 48

    Daniel, nicely done. We actually did something similar with our own website. Instead of html5 we used java, ape engine, & wordpress to create a multi-player version which allows our visitors to play & speak with each other. Instead of doing the whole site we just replaced our slider with it.

    Would love to hear any feedback you guys might have. Check it out at: http://redrokk.com. Thanks!

    0
  31. 49

    Thanks, Daniel. So many tutorials are difficult for advanced beginners and this was actually do-able (with a really lot of time). I appreciated you using Pokemon because it made it less scary.

    I teach low-literacy youth and use Tupac pictures in my tutorials all the time. In this way they are inspired to create projects they would never feel they could accomplish otherwise. Of course I explain in detail why this is not “legal” and won’t let them publicly display the work.

    For the obviously well-resourced professionals on this page, yes, thank you for valuable education on copyrights; I will use it in teaching. But, remember the spirit of the law, not just the letter of it. And also, “when we’ve been there ten thousand years…” Tupac will explain it to you personally, so you might want to think of it from his perspective a bit now…

    But all the obtuse details on why it is wrong? Please remember the 99% of the world that barely has a functioning computer; who have no instructors or mentors besides us self-taught teachers; who go to public schools/inner city “charter schools” where 50% of kids don’t graduate; and where the majority of their parents are unemployed/seriously underemployed.

    0
  32. 50

    Dude! You ball so hard, other designers want to fine you!
    Way cool bro. Keep up the good work.

    0
  33. 51

    Saurabh Jinturkar

    August 24, 2012 11:16 am

    Hi Daniel,
    Thanks for this nice post. I have written a small one player game based on basic javascript and css.
    http://saurabhjinturkar.heliohost.org/saurabh/game3/2.php

    Im interested in writing multiplayer games. Can you please suggest some good frameworks/game engines which support browser to browser communication. I heard about push technology but im not very sure about it. Your help regarding the same will be appreciated.

    Thanks! :)

    -sj

    0
  34. 52

    So Goooooooood dude!

    0
  35. 53

    Looks awesome, wish i had come up with that idea. :D

    0
  36. 54

    thank you for your great post daniel! it will be more interesting if theres some bot character with a simple AI that will answer a simple question.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top