搜索

首页 >web前端 >js教程 >使用Visual Studio和ASP.NET在一个小时内构建网络游戏

使用Visual Studio和ASP.NET在一个小时内构建网络游戏

Christopher Nolan
Christopher Nolan原创
2025-02-19 12:35:10190浏览

使用Visual Studio和ASP.NET在一个小时内构建网络游戏

>本文是Microsoft的Web开发系列的一部分。感谢您支持使SitietPoint成为可能的合作伙伴。 本文讨论：

基本游戏发展哲学
  • 使用Web技术进行游戏开发
  • 添加游戏控件和AI
  • 讨论的技术：
    • Visual Studio 2013 Pro，Visual Studio 2013 Community，ASP.NET

>代码下载（.zip）

  • >您不需要全新的技能来开发游戏。实际上，您目前在HTML，JavaScript，CSS等方面的网络开发技能非常适合各种游戏。当您使用Web技术构建游戏时，它将在几乎所有带有浏览器的设备上运行。
    • > 为了证明这一点，我将展示使用Web Technologies和两个外部图书馆从头开始构建游戏，我将在不到一个小时的时间内完成。我将介绍从基本设计和布局，控件和精灵到简单对手的人工智能（AI）的各种游戏开发主题。我什至要开发游戏，以便在PC，平板电脑和智能手机上使用。如果您有作为Web开发人员或其他开发领域编程的经验，但是没有经验写游戏的经验，那么本文将使您入门。如果您给我一个小时，我保证会向您展示绳索。
    • 钥匙要点

快速开发：利用HTML，JavaScript和CSS中的现有Web开发技能来创建几乎任何带有浏览器的设备，使用Visual Studio和ASP.NET。

> Visual Studio作为工具：利用视觉工作室进行快速游戏开发和跨不同设备进行测试，确保兼容性和性能。

游戏设计简化：从基本的游戏设计原理和一个简单的游戏开始，例如“ ping”（乒乓变体），重点放在布局和基本游戏机制上。

>
    交互式元素：使用JavaScript和CSS进行动态游戏玩法，并合并交互式游戏控件，以确保诸如球和玩家之类的元素有效地响应用户输入。 AI集成：为对手实施基本人工智能，允许更具吸引力的单人游戏体验。
    • >跨平台兼容性：测试并确保游戏在各种浏览器和设备上的性能都很好
    • 启动并运行
    • >我将在Visual Studio中进行所有开发，这将在我进行更改时快速执行Web应用程序。请确保拥有最新版本的Visual Studio，以便您可以跟随。我使用了Visual Studio 2013 Pro，但通过Visual Studio 2013社区更新了代码。另外，如果您有Mac或Linux，则如今可以使用Visual Studio代码。

    这个应用程序将不需要服务器代码，因此我首先在Visual Studio中创建一个新的，空的网页项目。我将通过选择文件后选择“ Visual C＃”选项来使用空网站的空C＃模板。新| ASP.NET空网站。

    索引HTML文件仅需要三个资源：jQuery，主样式表和主JavaScript文件。我将一个空的CSS文件添加到名为style.css和一个空的JavaScript文件的项目中，称为ping.js，以避免加载页面时错误：

    > 
    <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><script</span> src<span>="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><script</span> src<span>="ping.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

    也不要忘记在浏览器和设备之间对此应用进行测试（或任何其他）。虽然我编写的代码与Chrome，Firefox和Microsoft Edge等现代浏览器可互操作，但这始终是双重检查的最佳实践。现在，您可以使用免费的虚拟机和其他工具（例如http://www.browserstack.com。

    基本设计

    我正在构建的游戏是我称为ping的变体。 Ping与Pong的规则基本相同，只是任何一个玩家在涉及到球时都会抓住球，然后可以直接或向上或向下倾斜或向下发射球。通常最好在构建游戏之前绘制您希望游戏的外观。对于此游戏，我想看到的整体布局如下所示。

    >

    使用Visual Studio和ASP.NET在一个小时内构建网络游戏>一旦我开发了游戏设计布局，只是将每个元素添加到HTML以构建游戏的问题。但是，要注意的一件事是，我将对记分板和控件进行分组，以确保它们坐在一起。因此，您可以一一看到我添加了这些元素，如下所示：

    > 

    <span><span><span><div</span> id<span>="arena"</span>></span>
