搜尋
首頁web前端js教程使用Visual Studio和ASP.NET在一個小時內構建網絡遊戲
使用Visual Studio和ASP.NET在一個小時內構建網絡遊戲
Christopher Nolan
Christopher Nolan
Feb 19, 2025 pm 12:35 PM

使用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>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

    也不要忘記在瀏覽器和設備之間對此應用進行測試（或任何其他）。雖然我編寫的代碼與Chrome，Firefox和Microsoft Edge等現代瀏覽器可互操作，但這始終是雙重檢查的最佳實踐。現在，您可以使用免費的虛擬機和其他工具（例如http://www.browserstack.com。

    基本設計

    我正在構建的遊戲是我稱為ping的變體。 Ping與Pong的規則基本相同，只是任何一個玩家在涉及到球時都會抓住球，然後可以直接或向上或向下傾斜或向下發射球。通常最好在構建遊戲之前繪製您希望遊戲的外觀。對於此遊戲，我想看到的整體佈局如下所示。

    >

    使用Visual Studio和ASP.NET在一個小時內構建網絡遊戲>一旦我開發了遊戲設計佈局，只是將每個元素添加到HTML以構建遊戲的問題。但是，要注意的一件事是，我將對記分板和控件進行分組，以確保它們坐在一起。因此，您可以一一看到我添加了這些元素，如下所示：

    > 

    <span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<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></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><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>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

    >現在，得分在H1標籤中，因此我可以為所有H1標籤設置字體。萬一缺少字體，我將提供一些備份選項：

    > 
    <span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<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></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><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> id<span>="player"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="opponent"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="ball"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="controls-left"</span>>
  <span><span><span><div> id<span>="up"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="down"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="controls-right"</span>>
  <span><span><span><div> id<span>="left"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="right"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>
    >關於此設計的一件好事是一切都設置為具有相對位置。這意味著屏幕可能是許多不同的尺寸，同時仍然使遊戲看起來不錯。

    >

    遵循彈跳球

    >現在，我將球四處移動。對於JavaScript代碼，就像我對CSS一樣，我引用了一個名為ping.js的文件。我將此代碼添加到帶有該名稱的新文件中。我將為球和每個球員製作對象，但是我將使用工廠模式作為對象。

    >

    這是一個簡單的概念。當您調用它時，球功能會產生一個新的球。無需使用新關鍵字。這種模式通過闡明可用的對象屬性來減少該變量周圍的一些混亂。而且由於我只有一個小時來製作這個遊戲，所以我需要最大程度地減少任何令人困惑的概念。

    當我完成簡單的球類時，這種模式的結構：

    >

    為創建一個新的球，我只稱其為已定義的此功能：>
    <span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

    >現在我想使球移動並在屏幕上彈跳。首先，我需要以某個時間間隔調用更新功能來創建球的動畫。現代瀏覽器提供了一種用於此目的的函數，稱為requestAnimationFrame。這將作為一個參數函數，並將在下次運行動畫週期時稱之為傳遞功能。當瀏覽器準備好進行更新時，這使球可以平穩地走動。當它調用傳遞功能時，它將在加載頁面後將其在幾秒鐘內提供時間。這對於確保動畫隨著時間的流逝至關重要。在遊戲中，requestAnimationFrame的使用如下：

    > 
    <span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<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></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><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>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

    捕獲球

    隨著球的反彈，我想讓玩家抓住球。當它被抓住時，球有一個主人，並遵循該主人的動議。我將在球的移動方法中添加功能，允許所有者，然後球將遵循：： 

    <span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<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></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><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> id<span>="player"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="opponent"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="ball"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="controls-left"</span>>
  <span><span><span><div> id<span>="up"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="down"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="controls-right"</span>>
  <span><span><span><div> id<span>="left"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="right"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>
    獲得Smart

    您幾乎有一場比賽。如果你有一個可以和誰一起玩的人。作為最後一步，我將展示如何用簡單的AI控制對手。對手會在球移動時試圖與球保持平行。如果對手接球，它將隨機移動並朝隨機發射球。為了使人工智能感覺更加人性化，我將在所有事情中添加延誤。請注意，這不是高度智能的AI，但這將是與遊戲對抗的事情。

    在設計這種系統時，在各州進行思考是一件好事。對手AI有三個可能的狀態：遵循，瞄準/射擊和等待。我將成為遵循添加更人性化元素的行動之間的狀態。僅針對AI對像開始：

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

    >根據AI的狀態，我希望它採取不同的動作。就像球一樣，我將在requestAnimationframe中進行更新函數，以根據其狀態制定AI法案：> 

    <span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<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></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><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中文網其他相關文章！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
在JavaScript中替換字符串字符在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi

自定義Google搜索API設置教程自定義Google搜索API設置教程Mar 04, 2025 am 01:06 AM

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中，提供了比標準WordPress主題搜索功能更精緻的搜索體驗。 令人驚訝的是簡單！您將能夠將搜索限制為Y

構建您自己的Ajax Web應用程序構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此，在這裡，您準備好了解所有稱為Ajax的東西。但是，到底是什麼？ AJAX一詞是指用於創建動態，交互式Web內容的一系列寬鬆的技術。 Ajax一詞，最初由Jesse J創造

示例顏色json文件示例顏色json文件Mar 03, 2025 am 12:35 AM

本文系列在2017年中期進行了最新信息和新示例。 在此JSON示例中，我們將研究如何使用JSON格式將簡單值存儲在文件中。 使用鍵值對符號，我們可以存儲任何類型的

8令人驚嘆的jQuery頁面佈局插件8令人驚嘆的jQuery頁面佈局插件Mar 06, 2025 am 12:48 AM

利用輕鬆的網頁佈局：8 ESTISSEL插件jQuery大大簡化了網頁佈局。 本文重點介紹了簡化該過程的八個功能強大的JQuery插件，對於手動網站創建特別有用

什麼是這個＆＃x27;在JavaScript？什麼是這個＆＃x27;在JavaScript？Mar 04, 2025 am 01:15 AM

核心要點 JavaScript 中的 this 通常指代“擁有”該方法的對象，但具體取決於函數的調用方式。 沒有當前對象時，this 指代全局對象。在 Web 瀏覽器中，它由 window 表示。 調用函數時，this 保持全局對象；但調用對象構造函數或其任何方法時，this 指代對象的實例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。這些方法使用給定的 this 值和參數調用函數。 JavaScript 是一門優秀的編程語言。幾年前，這句話可

通過來源查看器提高您的jQuery知識通過來源查看器提高您的jQuery知識Mar 05, 2025 am 12:54 AM

jQuery是一個很棒的JavaScript框架。但是，與任何圖書館一樣，有時有必要在引擎蓋下發現發生了什麼。也許是因為您正在追踪一個錯誤，或者只是對jQuery如何實現特定UI感到好奇

10張移動秘籍用於移動開發10張移動秘籍用於移動開發Mar 05, 2025 am 12:43 AM

該帖子編寫了有用的作弊表，參考指南，快速食譜以及用於Android，BlackBerry和iPhone應用程序開發的代碼片段。 沒有開發人員應該沒有他們！ 觸摸手勢參考指南（PDF）是Desig的寶貴資源

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前ByDDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前ByDDD
顯示更多

熱工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新（2018.2.1 ）專業的PHP整合開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。

SublimeText3 英文版

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7338
9
Java教學
1627
14
CakePHP 教程
1352
46
Laravel 教程
1265
25
PHP教程
1210
29
顯示更多