一个投资组合是任何设计师或开发谁想要放样他们在网络上的索赔必须具备的。它应该尽可能独特，HTML，CSS和JavaScript位，你可以有一对的一类组合，干练代表你的潜在客户。在这篇文章中，我会告诉你，我如何创建我的2-D基于Web的游戏组合。
2-D基于Web的游戏组合丹尼尔Sternlicht。
正事之前，让我们来谈谈关于投资组合。
一个投资组合是一个伟大的工具，Web设计者和开发，以炫耀自己的技能。正如任何项目，花一些时间学习开发的投资组合，并做了上发生了什么事情，在网页设计行业的研究很少，这样的组合表现为日期起来，创新和鼓舞人心的人。所有的同时，请记住，随大流，不一定是最好的方式脱颖而出。
最后一件事之前，我们下潜到我的基于Web的游戏组合的神秘面纱。我使用jQuery由加快发展，保持我的代码干净和简单，我的生活更容易。
现在，让我们手写一些代码。
HTML
让我们的热情，简要概述了一些非常基本的HTML代码。这是一个有点长，我知道，但是让我们一步一步。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <div id="wrapper"> <!-- Main Text --> <hgroup id="myInfo"> <h1>DANIEL STERNLICHT</h1> <h2>Web Designer, Front-End Developer</h2> </hgroup> <!-- Start Cave --> <div id="startCave" class="cave"></div> <div id="startCaveHole" class="caveHole"></div> <!-- Main Road --> <div id="mainRoad" class="road"></div> <div id="leftFence"></div> <div id="rightFence"></div> <!-- Me --> <div id="daniel"></div> <!-- Stop Station 1 --> <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> <!-- Stop Station 2 --> … <!-- Stop Station 3 --> … <!-- View --> <div id="rightTrees" class="trees"></div> <div id="leftGrass" class="grass"></div> <!-- Sea --> <div id="endSea" class="sea"></div> <div id="endBridge" class="bridge"></div> <div id="boat" class="isMoored"> <div class="meSail"></div> </div> </div> |
HTML是不是很复杂，我也可以使用HTML5的画布这个游戏的元素，但我觉得更舒适，使用简单的HTML DOM元素。
基本上，我们的主＃包装格，其中包含游戏的元素，其中大部分都是作为div元素（我选择的div，因为它们很容易操作）代表。
有快看我的比赛。你可以发现什么使游戏视图？
游戏视图
我们的道路，树木，围墙，水，溶洞，房屋等。
备份到我们的HTML。你会发现这些项目的每个元素，与相关的类和ID。这给我们带来的CSS。
CSS
首先，请注意，我准备了HTML遵循的原则，面向对象的CSS确定全球造型类，并没有使用造型挂钩的ID。例如，我使用的类。道路上的每个元素应该看起来像一条道路。为CSS 。道路类是：
1 2 3 4 | .road { position: absolute; background: url(images/road.png) repeat; } |
以树木作为另一个例子：
1 2 3 4 | .trees { position: absolute; background: url(images/tree.png) repeat 0 0; } |
请注意，几乎所有的元素绝对定位游戏的画布上。相对定位元素是不可能的，特别是因为我们的目的，我们希望是为响应（在一定限度内尽可能的游戏，当然-我处理的最小宽度是640像素）。我们可以写一个一般的规则，让所有的DOM元素在游戏中的绝对位置：
1 2 3 | #wrapper * { position: absolute; } |
这个片段会处理＃包装部内的所有子元素，它可以让我们不必重复代码。
关于CSS的一个更字。在游戏中的动画做CSS3过渡和动画，如灯箱和球员的某些功能“传送的除外。”有两个原因。
首先是，这个组合的目的之一，是展示创新和最新发展，以及什么比使用CSS3的权力，更重要的是创新？
第二个原因是性能。阅读理查德·布拉德肖非常有趣的文章“ 使用CSS3的转换，变换和动画后，“我来到了压倒性的结论：当你可以使用CSS3。
CSS3的动画在我的投资组合的力量的一个很好的例子是水的运动模式。CSS看起来像这样：
1 2 3 4 5 6 7 8 9 | .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 */ } |
这里是动画本身的代码：
1 2 3 4 5 6 7 8 9 10 11 12 | /* 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.png标示出。
重复sea.png图像是65像素宽，所以给海飘扬的效果，我们应该将它的像素数相同。因为背景是重复的，它为我们提供了我们想要的效果。
另一个很酷的例子发生CSS3的动画播放时关闭屏幕上了船，帆的步骤。
关闭屏幕上的船的帆，揭示“联系”一节。
如果球员回来的道路上，你会发现，船在移动“反向”，返回到原来的位置。这听起来很复杂，但你不知道CSS3的转变是多么容易。我所做的只是捕捉的事件，以确定用户是否是用JavaScript如果用户，那么我们的类添加“在船上。” 帆船的元素，它使航行关闭，否则，我们保留这个类。同时，我们添加一个显示类。＃接触的包装，从而顺利地揭示了在水的接触形式。该艇的CSS看起来像这样：
1 2 3 4 5 6 7 8 9 10 11 12 | #boat { position: absolute; bottom: 500px; left: 50%; margin-left: -210px; width: 420px; height: 194px; background: url(images/boat.png) no-repeat left; -webkit-transition: all 5s linear 1.5s; -moz-transition: all 5s linear 1.5s; transition: all 5s linear 1.5s; } |
当我们添加类。航行的，我做的是改变其左财产。
1 2 3 | #boat.sail { left: -20%; } |
这同样适用于＃ 接触类包装。秀。除了 ??在这里，我打的opacity属性：
1 2 3 | #contact.show { opacity: 1; } |
CSS3的过渡做剩下的工作。
JavaScript
因为我们正在处理一个2-D游戏，我们可能要立足于一个JavaScript游戏引擎，也许现有的框架。但有关框架（jQuery的，我作为基地使用的除外）的事情是，他们通常为一个良好的开端，但他们可能不适合您的需求，在长远。
一个很好的例子是在我的投资组合灯箱，提供有关我的信息和被激活，当用户进入一个房子。
例如在游戏中的灯箱。（大图）
这种功能并不存在于一个普通的JavaScript游戏引擎。你总是可以提高使用自己的代码的现有框架，但潜水到别人的代码，有时需要更长的时间比写你自己的。此外，如果你改写别人的代码，它可以成为一个新的版本发布时的问题。
如图书馆，诡计多端，LimeJS及影响，这确实是伟大的游戏引擎框架的传递后，我觉得我别无选择，只能建立自己的发动机，适合我的需要。
让我们快速回顾一下，我在游戏运行的主要方法。
来处理键盘上的箭头事件中，我使用下面的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $(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; } }); |
正如你可以看到，代码很简单。当用户按下向上或向下箭头，我呼吁的moveY（）函数，当他们按向左或向右，我呼吁Movex的（） 。
在其中一个快速偷看，发现所有的魔法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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); } } |
玩家需要在每一步，我检查一个名为特殊的方法canImove（） （即“我可以移动吗？”），以确定是否字符可能移到游戏画布。这种方法包括屏幕边界，房子的位置，道路的限制等，并得到两个变量，包括在哪里，我想球员移动到x和y坐标。在我们的例子中，如果我想向左移动的球员 ??，我想传递给该方法其目前的左侧位置，加上5个像素。如果我想让他们向右移动，我想通过其当前的位置减去5个像素。
如果字符“可以移动，”我返回 true ，字符保持移动或别的，我返回 false ，并在其当前位置的字符仍然。
请注意，在Movex的（）方法，我也检查用户希望去哪个方向，然后我打电话命名方法startMoving（）：
1 2 3 4 5 6 | if(dir == 'left') { this.startMoving('left', 2); } else { this.startMoving('right', 3); } |
你可能不知道如何实现字符的步行效果。您可能已经注意到，我使用CSS sprites。但是，我怎么激活呢？这其实很简单，与兴致称为jQuery插件的帮助。这个惊人的插件，使您只需通过调用有关元素的方法，并传递给它的属性（如帧数）CSS sprites的动画。
回到我们的startMoving（）方法：
1 2 3 4 | startMoving: function(dir, state) { player.addClass(dir); player.sprite({fps: 9, no_of_frames: 3}).spState(state); } |
我只是添加一个方向类球员元素（设置相关sprite图像），然后调用精灵（）从兴致API的方法。
因为我们正在处理与Web，我能够用键盘箭头移动是不够的。你总是要想到用户，您的客户，他们可能没有时间挂在你的世界。这就是为什么我添加了一个导航栏和选项“传送”字在游戏中的特定点-再次，使用canImove（）方法来检查玩家是否可以移动到这一点。
接下来，我们已经得到了灯箱。记得在HTML看起来像每间房子：
1 2 3 4 5 6 7 8 | <div id="aboutHouse" class="house"> <div class="door"></div> <div class="lightbox"> <div class="inner about"> Lightbox content goes here… </div> </div> </div> |
你有没有注意到的。灯箱类房子的div？我们将使用它。我基本上做的是定义一个“热点”，每间房子。当玩家获得的热点之一，在JavaScript激活lightboxInit（榆树）方法，该方法也得到了有关房子的ID。这种方法非常简单：
1 2 3 4 5 6 7 8 | 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(); } |
首先，我找到房子元素相关内容div.lightbox的孩子。然后，我创建和命名的一个空白格，黑暗，这给了我黑暗的背景中淡出。最后，我创建了另一个div，填写内容（我已经存储在一个变量），插入后，黑暗的背景是正确的。点击“X”，将调用另一个方法，变淡了灯箱和从DOM中删除。
一个很好的做法，我不幸的是学到了艰辛的道路是尽可能保持动态代码。这样一种方式，如果你添加更多的内容，在未来的投资组合，代码将支持它写在你的代码。
结论
正如你可以看到，发展一个2-D基于网络游戏的乐趣，而不是过于复杂任务。但在此之前急于开发自己的游戏组合，认为它不适合每个人。如果你的用户没有任何想法，HTML5是什么，或者为什么IE浏览器5.5是不是“最好的浏览器有史以来，”那么你的努力将是浪费时间，也许这种组合会疏远他们。这是坏的。
不过，我学到了很多，从这个发展过程中，我强烈建议，你选择什么样的组合，你投资在开发自己的一种组合之一几天。
原文：http://www.smashingmagazine.com/2012/05/28/develop-a-one-of-a-kind-cssjs-based-game-portfolio
