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