</span>  <span><span><span><div</span> id<span>="score"</span>></span>
</span>    <span><span><span><h1</span>></span>
</span>      <span><span><span><span</span> id<span>="playerScore"</span>></span>0<span><span></span</span>></span>
</span>     <span><span><span><span</span> id<span>="opponentScore"</span>></span>0<span><span></span</span>></span>
</span>   <span><span><span></h1</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="player"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="opponent"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="ball"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>   <span><span><span><div</span> id<span>="up"</span>></span><span><span></div</span>></span>
</span>   <span><span><span><div</span> id<span>="down"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>    <span><span><span><div</span> id<span>="left"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> id<span>="right"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
    >使用样式

    播放

    如果您要加载此页面，则不会看到任何东西，因为没有应用样式。我已经在HTML中设置了指向main.css文件的链接，因此我将所有CSS放在带有该名称的新文件中。我要做的第一件事是将所有内容都放在屏幕上。页面的主体需要占用整个屏幕，因此我将首先设置：>

    >第二，我需要将竞技场填充整个屏幕，并应用了竞技场背景图像（请参见下图）：
    <span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>

    <span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>
    接下来，我将记分牌定位。我希望这在其他元素上出现顶部和中心。命令位置：绝对让我将其放置在我想要的任何地方：50％将其放在窗口顶部的一半，但从记分板元素的最左侧开始。为了确保它是完全居中的，我使用转换属性，Z-Index属性可确保它始终处于顶部：使用Visual Studio和ASP.NET在一个小时内构建网络游戏>

    我也希望文本字体以复古主题为主题。大多数现代浏览器都让我包括自己的字体。我从Codeman38（Zone38.net）找到了适当的按下2P字体。要将字体添加到计分板中，我必须创建一个新的字体脸：>
    <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><script</span> src<span>="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><script</span> src<span>="ping.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

    >现在，得分在H1标签中，因此我可以为所有H1标签设置字体。万一缺少字体，我将提供一些备份选项：

    > 
    <span><span><span><div</span> id<span>="arena"</span>></span>
</span>  <span><span><span><div</span> id<span>="score"</span>></span>
</span>    <span><span><span><h1</span>></span>
</span>      <span><span><span><span</span> id<span>="playerScore"</span>></span>0<span><span></span</span>></span>
</span>     <span><span><span><span</span> id<span>="opponentScore"</span>></span>0<span><span></span</span>></span>
</span>   <span><span><span></h1</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="player"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="opponent"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="ball"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>   <span><span><span><div</span> id<span>="up"</span>></span><span><span></div</span>></span>
</span>   <span><span><span><div</span> id<span>="down"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>    <span><span><span><div</span> id<span>="left"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> id<span>="right"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>

    对于其他元素，我将使用一张图像片。精灵表包含一个我在一个文件中所需的游戏所需的图像（请参见下图）。

    > 使用Visual Studio和ASP.NET在一个小时内构建网络游戏

    >在此表上具有图像的任何元素都将分配一个精灵类。然后，对于每个元素，我将使用背景位置来定义我要显示的精灵表的哪一部分：

    <span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>
    接下来，我将将Sprite类添加到所有将使用精灵表的元素中。我将不得不短暂地跳回HTML做到这一点：

    > 

    <span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>
    现在，我需要指示每个元素在纸板上的每个精灵的位置。同样，我将使用背景位置进行此操作：

    <span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>
    >位置：玩家，对手和球上的绝对属性将让我使用JavaScript移动它们。如果您现在查看页面，您会看到控件和球上附有不必要的作品。这是因为精灵尺寸小于默认的128像素，因此我将其调整为正确的尺寸。只有一个球，所以我将直接设置它的大小：

    <span><span>@font-face</span> {
</span>  <span>font-family: 'PressStart2P';
</span>  <span>src: <span>url('PressStart2P.woff')</span>;
</span><span>}
</span>
    >有四个控制元素（用户可以按下按钮以移动播放器的按钮），因此我应该为他们做一个特殊的课程。我还会添加一个边距，以便它们周围有一点空间：

    <span>h1 {
</span>  <span>font-family: 'PressStart2P', 'Georgia', serif;
</span><span>}
</span>
    添加此类课程后，游戏具有更好的外观控件：

    > 

    <span><span>.sprite</span> {
</span>  <span>background-image: <span>url("sprites.png")</span>;
</span>  <span>width: 128px;
</span>  <span>height: 128px;
</span><span>}
</span>
    >我需要做的最后一件事是将控件放置，以便在页面在移动设备上运行时用户的拇指。我将它们粘在底部的角落：

    <span><span><span><div</span> id<span>="player"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="opponent"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="ball"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>  <span><span><span><div</span> id<span>="up"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="down"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>  <span><span><span><div</span> id<span>="left"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="right"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
    >关于此设计的一件好事是一切都设置为具有相对位置。这意味着屏幕可能是许多不同的尺寸，同时仍然使游戏看起来不错。

    >

    遵循弹跳球

    >现在，我将球四处移动。对于JavaScript代码，就像我对CSS一样，我引用了一个名为ping.js的文件。我将此代码添加到带有该名称的新文件中。我将为球和每个球员制作对象，但是我将使用工厂模式作为对象。

    >

    这是一个简单的概念。当您调用它时，球功能会产生一个新的球。无需使用新关键字。这种模式通过阐明可用的对象属性来减少该变量周围的一些混乱。而且由于我只有一个小时来制作这个游戏，所以我需要最大程度地减少任何令人困惑的概念。

    当我完成简单的球类时，这种模式的结构：

    >

    为创建一个新的球，我只称其为已定义的此功能：>
    <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><script</span> src<span>="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><script</span> src<span>="ping.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

    >现在我想使球移动并在屏幕上弹跳。首先，我需要以某个时间间隔调用更新功能来创建球的动画。现代浏览器提供了一种用于此目的的函数，称为requestAnimationFrame。这将作为一个参数函数，并将在下次运行动画周期时称之为传递功能。当浏览器准备好进行更新时，这使球可以平稳地走动。当它调用传递功能时，它将在加载页面后将其在几秒钟内提供时间。这对于确保动画随着时间的流逝至关重要。在游戏中，requestAnimationFrame的使用如下：

    > 
    <span><span><span><div</span> id<span>="arena"</span>></span>
