火星網(wǎng)校
怎么開發(fā)網(wǎng)頁游戲(網(wǎng)頁游戲開發(fā)基礎)
發(fā)布時間：2023-11-27 19:15:47 瀏覽量：140次
?網(wǎng)頁游戲開發(fā)基礎
對于初學編程的朋友來說，這篇文章有點長，而且會有點難懂。但是請不要放棄，我盡量以通俗的語言解釋相關的編程概念，這里只講解編寫一個游戲需要的相關編程概念（如需要會在后面的文章中隨時補充相關概念），對其余未涉及的編程概念大家可以自行搜索學習。本文都是簡單的編程概念，請耐心看完，如有疑問歡迎與我交流。本人水平有限，如有錯誤歡迎指正。
正如有人的地方就有江湖，有瀏覽器的地方就有JavaScript。那么什么是JavaScript呢？JavaScript 是世界上最流行的腳本語言，它適用于PC、筆記本電腦、平板電腦和手機。JavaScript 是一種輕量級的編程語言，JavaScript 是可插入HTML 頁面的代碼，JavaScript 插入 HTML 頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行，JavaScript 很容易學習，沒有想象中的那么復雜。
一、如何在網(wǎng)頁中添加JavaScript代碼
HTML 中的腳本必須位于<script>與</script>標簽之間，有兩種方式，第一種方式，在<script>與</script>標簽之間直接添加JavaScript代碼，例如：<script type="text/javascript">alert("Hello World!");</script>，打開含有上述代碼的網(wǎng)頁將顯示一個對話框（alert是一個函數(shù)，作用是彈出一個含有信息的對話框），如下圖所示：
第二種方式是把JavaScript腳本保存到外部文件中，這樣代碼可以被多個網(wǎng)頁使用。外部 JavaScript 文件的文件擴展名是js。如以外部文件方式引用JavaScript，需要在<script>標簽的 "src" 屬性中設置該.js文件位置及名稱， 例如：
<html>
<body onload="main()">
<script src="http://www.toutiao.com/a7111667000610456071/first.js"></script>
</body>
</html>
first.js文件代碼如下：
function main(){
alert("Hello World!");
}
打開這個網(wǎng)頁，顯示的結果與上圖一致。其中<body>標簽中的onload="main()"表示網(wǎng)頁加載完畢后調用main()函數(shù)（后面會介紹什么是函數(shù)）。
二、JavaScript變量
變量用來存儲值或計算結果，JavaScript使用關鍵字var來定義變量，使用等號來為變量賦值，例如：
var x, length;
x = 5;
length = 6;
執(zhí)行以上語句后，變量x的值為5，變量length的值為6。（提示：為保持代碼可讀性建議每行以;結尾，每行開頭適當添加空格縮進）
變量名約定：JavaScript變量名必須以字母、下劃線_或美元符$開頭，后續(xù)的字符可以是字母、數(shù)字、下劃線或美元符（數(shù)字是不允許作為首字符出現(xiàn)的，以便 JavaScript 可以輕易區(qū)分開標識符和數(shù)字），注意：變量名區(qū)分大小寫。
注意：JavaScript變量名不能是保留字（詳細的保留字請自行搜索），否則會出現(xiàn)語法錯誤提示，如下圖：
三、注釋
為了增強代碼的可讀性，可以對相應代碼進行注釋，有兩種方式，第一種：多行注釋，以"/*"開頭，然后增加注釋文字，最后以"*/"結尾，例如：
第二種：單行注釋，以"https://"開頭，只能添加一行注釋文字，例如：
四、數(shù)據(jù)類型
JavaScript 有多種數(shù)據(jù)類型：數(shù)字，字符串，數(shù)組，對象等等，例如：
其中數(shù)字、字符串類型較簡單，數(shù)組、對象類型較復雜，下面再簡單說說數(shù)組和對象類型。
1、數(shù)組
JavaScript 數(shù)組（Array）是有序數(shù)據(jù)的集合，數(shù)組中的每個成員被稱為元素（Element），每個元素的名稱（鍵）被稱為數(shù)組下標（Index），注意：下標從0開始。JavaScript 常用的定義（創(chuàng)建或者聲明）數(shù)組方法有兩種：構造數(shù)組和數(shù)組直接量。
a4[2]表示訪問a4數(shù)組的第三個元素（下標從0開始），即3。
數(shù)組的元素可以為數(shù)字、字符串、對象，還可以是數(shù)組，元素為數(shù)組的數(shù)組稱為多維數(shù)組，下面是一個二維數(shù)組（可以把它想像成一個9行8列的表格）
如何定義這個數(shù)組呢？分兩步來定義，首先定義一個數(shù)組（有9個元素）：
var a=new Array(9);
然后將這個數(shù)組的元素依次定義成一個數(shù)組
a[0]=new Array(8);
a[1]=new Array(8);
……
a[8]=new Array(8);
即，先將數(shù)組的行定義出來，再定義每一行中的元素。現(xiàn)在要訪問數(shù)組a的元素的話需要兩個坐標——行、列坐標，例如：訪問第5行第4列的元素，a[4][3]
2、對象
對象可以存儲復雜的數(shù)據(jù)，那么什么是對象呢？計算機程序設計教材上關于對象的定義比較抽象，用我自己的話來說，就是將客觀世界中的事物特征和行為用計算機語言來描述并保存至一個變量中，這個變量就叫對象。以人為例，每個人的特征都不一樣（性別、身高、體重……），但都有相同的行為（說話、行走、睡覺……）。常用的對象定義方式有兩種：構造對象和直接定義對象，先看看構造對象的方法
上面是構造對象的一般方法，即先構造一個Object對象，然后再定義對象的屬性（特征），接著定義對象的方法（行為），為遵循面向對象的程序設計方法，一般需要提供訪問屬性的方法，例如：獲取年齡的方法getAge和修改年齡的方法setAge，注意這兩個方法中的this表示的是當前對象。將以上代碼復制到HTML文件<script></script>標簽之間，保存并在瀏覽器里打開，控制臺（chrome瀏覽器按F12鍵顯示控制臺）顯示結果如下：
下面看看直接定義對象
將以上代碼復制到HTML文件<script></script>標簽之間，保存并在瀏覽器里打開，顯示結果如下：
五、運算符
JavaScript常用的運算符有算術運算符、比較運算符和邏輯運算符
注意自增和自減運算符，如果運算符在變量前面則先執(zhí)行自增（自減）運算，再將結果賦給x
注意：TRUE、FALSE表示真、假，用于條件判斷，例如：if語句（見本文后面部分）。運算符的優(yōu)先級為：算術運算符最高，比較運算符其次，邏輯運算符最低，可以通過小括號改變運算優(yōu)先級。
六、函數(shù)
為了讓代碼能重復使用，把實現(xiàn)某一功能的代碼寫在一段代碼塊內（以{開頭，}結尾），這段代碼就叫函數(shù)，函數(shù)的定義如下：
function 函數(shù)名(參數(shù)1,參數(shù)2,……){
實現(xiàn)函數(shù)功能的代碼
……
}
舉個例子，編寫一個實現(xiàn)兩個數(shù)相加的函數(shù)，代碼塊如下：
將以上代碼復制到HTML頁面中的<script></script>之間，保存并在瀏覽器中打開，顯示結果如下：
函數(shù)的定義以function開頭，后面跟一個空格，然后是函數(shù)名，函數(shù)名遵循變量的命名方式，函數(shù)名后面是括號，括號內是函數(shù)的參數(shù)，可以沒有參數(shù)，也可以有多個參數(shù)（多個參數(shù)之間用逗號隔開），如果需要返回計算結果，使用return語句返回（無需返回結果的話就不需要使用return語句）。
七、控制語句
1、條件判斷
顧名思義，條件判斷就是判斷某一條件是否成立，然后再根據(jù)條件結果執(zhí)行相應代碼。常用的條件判斷語句為if語句，有三種常用形式：if、if else、if else if else，如下所示：
以上代碼運行結果如下：
2、循環(huán)
循環(huán)就是讓一段代碼反復執(zhí)行，直到不滿足循環(huán)條件而退出，常用的循環(huán)結構有三種for循環(huán)、while循環(huán)和do while循環(huán)，先看看for循環(huán)
for(語句1;語句2;語句3){
反復執(zhí)行的代碼
}
舉個例子：
for (var i=0; i<5; i++){
console.log(i);
}
上面的例子在瀏覽器控制臺顯示如下：
0
1
2
3
4
上面的for循環(huán)語句1為var i=0;定義循環(huán)初始變量i并賦值0；循環(huán)語句2為i<5;是循環(huán)運行判斷語句，判斷當前循環(huán)變量i是否小于5；語句3是循環(huán)內的代碼塊執(zhí)行完后執(zhí)行的語句，即循環(huán)內代碼塊執(zhí)行完后i的值加1，循環(huán)執(zhí)行完5次后i的值為5（第1次，i=0），判斷i<5時不成立，所以循環(huán)不會執(zhí)行第6次。循環(huán)內的代碼還可以是另一個循環(huán)，從而構成多重循環(huán)，以前面那個二維數(shù)組為例，看看二重循環(huán)的簡單應用
運行結果如下：依次在控制臺輸出a[0][0]至a[8][7]的值
可不可以跳過循環(huán)？答案是可以，你可以使用break語句或continue語句來跳過循環(huán)，看下面的例子：
上面的continue語句表示不執(zhí)行continue語句后面的語句，直接執(zhí)行循環(huán)中的語句3，即i++，運行結果如下：
八、簡單的類
類是面向對象程序設計語言最重要的一個功能，但是，很遺憾，JavaScript對類的支持不是很友好，我們需要自己實現(xiàn)類的相關功能。下面以一個簡單的動物類為例簡單介紹一下JavaScript的類實現(xiàn)（限于篇幅不能詳細講解），繼承關系如下圖所示：
假設動物有腿、翅膀、尾巴、喜歡的食物等屬性，有行走、飛翔，顯示喜歡食物等方法，先看看動物類的定義
很簡單，注意fly和walk方法，它們又調用了子類的方法，下面看看如何實現(xiàn)子類繼承父類的功能
是通過原型來實現(xiàn)繼承，這種方法不是很好，但很簡單，下面再看看子類的定義
定義了兩個子類Cat和Bird，通過ExtendObj()函數(shù)實現(xiàn)繼承，將上述代碼復制到HTML頁面內的<script></ script >標簽之間并保存，打開網(wǎng)頁將在控制臺顯示如下結果：
好了，終于將JavaScript基礎知識介紹完了，接下來的文章將給大家介紹HTML5標準的Canvas基礎知識，感謝你能堅持到最后，下次再見。
熱門課程推薦
熱門資訊
-
探討游戲引擎的文章，介紹了10款游戲引擎及其代表作品，涵蓋了RAGE Engine、Naughty Dog Game Engine、The Dead Engine、Cry Engine、Avalanche Engine、Anvil Engine、IW Engine、Frostbite Engine、Creation引擎、Unreal Engine等引擎。借此分析引出了游戲設計領域和數(shù)字藝術教育的重要性，歡迎點擊咨詢報名。
-
2. 手機游戲如何開發(fā)(如何制作傳奇手游，都需要準備些什么？)
?如何制作傳奇手游，都需要準備些什么？提到傳奇手游相信大家都不陌生，他是許多80、90后的回憶；從起初的端游到現(xiàn)在的手游，說明時代在進步游戲在更新，更趨于方便化移動化。而如果我們想要制作一款傳奇手游的
-
3. B站視頻剪輯軟件「必剪」：免費、炫酷特效，小白必備工具
B站視頻剪輯軟件「必剪」，完全免費、一鍵制作炫酷特效，適合新手小白?？靵碓囋?！
-
游戲中玩家將面臨武俠人生的掙扎抉擇,戰(zhàn)或降?殺或放?每個抉定都將觸發(fā)更多愛恨糾葛的精彩奇遇?！短烀嬗肪哂卸嗑€劇情多結局,不限主線發(fā)展,高自由...
-
5. Bigtime加密游戲經濟體系揭秘，不同玩家角色的經濟活動
Bigtime加密游戲經濟模型分析，探討游戲經濟特點，幫助玩家更全面了解這款GameFi產品。
-
6. 3D動漫建模全過程，不是一般人能學的會的，會的多不是人?
步驟01:面部,頸部,身體在一起這次我不準備設計圖片,我從雕刻進入。這一次,它將是一種純粹關注建模而非整體繪畫的形式。像往常一樣,我從Sphere創(chuàng)建它...
-
7. 3D動畫軟件你知道幾個?3ds Max、Blender、Maya、Houdini大比拼
當提到3D動畫軟件或動畫工具時,指的是數(shù)字內容創(chuàng)建工具。它是用于造型、建模以及繪制3D美術動畫的軟件程序。但是,在3D動畫軟件中還包含了其他類型的...
-
?三昧動漫對于著名ARPG游戲《巫師》系列，最近CD Projekt 的高層回應并不會推出《巫師4》。因為《巫師》系列在策劃的時候一直定位在“三部曲”的故事框架，所以在游戲的出品上不可能出現(xiàn)《巫師4》
-
想讓你的3D打印模型更堅固？不妨嘗試一下Cura參數(shù)設置和設計技巧，讓你輕松掌握！
-
10. Unity3D入門:手把手帶你開發(fā)一款坦克大戰(zhàn)的游戲
Unity工程創(chuàng)建完成后如圖所示: 接下來應該導入此項目所需的Unity Package文件,要用到的Unity package文件大家可以去Unity3D的官方網(wǎng)站下載(地址:ht...
最新文章
