在一小时内开发网络游戏

在一小时内开发网络游戏MichaelOneppo下载代码示例您无需使用全新的技能集来开发游戏。事实上，HTML、JavaScript和CSS等中的当前Web开发技能广泛适用于各种游戏。在使用Web技术制作游戏时，它几乎可以在带有浏览器的所有设备上运行。为了证明这一点，我将演示如何使用Web技术和两个外部库在不到一小时的时间内从零开始制作一个游戏。我将介绍各种游戏开发主题，从基本设计和布局、控件和子画面到简单对手的人工智能(AI)。我甚至要开发可在PC、平板电脑和智能手机上运行的游戏。如果您对作为Web开发人员编程或其他开发领域有一些体验，但没有编写游戏的经验，本文将帮助您入门。请给我一小时，我一定向您展示相关窍门。启动并运行我将在VisualStudio中进行所有的开发工作，这将会允许随着我所进行的修改而快速执行Web应用。确保您安装的是最新版本的VisualStudio（下载地址bit.ly/1xEjEnX），那么您可以继续。我使用的是VisualStudio2013Pro，但是VisualStudio2013Community中更新了代码。此应用无需任何服务器代码，因此我首先在VisualStudio中新建空的网页项目。选择“文件”|“新建”|“ASP.NET空白网站”后，选择VisualC#选项即可为网站使用空白的C#模板。索引HTML文件仅需要以下三种资源：jQuery、主样式表和主JavaScript文件。在加载网页时，我将一个空的CSS文件添加到名称为style.css的项目和一个名称为ping.js的空JavaScript文件以避免错误：复制!DOCTYPEhtmlhtmlheadscriptsrc==ping.js/scriptlinkrel=stylesheethref=style.css/script/headbody/body/html基本设计我制作的游戏是我称作Ping的Pong的变体。除了有一点不同之外（当球击向任一个玩家时，该玩家会抓住球，然后直接把球回击回去，或者按照一定的角度向上或向下击球），Ping和Pong在本质上具有相同的规则。通常，在制作游戏之前，最好绘制一下您预期的游戏外观。对于此游戏，我想要看到的整体布局显示在图1中。图1Ping的整体设计开发游戏设计布局后，剩下需要做的就是向HTML中添加每个元素以制作游戏。但需要注意的是，我将计分板和控件组合到一起，以确保它们并排出现。那么，如您所见，我已经逐个添加了相应元素（如图2中所示）。图2初始HTML布局复制divid=arenadivid=scoreh1spanid=playerScore0/span-spanid=opponentScore0/span/h1/divdivid=player/divdivid=opponent/divdivid=ball/divdivid=controls-leftdivid=up/divdivid=down/div/divdivid=controls-rightdivid=left/divdivid=right/div/div/div设置样式如果您要加载此页面，则看不到任何内容，因为没有应用任何样式。我已经创建一个指向我的HTML中的main.css文件的链接，因此我可以将所有CSS存放到含有该名称的新文件。我要做的第一件事情是定位屏幕上所有内容。页面的主体需要占据整个屏幕，因此我首先对其进行设置：复制body{margin:0px;height:100%;}其次，我需要让竞技场充满整个屏幕，将竞技场背景图像应用到整个屏幕（请参见图3）：复制#arena{background-image:url(arena.png);background-size:100%100%;margin:0px;width:100%;height:100%;overflow:hidden;}图3竞技场背景图像接下来，我将设置计分板的位置。我希望计分板显示在顶部中心，位于其他元素之上。命令位置：绝对可以让我将其放到我想要的任何位置，左侧：50%，将其放到窗口顶部一半的位置，但是从计分板元素的最左侧开始放置。若要使其完全居中，我会使用转换属性和Z-索引属性来确保其始终位于顶部：复制#score{position:absolute;z-index:1000;left:50%;top:5%;transform:translate(-50%,0%);}我还希望文本字体具有复古风。大部分新型浏览器可允许我添加我自己的字体。我从codeman38(zone38.net)中发现适当的PressStart2P字体。若要向计分板添加该字体，我必须创建新的字体：复制@font-face{font-family:'PressStart2P';src:url('PressStart2P.woff');}现在，分数位于h1标记中，因此我可以为所有h1标记设置字体。为了防止该字体缺失，我将提供几个备用选项：复制h1{font-family:'PressStart2P','Georgia',serif;}对于其他元素，我将使用图像的子画面表单。在一个文件中，子画面表单包含该游戏所需的所有图像（请参见图4）。图4Ping的子画面表单含有此表单上的图像的所有元素都含有指定的sprite类。然后，对于每个元素，我将使用背景定位来定义我要显示的子画面表单的部分：复制.sprite{background-image:url(sprites.png);width:128px;height:128px;}接下来，我将向使用该sprite类的所有元素添加该类。我需要暂时跳转回HTML以执行此操作：复制divid=playerclass=sprite/divdivid=opponentclass=sprite/divdivid=ballclass=sprite/divdivid=controls-leftdivid=upclass=sprite/divdivid=downclass=sprite/div/divdivid=controls-rightdivid=leftclass=sprite/divdivid=rightclass=sprite/div/div现在，我需要在每一个元素的表单上指出每个子画面的位置。同样，我可以使用背景定位来执行此操作，如图5中所示。图5为子画面表单添加偏移值复制#player{position:absolute;background-position:0px128px;}#opponent{position:absolute;background-position:0px0px;}#ball{position:absolute;background-position:128px128px;}#right{background-position:64px192px;}#left{background-position:64px0px;}#down{background-position:128px192px;}#up{background-position:128px0px;}位置：玩家、对手和球的绝对属性可以让我通过JavaScript来移动它们。如果您现在查看该页面，您将发现有一些不必要的东西附加在这些控件和球上。这是因为子画面尺寸小于默认的128像素，所以我将它们调整到适当的尺寸。由于只有一个球，因此我将直接设置其尺寸：复制#ball{position:absolute;width:64px;height:64px;background-position:128px128px;}因为有四个控件元素（用户可以按下以移动玩家的按钮），所以我理应为它们创建一个特殊类。我还将添加边距，以便让它们周围有一点空间：复制.control{margin:16px;width:64px;height:64px;}添加此类后，游戏的控件看上去更加不错：复制divid=controls-leftdivid=upclass=spritecontrol/divdivid=downclass=spritecontrol/div/divdivid=controls-rightdivid=leftclass=spritecontrol/divdivid=rightclass=spritecontrol/div/div我需要做的最后一件事情是定位控件，以便于在移动设备上运行该页面时，这些控件在用户的手指范围内。我将它们放到底部角落中：复制#controls-left{position:absolute;left:0;bottom:0;}#controls-right{position:absolute;right:0;bottom:0;}此设计的一大优点在于所有东西的位置都是相对的。这意味着，尽管屏幕可以有各种不同的尺寸，但游戏看上去始终良好。追逐跳动的球现在我要让球来回移动。对于JavaScript代码，我将引用HTML中名为ping.js的文件，就像我使用CSS执行的操作一样。我将此代码添加到含有该名称的新文件。我打算为该球和每个玩家创建对象，但是我将使用适用于这些对象的工厂模式。这是一个简单的概念。当您调用Ball函数时，它会新建一个球。无需使用新关键字。通过清晰化可用的对象属性，此模式会减少有关此变量的混乱。而且，由于我只有一个小时的时间来制作此游戏，因此我需要最大程度地减少概念的混乱。当我构建简单的Ball类时，此模式的结构如图6中所示。图6Ball类复制varBall=function({//Listofvariablesonlytheobjectcansee(privatevariables).varvelocity=[0,0];varposition=[0,0];varelement=$('#ball');varpaused=false;//Methodthatmovestheballbasedonitsvelocity.Thismethodisonlyused//internallyandwillnotbemadeaccessibleoutsideoftheobject.functionmove(t){}//Updatethestateoftheball,whichfornowjustchecks//iftheplayispausedandmovestheballifitisnot.//Thisfunctionwillbeprovidedasamethodontheobject.functionupdate(t){//Firstthemotionoftheballishandledif(!paused){move(t);}}//Pausetheballmotion.functionpause(){paused=true;}//Starttheballmotion.functionstart(){paused=false;}//NowexplicitlysetwhatconsumersoftheBallobjectcanuse.//Rightnowthiswilljustbetheabilitytoupdatethestateoftheball,//andstartandstopthemotionoftheball.return{update:update,pause:pause,start:start}若要制作一