</span>  <span><span><span><div</span> id<span>="score"</span>></span>
</span>    <span><span><span><h1</span>></span>
</span>      <span><span><span><span</span> id<span>="playerScore"</span>></span>0<span><span></span</span>></span>
</span>     <span><span><span><span</span> id<span>="opponentScore"</span>></span>0<span><span></span</span>></span>
</span>   <span><span><span></h1</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="player"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="opponent"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="ball"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>   <span><span><span><div</span> id<span>="up"</span>></span><span><span></div</span>></span>
</span>   <span><span><span><div</span> id<span>="down"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>    <span><span><span><div</span> id<span>="left"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> id<span>="right"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>

    请注意，随着球完成更新，函数中再次调用requestAnimationFrame。这确保了连续动画。

    >虽然此代码可以正常工作，但在页面满载完整之前，脚本可能会开始运行。为了避免这种情况，我将使用jQuery：>加载页面时启动代码 

    <span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>
    因为我知道球的速度（速度）和自上次更新以来的时间，所以我可以做一些简单的物理学来向前移动球：

    <span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>
    >尝试运行代码，您会看到球以一定角度移动并从屏幕上移动。这很有趣，但是一旦球从屏幕的边缘掉下来，乐趣就会停止。因此，下一步是使球从屏幕的边缘弹起，如图7所示。添加此代码并运行该应用程序将显示一个连续弹跳的球。>

    一个可移动的播放器

    现在是时候制作播放器对象了。散开播放器类的第一步是使移动功能更改播放器的位置。侧变量将指示球员将居住的球场的哪一侧，这将决定如何水平定位球员。传递到移动函数的Y值将是播放器将移动多少或向下移动的值

    然后，我们可以布置玩家的运动，如果玩家精灵到达窗户的顶部或底部，则停止运动。>

    我现在可以创建两个玩家，并让他们移至屏幕上适当的一侧：> 
    <span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>

    键盘输入

    <span><span>@font-face</span> {
</span>  <span>font-family: 'PressStart2P';
</span>  <span>src: <span>url('PressStart2P.woff')</span>;
</span><span>}
</span>
    >因此，从理论上讲，您可以移动玩家，但是如果没有指示，它不会移动。在左侧的播放器中添加一些控件。您需要两种控制该播放器的方法：使用键盘（在PC上）并敲击控件（在平板电脑和电话上）。

    > 为了确保各种平台上的触摸输入和鼠标输入之间的一致性，我将使用出色的统一框架hand.js（handjs.codeplex.com）。首先，我将脚本添加到HTML中：

    > 
    <span>h1 {
</span>  <span>font-family: 'PressStart2P', 'Georgia', serif;
</span><span>}
</span>
    然后，当您按键盘键A和Z时，或者点击控件时，我将使用Hand.js和JQuery来控制播放器。

    <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><script</span> src<span>="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><script</span> src<span>="ping.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

    捕获球

    随着球的反弹，我想让玩家抓住球。当它被抓住时，球有一个主人，并遵循该主人的动议。我将在球的移动方法中添加功能，允许所有者，然后球将遵循：： 

    <span><span><span><div</span> id<span>="arena"</span>></span>
