社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 使用Visual Studio和ASP.NET在一個小時內構建網絡遊戲

使用Visual Studio和ASP.NET在一個小時內構建網絡遊戲

Christopher Nolan
發布： 2025-02-19 12:35:10
原創
183 人瀏覽過

使用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中文網其他相關文章！

上一篇：如何解決全局NPM模塊依賴性問題 下一篇：測試SASS庫
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2789
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2922
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
2439
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
2348
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
2422
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板