![\"使用Visual](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173993971217437.jpg\")
>一旦我開(kāi)發(fā)了遊戲設(shè)計(jì)佈局，只是將每個(gè)元素添加到HTML以構(gòu)建遊戲的問(wèn)題。但是，要注意的一件事是，我將對(duì)記分板和控件進(jìn)行分組，以確保它們坐在一起。因此，您可以一一看到我添加了這些元素，如下所示：
目錄
使用Visual Studio和ASP.NET在一個(gè)小時(shí)內(nèi)構(gòu)建網(wǎng)絡(luò)遊戲
Feb 19, 2025 pm 12:35 PM
>本文是Microsoft的Web開(kāi)發(fā)系列的一部分。感謝您支持使SitietPoint成為可能的合作夥伴。 本文討論：
基本遊戲發(fā)展哲學(xué)
- 使用Web技術(shù)進(jìn)行遊戲開(kāi)發(fā)
- 添加遊戲控件和AI
-
討論的技術(shù)：
>代碼下載（.zip）
- >您不需要全新的技能來(lái)開(kāi)發(fā)遊戲。實(shí)際上，您目前在HTML，JavaScript，CSS等方面的網(wǎng)絡(luò)開(kāi)發(fā)技能非常適合各種遊戲。當(dāng)您使用Web技術(shù)構(gòu)建遊戲時(shí)，它將在幾乎所有帶有瀏覽器的設(shè)備上運(yùn)行。 > 為了證明這一點(diǎn)，我將展示使用Web Technologies和兩個(gè)外部圖書(shū)館從頭開(kāi)始構(gòu)建遊戲，我將在不到一個(gè)小時(shí)的時(shí)間內(nèi)完成。我將介紹從基本設(shè)計(jì)和佈局，控件和精靈到簡(jiǎn)單對(duì)手的人工智能（AI）的各種遊戲開(kāi)發(fā)主題。我什至要開(kāi)發(fā)遊戲，以便在PC，平板電腦和智能手機(jī)上使用。如果您有作為Web開(kāi)發(fā)人員或其他開(kāi)發(fā)領(lǐng)域編程的經(jīng)驗(yàn)，但是沒(méi)有經(jīng)驗(yàn)寫遊戲的經(jīng)驗(yàn)，那麼本文將使您入門。如果您給我一個(gè)小時(shí)，我保證會(huì)向您展示繩索。
- 鑰匙要點(diǎn)
快速開(kāi)發(fā)：利用HTML，JavaScript和CSS中的現(xiàn)有Web開(kāi)發(fā)技能來(lái)創(chuàng)建幾乎任何帶有瀏覽器的設(shè)備，使用Visual Studio和ASP.NET。
> Visual Studio作為工具：利用視覺(jué)工作室進(jìn)行快速遊戲開(kāi)發(fā)和跨不同設(shè)備進(jìn)行測(cè)試，確保兼容性和性能。
遊戲設(shè)計(jì)簡(jiǎn)化：從基本的遊戲設(shè)計(jì)原理和一個(gè)簡(jiǎn)單的遊戲開(kāi)始，例如“ ping”（乒乓變體），重點(diǎn)放在佈局和基本遊戲機(jī)制上。
>- 交互式元素：使用JavaScript和CSS進(jìn)行動(dòng)態(tài)遊戲玩法，並合併交互式遊戲控件，以確保諸如球和玩家之類的元素有效地響應(yīng)用戶輸入。
- >跨平臺(tái)兼容性：測(cè)試並確保遊戲在各種瀏覽器和設(shè)備上的性能都很好
- 啟動(dòng)並運(yùn)行
- >我將在Visual Studio中進(jìn)行所有開(kāi)發(fā)，這將在我進(jìn)行更改時(shí)快速執(zhí)行Web應(yīng)用程序。請(qǐng)確保擁有最新版本的Visual Studio，以便您可以跟隨。我使用了Visual Studio 2013 Pro，但通過(guò)Visual Studio 2013社區(qū)更新了代碼。另外，如果您有Mac或Linux，則如今可以使用Visual Studio代碼。
- 哇，我可以在Mac＆Linux上測(cè)試Edge＆IE！ （來(lái)自Rey Bango）
>在沒(méi)有打破網(wǎng)絡(luò)的情況下（來(lái)自克里斯蒂安·海爾曼） - >前進(jìn)的javascript
> Edge渲染引擎，使網(wǎng)絡(luò)剛剛起作用（來(lái)自Jacob Rossi）- >使用WebGL啟用3D（來(lái)自David Catuhe，包括Vorlon.js和Babylonjs Projects）
- 託管了網(wǎng)絡(luò)應(yīng)用程序和Web平臺(tái)創(chuàng)新（來(lái)自Kevin Hill和Kiril Seksenov，包括歧管項(xiàng)目）
> - Linux，MacOS和Windows的Visual Studio代碼
>與node.js的代碼和azure - >如何使用Visual Studio和ASP.NET？
- >在Visual Studio中，遊戲開(kāi)發(fā)的最佳實(shí)踐是什麼？工作室包括使用模型視圖控制器（MVC）模式將游戲邏輯與用戶界面分開(kāi)，使用實(shí)體框架進(jìn)行數(shù)據(jù)訪問(wèn)，並使用單元測(cè)試來(lái)確保您的正確性 代碼。此外，您應(yīng)該使用Visual Studio中的內(nèi)置調(diào)試工具來(lái)識(shí)別和修復(fù)代碼中的錯(cuò)誤。
這個(gè)應(yīng)用程序?qū)⒉恍枰?wù)器代碼，因此我首先在Visual Studio中創(chuàng)建一個(gè)新的，空的網(wǎng)頁(yè)項(xiàng)目。我將通過(guò)選擇文件後選擇“ Visual C＃”選項(xiàng)來(lái)使用空網(wǎng)站的空C＃模板。新| ASP.NET空網(wǎng)站。
索引HTML文件僅需要三個(gè)資源：jQuery，主樣式表和主JavaScript文件。我將一個(gè)空的CSS文件添加到名為style.css和一個(gè)空的JavaScript文件的項(xiàng)目中，稱為ping.js，以避免加載頁(yè)面時(shí)錯(cuò)誤：
><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>
也不要忘記在瀏覽器和設(shè)備之間對(duì)此應(yīng)用進(jìn)行測(cè)試（或任何其他）。雖然我編寫的代碼與Chrome，F(xiàn)irefox和Microsoft Edge等現(xiàn)代瀏覽器可互操作，但這始終是雙重檢查的最佳實(shí)踐?，F(xiàn)在，您可以使用免費(fèi)的虛擬機(jī)和其他工具（例如http://www.browserstack.com。
基本設(shè)計(jì)我正在構(gòu)建的遊戲是我稱為ping的變體。 Ping與Pong的規(guī)則基本相同，只是任何一個(gè)玩家在涉及到球時(shí)都會(huì)抓住球，然後可以直接或向上或向下傾斜或向下發(fā)射球。通常最好在構(gòu)建遊戲之前繪製您希望遊戲的外觀。對(duì)於此遊戲，我想看到的整體佈局如下所示。
>
>一旦我開(kāi)發(fā)了遊戲設(shè)計(jì)佈局，只是將每個(gè)元素添加到HTML以構(gòu)建遊戲的問(wèn)題。但是，要注意的一件事是，我將對(duì)記分板和控件進(jìn)行分組，以確保它們坐在一起。因此，您可以一一看到我添加了這些元素，如下所示：>
<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>>使用樣式
播放
如果您要加載此頁(yè)面，則不會(huì)看到任何東西，因?yàn)闆](méi)有應(yīng)用樣式。我已經(jīng)在HTML中設(shè)置了指向main.css文件的鏈接，因此我將所有CSS放在帶有該名稱的新文件中。我要做的第一件事是將所有內(nèi)容都放在屏幕上。頁(yè)面的主體需要佔(zhàn)用整個(gè)屏幕，因此我將首先設(shè)置：>第二，我需要將競(jìng)技場(chǎng)填充整個(gè)屏幕，並應(yīng)用了競(jìng)技場(chǎng)背景圖像（請(qǐng)參見(jiàn)下圖）：
<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>接下來(lái)，我將記分牌定位。我希望這在其他元素上出現(xiàn)頂部和中心。命令位置：絕對(duì)讓我將其放置在我想要的任何地方：50％將其放在窗口頂部的一半，但從記分板元素的最左側(cè)開(kāi)始。為了確保它是完全居中的，我使用轉(zhuǎn)換屬性，Z-Index屬性可確保它始終處?kù)俄敳浚?img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173993971476176.jpg" class="lazy" alt="使用Visual Studio和ASP.NET在一個(gè)小時(shí)內(nèi)構(gòu)建網(wǎng)絡(luò)遊戲" >>
我也希望文本字體以復(fù)古主題為主題。大多數(shù)現(xiàn)代瀏覽器都讓我包括自己的字體。我從Codeman38（Zone38.net）找到了適當(dāng)?shù)陌聪?P字體。要將字體添加到計(jì)分板中，我必須創(chuàng)建一個(gè)新的字體臉：
<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>
>現(xiàn)在，得分在H1標(biāo)籤中，因此我可以為所有H1標(biāo)籤設(shè)置字體。萬(wàn)一缺少字體，我將提供一些備份選項(xiàng)：
><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>
對(duì)於其他元素，我將使用一張圖像片。精靈表包含一個(gè)我在一個(gè)文件中所需的遊戲所需的圖像（請(qǐng)參見(jiàn)下圖）。
>
>在此表上具有圖像的任何元素都將分配一個(gè)精靈類。然後，對(duì)於每個(gè)元素，我將使用背景位置來(lái)定義我要顯示的精靈表的哪一部分：
<span>body {
</span> <span>margin: 0px;
</span> <span>height: 100%;
</span><span>}
</span>
接下來(lái)，我將將Sprite類添加到所有將使用精靈表的元素中。我將不得不短暫地跳回HTML做到這一點(diǎn)：>
<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>現(xiàn)在，我需要指示每個(gè)元素在紙板上的每個(gè)精靈的位置。同樣，我將使用背景位置進(jìn)行此操作：
<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>>位置：玩家，對(duì)手和球上的絕對(duì)屬性將讓我使用JavaScript移動(dòng)它們。如果您現(xiàn)在查看頁(yè)面，您會(huì)看到控件和球上附有不必要的作品。這是因?yàn)榫`尺寸小於默認(rèn)的128像素，因此我將其調(diào)整為正確的尺寸。只有一個(gè)球，所以我將直接設(shè)置它的大?。?p>
<span><span>@font-face</span> {
</span> <span>font-family: 'PressStart2P';
</span> <span>src: <span>url('PressStart2P.woff')</span>;
</span><span>}
</span>>有四個(gè)控制元素（用戶可以按下按鈕以移動(dòng)播放器的按鈕），因此我應(yīng)該為他們做一個(gè)特殊的課程。我還會(huì)添加一個(gè)邊距，以便它們周圍有一點(diǎn)空間：
<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>>我需要做的最後一件事是將控件放置，以便在頁(yè)面在移動(dòng)設(shè)備上運(yùn)行時(shí)用戶的拇指。我將它們粘在底部的角落：
<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>>關(guān)於此設(shè)計(jì)的一件好事是一切都設(shè)置為具有相對(duì)位置。這意味著屏幕可能是許多不同的尺寸，同時(shí)仍然使遊戲看起來(lái)不錯(cuò)。
>
遵循彈跳球>現(xiàn)在，我將球四處移動(dòng)。對(duì)於JavaScript代碼，就像我對(duì)CSS一樣，我引用了一個(gè)名為ping.js的文件。我將此代碼添加到帶有該名稱的新文件中。我將為球和每個(gè)球員製作對(duì)象，但是我將使用工廠模式作為對(duì)象。
>
這是一個(gè)簡(jiǎn)單的概念。當(dāng)您調(diào)用它時(shí)，球功能會(huì)產(chǎn)生一個(gè)新的球。無(wú)需使用新關(guān)鍵字。這種模式通過(guò)闡明可用的對(duì)象屬性來(lái)減少該變量周圍的一些混亂。而且由於我只有一個(gè)小時(shí)來(lái)製作這個(gè)遊戲，所以我需要最大程度地減少任何令人困惑的概念。當(dāng)我完成簡(jiǎn)單的球類時(shí)，這種模式的結(jié)構(gòu)：
>為創(chuàng)建一個(gè)新的球，我只稱其為已定義的此功能：
<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>
>現(xiàn)在我想使球移動(dòng)並在屏幕上彈跳。首先，我需要以某個(gè)時(shí)間間隔調(diào)用更新功能來(lái)創(chuàng)建球的動(dòng)畫?，F(xiàn)代瀏覽器提供了一種用於此目的的函數(shù)，稱為requestAnimationFrame。這將作為一個(gè)參數(shù)函數(shù)，並將在下次運(yùn)行動(dòng)畫週期時(shí)稱之為傳遞功能。當(dāng)瀏覽器準(zhǔn)備好進(jìn)行更新時(shí)，這使球可以平穩(wěn)地走動(dòng)。當(dāng)它調(diào)用傳遞功能時(shí)，它將在加載頁(yè)面後將其在幾秒鐘內(nèi)提供時(shí)間。這對(duì)於確保動(dòng)畫隨著時(shí)間的流逝至關(guān)重要。在遊戲中，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>
請(qǐng)注意，隨著球完成更新，函數(shù)中再次調(diào)用requestAnimationFrame。這確保了連續(xù)動(dòng)畫。
>雖然此代碼可以正常工作，但在頁(yè)面滿載完整之前，腳本可能會(huì)開(kāi)始運(yùn)行。為了避免這種情況，我將使用jQuery：
<span>body {
</span> <span>margin: 0px;
</span> <span>height: 100%;
</span><span>}
</span>因?yàn)槲抑狼虻乃俣龋ㄋ俣龋┖妥陨洗胃乱詠?lái)的時(shí)間，所以我可以做一些簡(jiǎn)單的物理學(xué)來(lái)向前移動(dòng)球：
<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>>嘗試運(yùn)行代碼，您會(huì)看到球以一定角度移動(dòng)並從屏幕上移動(dòng)。這很有趣，但是一旦球從屏幕的邊緣掉下來(lái)，樂(lè)趣就會(huì)停止。因此，下一步是使球從屏幕的邊緣彈起，如圖7所示。添加此代碼並運(yùn)行該應(yīng)用程序?qū)@示一個(gè)連續(xù)彈跳的球。 一個(gè)可移動(dòng)的播放器
現(xiàn)在是時(shí)候製作播放器對(duì)象了。散開(kāi)播放器類的第一步是使移動(dòng)功能更改播放器的位置。側(cè)變量將指示球員將居住的球場(chǎng)的哪一側(cè)，這將決定如何水平定位球員。傳遞到移動(dòng)函數(shù)的Y值將是播放器將移動(dòng)多少或向下移動(dòng)的值
然後，我們可以佈置玩家的運(yùn)動(dòng)，如果玩家精靈到達(dá)窗戶的頂部或底部，則停止運(yùn)動(dòng)。我現(xiàn)在可以創(chuàng)建兩個(gè)玩家，並讓他們移至屏幕上適當(dāng)?shù)囊粋?cè)：
<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>>因此，從理論上講，您可以移動(dòng)玩家，但是如果沒(méi)有指示，它不會(huì)移動(dòng)。在左側(cè)的播放器中添加一些控件。您需要兩種控制該播放器的方法：使用鍵盤（在PC上）並敲擊控件（在平板電腦和電話上）。 > 為了確保各種平臺(tái)上的觸摸輸入和鼠標(biāo)輸入之間的一致性，我將使用出色的統(tǒng)一框架hand.js（handjs.codeplex.com）。首先，我將腳本添加到HTML中：
><span>h1 {
</span> <span>font-family: 'PressStart2P', 'Georgia', serif;
</span><span>}
</span>
然後，當(dāng)您按鍵盤鍵A和Z時(shí)，或者點(diǎn)擊控件時(shí)，我將使用Hand.js和JQuery來(lái)控製播放器。
<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>
捕獲球
隨著球的反彈，我想讓玩家抓住球。當(dāng)它被抓住時(shí)，球有一個(gè)主人，並遵循該主人的動(dòng)議。我將在球的移動(dòng)方法中添加功能，允許所有者，然後球?qū)⒆裱?ancy>：
<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>>當(dāng)前，無(wú)法獲得播放器對(duì)象的位置，因此我將getPosition和getside登錄器添加到播放器對(duì)象：
>
<span>body {
</span> <span>margin: 0px;
</span> <span>height: 100%;
</span><span>}
</span>現(xiàn)在，如果球有一個(gè)所有者，它將跟隨周圍的所有者。但是如何確定所有者？有人必須接球。讓我們確定一個(gè)球員精靈何時(shí)接觸球。發(fā)生這種情況時(shí)，我將把球的所有者設(shè)置為那個(gè)球員。 >
<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>>如果您現(xiàn)在嘗試玩遊戲，則會(huì)發(fā)現(xiàn)球從屏幕頂部彈起，並且可以移動(dòng)玩家捕捉它?，F(xiàn)在，你怎麼扔它？這就是右手控制的目的 - 趕出球。讓我們?yōu)橥婕姨砑右粋€(gè)“火”功能以及AIM屬性。 >
然後，我們可以增強(qiáng)鍵盤功能以設(shè)置播放器的目標(biāo)和射擊功能。瞄準(zhǔn)的工作方式略有不同。當(dāng)瞄準(zhǔn)鍵釋放時(shí)，目標(biāo)將恢復(fù)直接。<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>>
最終添加將是所有控件的觸摸支持。我將在正確的控件上更改玩家的目標(biāo)。我還將在屏幕上的任何地方都觸摸它：
<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>
>當(dāng)球通過(guò)球員時(shí)，我想更改得分並將球交給那個(gè)球員。我將使用自定義事件，以便可以將評(píng)分與任何現(xiàn)有對(duì)象分開(kāi)。更新功能越來(lái)越長(zhǎng)，因此我將添加一個(gè)名為CheckScored的新私人功能：
>>下面的代碼對(duì)這些事件做出反應(yīng)，以更新得分並交出球。將此代碼添加到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>
現(xiàn)在，當(dāng)球超越對(duì)手時(shí)（這並不困難，因?yàn)閷?duì)手沒(méi)有移動(dòng)），您的得分就會(huì)上升，球?qū)⒔唤o對(duì)手。但是，對(duì)手只會(huì)抓住球。
<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
您幾乎有一場(chǎng)比賽。如果你有一個(gè)可以和誰(shuí)一起玩的人。作為最後一步，我將展示如何用簡(jiǎn)單的AI控制對(duì)手。對(duì)手會(huì)在球移動(dòng)時(shí)試圖與球保持平行。如果對(duì)手接球，它將隨機(jī)移動(dòng)並朝隨機(jī)發(fā)射球。為了使人工智能感覺(jué)更加人性化，我將在所有事情中添加延誤。請(qǐng)注意，這不是高度智能的AI，但這將是與遊戲?qū)沟氖虑椤?p>在設(shè)計(jì)這種系統(tǒng)時(shí)，在各州進(jìn)行思考是一件好事。對(duì)手AI有三個(gè)可能的狀態(tài)：遵循，瞄準(zhǔn)/射擊和等待。我將成為遵循添加更人性化元素的行動(dòng)之間的狀態(tài)。僅針對(duì)AI對(duì)像開(kāi)始：
<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>
>根據(jù)AI的狀態(tài)，我希望它採(cǎi)取不同的動(dòng)作。就像球一樣，我將在requestAnimationframe中進(jìn)行更新函數(shù)，以根據(jù)其狀態(tài)制定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>>以下?tīng)顟B(tài)很簡(jiǎn)單。對(duì)手沿球的垂直方向移動(dòng)，而AI向等待狀態(tài)轉(zhuǎn)變，以注入一些緩慢的反應(yīng)時(shí)間。下面的代碼顯示了這兩個(gè)狀態(tài)：
<span>body {
</span> <span>margin: 0px;
</span> <span>height: 100%;
</span><span>}
</span>> AI在必須跟隨球和等待一秒鐘之間交替?，F(xiàn)在，將代碼添加到遊戲範(fàn)圍的更新功能：
<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>>運(yùn)行遊戲時(shí)，您會(huì)看到對(duì)手跟隨球的動(dòng)作，而不是在不到30行代碼的情況下進(jìn)行糟糕的AI。當(dāng)然，如果對(duì)手接球，那將無(wú)能為力。因此，對(duì)於一個(gè)小時(shí)的最後一個(gè)技巧，是時(shí)候處理目標(biāo)狀態(tài)的動(dòng)作了。 總結(jié)
到目前為止，您擁有一個(gè)完整的網(wǎng)絡(luò)遊戲，可在PC，智能手機(jī)和平板電腦上使用。該遊戲有許多可能的改進(jìn)。例如，它在智能手機(jī)上的肖像模式中看起來(lái)會(huì)有些尷尬，因此您需要確保在景觀中握住手機(jī)才能正常工作。這只是網(wǎng)絡(luò)及以後遊戲開(kāi)發(fā)的可能性的一個(gè)小表明。
<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>感謝技術(shù)專家Mohamed Ameen Ibrahim回顧了這篇文章。
與JavaScript更多動(dòng)手
本文是Microsoft Tech傳教士的Web開(kāi)發(fā)系列的一部分，該系列有關(guān)實(shí)用的JavaScript學(xué)習(xí)，開(kāi)源項(xiàng)目和互操作性最佳實(shí)踐，包括Microsoft Edge瀏覽器和新的Edgehtml渲染引擎。
我們鼓勵(lì)您在瀏覽器和設(shè)備上進(jìn)行測(cè)試，包括Microsoft Edge（Windows 10的默認(rèn)瀏覽器），並在dev.modern.ie上使用免費(fèi)工具：>掃描您的網(wǎng)站以獲取過(guò)時(shí)的庫(kù)，佈局問(wèn)題和可訪問(wèn)性
>使用Mac，Linux和Windows
的虛擬機(jī)>遠(yuǎn)程測(cè)試您自己的設(shè)備上的Microsoft Edge
GitHub上的編碼實(shí)驗(yàn)室：跨瀏覽器測(cè)試和最佳實(shí)踐在Microsoft Edge上以及我們的工程師和傳教士的Web平臺(tái)上的深入技術(shù)學(xué)習(xí)：
- ：
-
2015年Microsoft Edge Web Summit（新瀏覽器，新支持的Web平臺(tái)標(biāo)準(zhǔn)以及JavaScript社區(qū)的來(lái)賓演講者的期望）
經(jīng)常詢問(wèn)有關(guān)使用Visual Studio和ASP.NET
- 建立網(wǎng)絡(luò)遊戲的問(wèn)題（常見(jiàn)問(wèn)題解答）
我可以使用Visual Studio和asp.net開(kāi)發(fā)移動(dòng)遊戲？您可以使用Visual Studio和ASP.NET開(kāi)發(fā)手機(jī)遊戲。但是，重要的是要注意，ASP.NET主要是??一個(gè)網(wǎng)絡(luò)開(kāi)發(fā)框架，因此您需要使用其他工具和庫(kù)來(lái)創(chuàng)建手機(jī)遊戲。 Xamarin是Visual Studio隨附的跨平臺(tái)開(kāi)發(fā)工具，允許您在C＃中編寫遊戲代碼，然後將其編譯為Android，iOS和Windows Phone。>如何在Visual Studio中優(yōu)化遊戲的性能？首先，您應(yīng)該使用內(nèi)置分析工具來(lái)識(shí)別代碼中的瓶頸。接下來(lái)，您可以使用諸如代碼優(yōu)化，數(shù)據(jù)結(jié)構(gòu)優(yōu)化和算法優(yōu)化之類的技術(shù)來(lái)提高代碼的性能。此外，您應(yīng)該使用現(xiàn)代圖形卡的硬件加速功能來(lái)提高遊戲的渲染性能。
我如何在Visual Studio中添加聲音效果和音樂(lè)？在Visual Studio中為遊戲的聲音效果和音樂(lè)涉及使用System.Media名稱空間中的Soundplayer類。您可以使用播放方法播放聲音效果或音樂(lè)曲目，以及停止播放聲音的停止方法。您也可以使用Playlooping方法連續(xù)播放聲音。 Soundplayer類支持WAV文件，因此您需要將聲音效果和音樂(lè)曲目轉(zhuǎn)換為此格式。
>如何在Visual Studio中發(fā)布我的遊戲？在Visual Studio中開(kāi)發(fā)的涉及多個(gè)步驟。首先，您需要在發(fā)布模式下構(gòu)建遊戲以創(chuàng)建可執(zhí)行文件。接下來(lái)，您需要使用諸如InstallShield之類的工具為遊戲創(chuàng)建安裝程序。最後，您可以通過(guò)各種渠道（例如您自己的網(wǎng)站，在線遊戲商店或應(yīng)用商店。 >雖然可以使用Visual Studio和ASP.NET開(kāi)發(fā)3D遊戲，但對(duì)於這些工具來(lái)說(shuō)，它並不是最常見(jiàn)的用例。 ASP.NET主要是??一個(gè)網(wǎng)絡(luò)開(kāi)發(fā)框架，Visual Studio是一種通用開(kāi)發(fā)環(huán)境。如果您有興趣開(kāi)發(fā)3D遊戲，則可能需要考慮使用專用遊戲開(kāi)發(fā)引擎（例如Unity或Unreal Engine），這些引擎為3D遊戲開(kāi)發(fā)提供了更高級(jí)的工具和功能。
>我如何添加多個(gè)- 在Visual Studio中對(duì)我的遊戲的支持？>在Visual Studio中為您的遊戲添加多語(yǔ)言支持涉及使用ASP.NET的本地化功能。您可以使用資源文件為每種語(yǔ)言存儲(chǔ)文本，然後使用ResourceManager類使用用戶的語(yǔ)言設(shè)置來(lái)檢索適當(dāng)?shù)奈谋?。您還可以使用CultureInfo類來(lái)處理數(shù)字格式，日期格式和其他特定環(huán)境特定設(shè)置的差異。我如何在Visual Studio中測(cè)試我的遊戲？ Visual Studio涉及使用內(nèi)置測(cè)試工具。您可以使用單元測(cè)試來(lái)測(cè)試遊戲的各個(gè)組件，集成測(cè)試以測(cè)試這些組件如何共同工作以及UI測(cè)試以測(cè)試用戶界面。您還可以使用Visual Studio中的調(diào)試工具來(lái)識(shí)別和修復(fù)代碼中的錯(cuò)誤。>我可以使用Visual Studio和asp.net開(kāi)發(fā)遊戲機(jī)遊戲嗎？
>
雖然在技術(shù)上可以使用Visual Studio和asp.net開(kāi)發(fā)遊戲機(jī)，但這並不是這些最常見(jiàn)的用例工具。遊戲機(jī)遊戲開(kāi)發(fā)通常涉及使用專用遊戲開(kāi)發(fā)引擎（例如Unity或Unreal Engine），該引擎為遊戲機(jī)遊戲開(kāi)發(fā)提供了更高級(jí)的工具和功能。但是，您可以使用Visual Studio和ASP.NET來(lái)開(kāi)發(fā)控制臺(tái)遊戲的服務(wù)器端組件，例如多人遊戲配對(duì)服務(wù)或排行榜系統(tǒng)。 >以上是使用Visual Studio和ASP.NET在一個(gè)小時(shí)內(nèi)構(gòu)建網(wǎng)絡(luò)遊戲的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
本網(wǎng)站聲明
本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請(qǐng)聯(lián)絡(luò)admin@php.cn
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
Agnes Tachyon Build Guide |漂亮的德比志
2 週前
By Jack chen
Oguri Cap Build Guide |漂亮的德比志
2 週前
By Jack chen
約會(huì)一切：德克和哈珀關(guān)係指南
1 個(gè)月前
By Jack chen
沙丘：覺(jué)醒 - 高級(jí)行星學(xué)家Quest演練
4 週前
By Jack chen
Palia：Rasquellywag的Riches Quest演練
4 週前
By DDD
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
熱門話題
Java vs. JavaScript：清除混亂
Jun 20, 2025 am 12:27 AM
Java和JavaScript是不同的編程語(yǔ)言，各自適用於不同的應(yīng)用場(chǎng)景。 Java用於大型企業(yè)和移動(dòng)應(yīng)用開(kāi)發(fā)，而JavaScript主要用於網(wǎng)頁(yè)開(kāi)發(fā)。
JavaScript評(píng)論：簡(jiǎn)短說(shuō)明
Jun 19, 2025 am 12:40 AM
JavascriptconcommentsenceenceEncorenceEnterential gransimenting，reading and guidingCodeeXecution.1）單inecommentsareusedforquickexplanations.2）多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3）
如何在JS中與日期和時(shí)間合作？
Jul 01, 2025 am 01:27 AM
JavaScript中的日期和時(shí)間處理需注意以下幾點(diǎn)：1.創(chuàng)建Date對(duì)像有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時(shí)間信息可用get和set方法，注意月份從0開(kāi)始；3.手動(dòng)格式化日期需拼接字符串，也可使用第三方庫(kù)；4.處理時(shí)區(qū)問(wèn)題建議使用支持時(shí)區(qū)的庫(kù)，如Luxon。掌握這些要點(diǎn)能有效避免常見(jiàn)錯(cuò)誤。
為什麼要將標(biāo)籤放在的底部？
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
JavaScript與Java：開(kāi)發(fā)人員的全面比較
Jun 20, 2025 am 12:21 AM
JavaScriptIspreferredforredforwebdevelverment，而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1）JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2）
什麼是在DOM中冒泡和捕獲的事件？
Jul 02, 2025 am 01:19 AM
事件捕獲和冒泡是DOM中事件傳播的兩個(gè)階段，捕獲是從頂層向下到目標(biāo)元素，冒泡是從目標(biāo)元素向上傳播到頂層。 1.事件捕獲通過(guò)addEventListener的useCapture參數(shù)設(shè)為true實(shí)現(xiàn)；2.事件冒泡是默認(rèn)行為，useCapture設(shè)為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委託，提高動(dòng)態(tài)內(nèi)容處理效率；5.捕獲可用於提前攔截事件，如日誌記錄或錯(cuò)誤處理。了解這兩個(gè)階段有助於精確控制JavaScript響應(yīng)用戶操作的時(shí)機(jī)和方式。
JavaScript：探索用於高效編碼的數(shù)據(jù)類型
Jun 20, 2025 am 12:46 AM
javascripthassevenfundaMentalDatatypes：數(shù)字，弦，布爾值，未定義，null，object和symbol.1）numberSeadUble-eaduble-ecisionFormat，forwidevaluerangesbutbecautious.2）
如何減少JavaScript應(yīng)用程序的有效載荷大?。?/a>