</span>  <span><span><span><div</span> id<span>="score"</span>></span>
</span>    <span><span><span><h1</span>></span>
</span>      <span><span><span><span</span> id<span>="playerScore"</span>></span>0<span><span></span</span>></span>
</span>     <span><span><span><span</span> id<span>="opponentScore"</span>></span>0<span><span></span</span>></span>
</span>   <span><span><span></h1</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="player"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="opponent"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="ball"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>   <span><span><span><div</span> id<span>="up"</span>></span><span><span></div</span>></span>
</span>   <span><span><span><div</span> id<span>="down"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>    <span><span><span><div</span> id<span>="left"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> id<span>="right"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
    >当前，无法获得播放器对象的位置，因此我将getPosition和getside登录器添加到播放器对象：

    > 

    <span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>
    现在，如果球有一个所有者，它将跟随周围的所有者。但是如何确定所有者？有人必须接球。让我们确定一个球员精灵何时接触球。发生这种情况时，我将把球的所有者设置为那个球员。

    > 

    <span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>
    >如果您现在尝试玩游戏，则会发现球从屏幕顶部弹起，并且可以移动玩家捕捉它。现在，你怎么扔它？这就是右手控制的目的 - 赶出球。让我们为玩家添加一个“火”功能以及AIM属性。

    >

    然后，我们可以增强键盘功能以设置播放器的目标和射击功能。瞄准的工作方式略有不同。当瞄准键释放时，目标将恢复直接。
    <span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>
    >

    最终添加将是所有控件的触摸支持。我将在正确的控件上更改玩家的目标。我还将在屏幕上的任何地方都触摸它：
    <span><span>@font-face</span> {
</span>  <span>font-family: 'PressStart2P';
</span>  <span>src: <span>url('PressStart2P.woff')</span>;
</span><span>}
</span>

    >保持得分
    <span>h1 {
</span>  <span>font-family: 'PressStart2P', 'Georgia', serif;
</span><span>}
</span>

    >当球通过球员时，我想更改得分并将球交给那个球员。我将使用自定义事件，以便可以将评分与任何现有对象分开。更新功能越来越长，因此我将添加一个名为CheckScored的新私人功能：

    >

    >下面的代码对这些事件做出反应，以更新得分并交出球。将此代码添加到JavaScript文档的底部。
    <span><span>.sprite</span> {
</span>  <span>background-image: <span>url("sprites.png")</span>;
</span>  <span>width: 128px;
</span>  <span>height: 128px;
</span><span>}
</span>

    现在，当球超越对手时（这并不困难，因为对手没有移动），您的得分就会上升，球将交给对手。但是，对手只会抓住球。 
    <span><span><span><div</span> id<span>="player"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="opponent"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="ball"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>  <span><span><span><div</span> id<span>="up"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="down"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>  <span><span><span><div</span> id<span>="left"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="right"</span> class<span>="sprite"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
    获得Smart

    您几乎有一场比赛。如果你有一个可以和谁一起玩的人。作为最后一步，我将展示如何用简单的AI控制对手。对手会在球移动时试图与球保持平行。如果对手接球，它将随机移动并朝随机发射球。为了使人工智能感觉更加人性化，我将在所有事情中添加延误。请注意，这不是高度智能的AI，但这将是与游戏对抗的事情。

    在设计这种系统时，在各州进行思考是一件好事。对手AI有三个可能的状态：遵循，瞄准/射击和等待。我将成为遵循添加更人性化元素的行动之间的状态。仅针对AI对象开始：

    <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><script</span> src<span>="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><script</span> src<span>="ping.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

    >根据AI的状态，我希望它采取不同的动作。就像球一样，我将在requestAnimationframe中进行更新函数，以根据其状态制定AI法案：> 

    <span><span><span><div</span> id<span>="arena"</span>></span>
</span>  <span><span><span><div</span> id<span>="score"</span>></span>
</span>    <span><span><span><h1</span>></span>
</span>      <span><span><span><span</span> id<span>="playerScore"</span>></span>0<span><span></span</span>></span>
</span>     <span><span><span><span</span> id<span>="opponentScore"</span>></span>0<span><span></span</span>></span>
</span>   <span><span><span></h1</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="player"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="opponent"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="ball"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> id<span>="controls-left"</span>></span>
</span>   <span><span><span><div</span> id<span>="up"</span>></span><span><span></div</span>></span>
</span>   <span><span><span><div</span> id<span>="down"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> id<span>="controls-right"</span>></span>
</span>    <span><span><span><div</span> id<span>="left"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> id<span>="right"</span>></span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
    >以下状态很简单。对手沿球的垂直方向移动，而AI向等待状态转变，以注入一些缓慢的反应时间。下面的代码显示了这两个状态：

    <span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>
    > AI在必须跟随球和等待一秒钟之间交替。现在，将代码添加到游戏范围的更新功能：

    <span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>
    >运行游戏时，您会看到对手跟随球的动作，而不是在不到30行代码的情况下进行糟糕的AI。当然，如果对手接球，那将无能为力。因此，对于一个小时的最后一个技巧，是时候处理目标状态的动作了。 我希望AI随机移动几次，然后以随机的方向发射球。让我们添加一个可以做到这一点的私人功能。将AimandFire函数添加到Aiming Case语句中，这使得可以进行功能齐全的AI。

    总结

    到目前为止，您拥有一个完整的网络游戏，可在PC，智能手机和平板电脑上使用。该游戏有许多可能的改进。例如，它在智能手机上的肖像模式中看起来会有些尴尬，因此您需要确保在景观中握住手机才能正常工作。这只是网络及以后游戏开发的可能性的一个小表明。 

    <span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>
    感谢技术专家Mohamed Ameen Ibrahim回顾了这篇文章。

    与JavaScript更多动手

    本文是Microsoft Tech传教士的Web开发系列的一部分，该系列有关实用的JavaScript学习，开源项目和互操作性最佳实践，包括Microsoft Edge浏览器和新的Edgehtml渲染引擎。

    我们鼓励您在浏览器和设备上进行测试，包括Microsoft Edge（Windows 10的默认浏览器），并在dev.modern.ie上使用免费工具：

    >扫描您的网站以获取过时的库，布局问题和可访问性

    >

    使用Mac，Linux和Windows

    的虚拟机

    >远程测试您自己的设备上的Microsoft Edge

    GitHub上的编码实验室：跨浏览器测试和最佳实践

    在Microsoft Edge上以及我们的工程师和传教士的Web平台上的深入技术学习：
      ：
        2015年Microsoft Edge Web Summit（新浏览器，新支持的Web平台标准以及JavaScript社区的来宾演讲者的期望）
      • 哇，我可以在Mac＆Linux上测试Edge＆IE！ （来自Rey Bango）>在没有打破网络的情况下（来自克里斯蒂安·海尔曼）
      • >前进的javascript
        • > Edge渲染引擎，使网络刚刚起作用（来自Jacob Rossi）
      • >使用WebGL启用3D（来自David Catuhe，包括Vorlon.js和Babylonjs Projects）
      • 托管了网络应用程序和Web平台创新（来自Kevin Hill和Kiril Seksenov，包括歧管项目）
        • Web平台的更多免费的跨平台工具和资源：>
      • Linux，MacOS和Windows的Visual Studio代码
        • >与node.js的代码和azure
      的免费试用

      经常询问有关使用Visual Studio和ASP.NET
        建立网络游戏的问题（常见问题解答）
      • >如何使用Visual Studio和ASP.NET？
        • >创建多人游戏游戏，使用Visual Studio和ASP.NET创建多人游戏涉及多个步骤。首先，您需要设计游戏逻辑，其中包括规则，玩家互动和游戏的结果。接下来，您需要使用HTML，CSS和JavaScript创建游戏的用户界面。您可以使用ASP.NET中的SignalR库来处理服务器与客户端之间的实时通信。最后，您需要使用C＃和ASP.NET在服务器端实现游戏逻辑。这涉及处理玩家连接，管理游戏状态并向所有连接的客户广播更新。
      • >在Visual Studio中，游戏开发的最佳实践是什么？工作室包括使用模型视图控制器（MVC）模式将游戏逻辑与用户界面分开，使用实体框架进行数据访问，并使用单元测试来确保您的正确性 代码。此外，您应该使用Visual Studio中的内置调试工具来识别和修复代码中的错误。

      我可以使用Visual Studio和asp.net开发移动游戏？您可以使用Visual Studio和ASP.NET开发手机游戏。但是，重要的是要注意，ASP.NET主要是​​一个网络开发框架，因此您需要使用其他工具和库来创建手机游戏。 Xamarin是Visual Studio随附的跨平台开发工具，允许您在C＃中编写游戏代码，然后将其编译为Android，iOS和Windows Phone。

      >如何在Visual Studio中优化游戏的性能？首先，您应该使用内置分析工具来识别代码中的瓶颈。接下来，您可以使用诸如代码优化，数据结构优化和算法优化之类的技术来提高代码的性能。此外，您应该使用现代图形卡的硬件加速功能来提高游戏的渲染性能。

      我如何在Visual Studio中添加声音效果和音乐？在Visual Studio中为游戏的声音效果和音乐涉及使用System.Media名称空间中的Soundplayer类。您可以使用播放方法播放声音效果或音乐曲目，以及停止播放声音的停止方法。您也可以使用Playlooping方法连续播放声音。 Soundplayer类支持WAV文件，因此您需要将声音效果和音乐曲目转换为此格式。

      >如何在Visual Studio中发布我的游戏？在Visual Studio中开发的涉及多个步骤。首先，您需要在发布模式下构建游戏以创建可执行文件。接下来，您需要使用诸如InstallShield之类的工具为游戏创建安装程序。最后，您可以通过各种渠道（例如您自己的网站，在线游戏商店或应用商店。 >虽然可以使用Visual Studio和ASP.NET开发3D游戏，但对于这些工具来说，它并不是最常见的用例。 ASP.NET主要是​​一个网络开发框架，Visual Studio是一种通用开发环境。如果您有兴趣开发3D游戏，则可能需要考虑使用专用游戏开发引擎（例如Unity或Unreal Engine），这些引擎为3D游戏开发提供了更高级的工具和功能。

      >我如何添加多个 - 在Visual Studio中对我的游戏的支持？

      >在Visual Studio中为您的游戏添加多语言支持涉及使用ASP.NET的本地化功能。您可以使用资源文件为每种语言存储文本，然后使用ResourceManager类使用用户的语言设置来检索适当的文本。您还可以使用CultureInfo类来处理数字格式，日期格式和其他特定环境特定设置的差异。

      我如何在Visual Studio中测试我的游戏？ Visual Studio涉及使用内置测试工具。您可以使用单元测试来测试游戏的各个组件，集成测试以测试这些组件如何共同工作以及UI测试以测试用户界面。您还可以使用Visual Studio中的调试工具来识别和修复代码中的错误。

      >我可以使用Visual Studio和asp.net开发游戏机游戏吗？

      >

      虽然在技术上可以使用Visual Studio和asp.net开发游戏机，但这并不是这些最常见的用例工具。游戏机游戏开发通常涉及使用专用游戏开发引擎（例如Unity或Unreal Engine），该引擎为游戏机游戏开发提供了更高级的工具和功能。但是，您可以使用Visual Studio和ASP.NET来开发控制台游戏的服务器端组件，例如多人游戏配对服务或排行榜系统。>

以上是使用Visual Studio和ASP.NET在一个小时内构建网络游戏的详细内容。更多信息请关注PHP中文网其他相关文章！

c# JavaScript mvc firefox jquery css chrome less html edge Object Resource define if for while date format include require try throw catch double using class private Interface Namespace finally Property Accessors JS console number function default this promise position margin background transform animation input github windows visual studio macos visual studio code kind android ios xamarin web app http microsoft azure linux ui issue webgl everything Access Game
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：How to Solve the Global npm Module Dependency Problem下一篇：Testing a Sass Library

相关文章

查看更多