當(dāng)前位置：首頁(yè) >游戲設(shè)計(jì) >怎么開(kāi)發(fā)網(wǎng)頁(yè)游戲(網(wǎng)頁(yè)游戲開(kāi)發(fā)基礎(chǔ))

怎么開(kāi)發(fā)網(wǎng)頁(yè)游戲(網(wǎng)頁(yè)游戲開(kāi)發(fā)基礎(chǔ))

發(fā)布時(shí)間：2023-11-27 19:15:47 瀏覽量：141次

?網(wǎng)頁(yè)游戲開(kāi)發(fā)基礎(chǔ)

　　對(duì)于初學(xué)編程的朋友來(lái)說(shuō)，這篇文章有點(diǎn)長(zhǎng)，而且會(huì)有點(diǎn)難懂。但是請(qǐng)不要放棄，我盡量以通俗的語(yǔ)言解釋相關(guān)的編程概念，這里只講解編寫(xiě)一個(gè)游戲需要的相關(guān)編程概念（如需要會(huì)在后面的文章中隨時(shí)補(bǔ)充相關(guān)概念），對(duì)其余未涉及的編程概念大家可以自行搜索學(xué)習(xí)。本文都是簡(jiǎn)單的編程概念，請(qǐng)耐心看完，如有疑問(wèn)歡迎與我交流。本人水平有限，如有錯(cuò)誤歡迎指正。

　　正如有人的地方就有江湖，有瀏覽器的地方就有JavaScript。那么什么是JavaScript呢？JavaScript 是世界上最流行的腳本語(yǔ)言，它適用于PC、筆記本電腦、平板電腦和手機(jī)。JavaScript 是一種輕量級(jí)的編程語(yǔ)言，JavaScript 是可插入HTML 頁(yè)面的代碼，JavaScript 插入 HTML 頁(yè)面后，可由所有的現(xiàn)代瀏覽器執(zhí)行，JavaScript 很容易學(xué)習(xí)，沒(méi)有想象中的那么復(fù)雜。

　　一、如何在網(wǎng)頁(yè)中添加JavaScript代碼

　　HTML 中的腳本必須位于<script>與</script>標(biāo)簽之間，有兩種方式，第一種方式，在<script>與</script>標(biāo)簽之間直接添加JavaScript代碼，例如：<script type="text/javascript">alert("Hello World!");</script>，打開(kāi)含有上述代碼的網(wǎng)頁(yè)將顯示一個(gè)對(duì)話框（alert是一個(gè)函數(shù)，作用是彈出一個(gè)含有信息的對(duì)話框），如下圖所示：

　　第二種方式是把JavaScript腳本保存到外部文件中，這樣代碼可以被多個(gè)網(wǎng)頁(yè)使用。外部 JavaScript 文件的文件擴(kuò)展名是js。如以外部文件方式引用JavaScript，需要在<script>標(biāo)簽的 "src" 屬性中設(shè)置該.js文件位置及名稱(chēng)，　例如：

　　<html>

　　</body>

　　</html>

　　first.js文件代碼如下：

　　function main(){

　　　　alert("Hello World!");

　　}

　　打開(kāi)這個(gè)網(wǎng)頁(yè)，顯示的結(jié)果與上圖一致。其中<body>標(biāo)簽中的onload="main()"表示網(wǎng)頁(yè)加載完畢后調(diào)用main()函數(shù)（后面會(huì)介紹什么是函數(shù)）。

　　二、JavaScript變量

　　變量用來(lái)存儲(chǔ)值或計(jì)算結(jié)果，JavaScript使用關(guān)鍵字var來(lái)定義變量，使用等號(hào)來(lái)為變量賦值，例如：

　　var x, length;

　　x = 5;

　　length = 6;

　　執(zhí)行以上語(yǔ)句后，變量x的值為5，變量length的值為6。（提示：為保持代碼可讀性建議每行以;結(jié)尾，每行開(kāi)頭適當(dāng)添加空格縮進(jìn)）

　　變量名約定：JavaScript變量名必須以字母、下劃線_或美元符$開(kāi)頭，后續(xù)的字符可以是字母、數(shù)字、下劃線或美元符（數(shù)字是不允許作為首字符出現(xiàn)的，以便 JavaScript 可以輕易區(qū)分開(kāi)標(biāo)識(shí)符和數(shù)字），注意：變量名區(qū)分大小寫(xiě)。

　　注意：JavaScript變量名不能是保留字（詳細(xì)的保留字請(qǐng)自行搜索），否則會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤提示，如下圖：

　　三、注釋

　　為了增強(qiáng)代碼的可讀性，可以對(duì)相應(yīng)代碼進(jìn)行注釋?zhuān)袃煞N方式，第一種：多行注釋?zhuān)?/*"開(kāi)頭，然后增加注釋文字，最后以"*/"結(jié)尾，例如：

　　第二種：?jiǎn)涡凶⑨專(zhuān)?https://"開(kāi)頭，只能添加一行注釋文字，例如：

　　四、數(shù)據(jù)類(lèi)型

　　JavaScript 有多種數(shù)據(jù)類(lèi)型：數(shù)字，字符串，數(shù)組，對(duì)象等等，例如：

　　其中數(shù)字、字符串類(lèi)型較簡(jiǎn)單，數(shù)組、對(duì)象類(lèi)型較復(fù)雜，下面再簡(jiǎn)單說(shuō)說(shuō)數(shù)組和對(duì)象類(lèi)型。

　　1、數(shù)組

　　JavaScript 數(shù)組（Array）是有序數(shù)據(jù)的集合，數(shù)組中的每個(gè)成員被稱(chēng)為元素（Element），每個(gè)元素的名稱(chēng)（鍵）被稱(chēng)為數(shù)組下標(biāo)（Index），注意：下標(biāo)從0開(kāi)始。JavaScript 常用的定義（創(chuàng)建或者聲明）數(shù)組方法有兩種：構(gòu)造數(shù)組和數(shù)組直接量。

　　a4[2]表示訪問(wèn)a4數(shù)組的第三個(gè)元素（下標(biāo)從0開(kāi)始），即3。

　　數(shù)組的元素可以為數(shù)字、字符串、對(duì)象，還可以是數(shù)組，元素為數(shù)組的數(shù)組稱(chēng)為多維數(shù)組，下面是一個(gè)二維數(shù)組（可以把它想像成一個(gè)9行8列的表格）

　　如何定義這個(gè)數(shù)組呢？分兩步來(lái)定義，首先定義一個(gè)數(shù)組（有9個(gè)元素）：

　　var a=new Array(9);

　　然后將這個(gè)數(shù)組的元素依次定義成一個(gè)數(shù)組

　　a[0]=new Array(8);

　　a[1]=new Array(8);

　　……

　　a[8]=new Array(8);

怎么開(kāi)發(fā)網(wǎng)頁(yè)游戲(網(wǎng)頁(yè)游戲開(kāi)發(fā)基礎(chǔ))

　　即，先將數(shù)組的行定義出來(lái)，再定義每一行中的元素?，F(xiàn)在要訪問(wèn)數(shù)組a的元素的話需要兩個(gè)坐標(biāo)——行、列坐標(biāo)，例如：訪問(wèn)第5行第4列的元素，a[4][3]

　　2、對(duì)象

　　對(duì)象可以存儲(chǔ)復(fù)雜的數(shù)據(jù)，那么什么是對(duì)象呢？計(jì)算機(jī)程序設(shè)計(jì)教材上關(guān)于對(duì)象的定義比較抽象，用我自己的話來(lái)說(shuō)，就是將客觀世界中的事物特征和行為用計(jì)算機(jī)語(yǔ)言來(lái)描述并保存至一個(gè)變量中，這個(gè)變量就叫對(duì)象。以人為例，每個(gè)人的特征都不一樣（性別、身高、體重……），但都有相同的行為（說(shuō)話、行走、睡覺(jué)……）。常用的對(duì)象定義方式有兩種：構(gòu)造對(duì)象和直接定義對(duì)象，先看看構(gòu)造對(duì)象的方法

　　上面是構(gòu)造對(duì)象的一般方法，即先構(gòu)造一個(gè)Object對(duì)象，然后再定義對(duì)象的屬性（特征），接著定義對(duì)象的方法（行為），為遵循面向?qū)ο蟮某绦蛟O(shè)計(jì)方法，一般需要提供訪問(wèn)屬性的方法，例如：獲取年齡的方法getAge和修改年齡的方法setAge，注意這兩個(gè)方法中的this表示的是當(dāng)前對(duì)象。將以上代碼復(fù)制到HTML文件<script></script>標(biāo)簽之間，保存并在瀏覽器里打開(kāi)，控制臺(tái)（chrome瀏覽器按F12鍵顯示控制臺(tái)）顯示結(jié)果如下：

　　下面看看直接定義對(duì)象

　　將以上代碼復(fù)制到HTML文件<script></script>標(biāo)簽之間，保存并在瀏覽器里打開(kāi)，顯示結(jié)果如下：

　　五、運(yùn)算符

　　JavaScript常用的運(yùn)算符有算術(shù)運(yùn)算符、比較運(yùn)算符和邏輯運(yùn)算符

　　注意自增和自減運(yùn)算符，如果運(yùn)算符在變量前面則先執(zhí)行自增（自減）運(yùn)算，再將結(jié)果賦給x

　　注意：TRUE、FALSE表示真、假，用于條件判斷，例如：if語(yǔ)句（見(jiàn)本文后面部分）。運(yùn)算符的優(yōu)先級(jí)為：算術(shù)運(yùn)算符最高，比較運(yùn)算符其次，邏輯運(yùn)算符最低，可以通過(guò)小括號(hào)改變運(yùn)算優(yōu)先級(jí)。

　　六、函數(shù)

　　為了讓代碼能重復(fù)使用，把實(shí)現(xiàn)某一功能的代碼寫(xiě)在一段代碼塊內(nèi)（以{開(kāi)頭，}結(jié)尾），這段代碼就叫函數(shù)，函數(shù)的定義如下：

　　function 函數(shù)名(參數(shù)1,參數(shù)2,……){

　　　實(shí)現(xiàn)函數(shù)功能的代碼

　　　……

　　}

　　舉個(gè)例子，編寫(xiě)一個(gè)實(shí)現(xiàn)兩個(gè)數(shù)相加的函數(shù)，代碼塊如下：

　　將以上代碼復(fù)制到HTML頁(yè)面中的<script></script>之間，保存并在瀏覽器中打開(kāi)，顯示結(jié)果如下：

　　函數(shù)的定義以function開(kāi)頭，后面跟一個(gè)空格，然后是函數(shù)名，函數(shù)名遵循變量的命名方式，函數(shù)名后面是括號(hào)，括號(hào)內(nèi)是函數(shù)的參數(shù)，可以沒(méi)有參數(shù)，也可以有多個(gè)參數(shù)（多個(gè)參數(shù)之間用逗號(hào)隔開(kāi)），如果需要返回計(jì)算結(jié)果，使用return語(yǔ)句返回（無(wú)需返回結(jié)果的話就不需要使用return語(yǔ)句）。

　　七、控制語(yǔ)句

　　1、條件判斷

　　顧名思義，條件判斷就是判斷某一條件是否成立，然后再根據(jù)條件結(jié)果執(zhí)行相應(yīng)代碼。常用的條件判斷語(yǔ)句為if語(yǔ)句，有三種常用形式：if、if else、if else if else，如下所示：

　　以上代碼運(yùn)行結(jié)果如下：

　　2、循環(huán)

　　循環(huán)就是讓一段代碼反復(fù)執(zhí)行，直到不滿(mǎn)足循環(huán)條件而退出，常用的循環(huán)結(jié)構(gòu)有三種for循環(huán)、while循環(huán)和do while循環(huán)，先看看for循環(huán)

　　for(語(yǔ)句1;語(yǔ)句2;語(yǔ)句3){

　　　反復(fù)執(zhí)行的代碼

　　}

　　舉個(gè)例子：

　　for (var i=0; i<5; i++){

　　　console.log(i);

　　}

　　上面的例子在瀏覽器控制臺(tái)顯示如下：

　　上面的for循環(huán)語(yǔ)句1為var i=0;定義循環(huán)初始變量i并賦值0；循環(huán)語(yǔ)句2為i<5;是循環(huán)運(yùn)行判斷語(yǔ)句，判斷當(dāng)前循環(huán)變量i是否小于5；語(yǔ)句3是循環(huán)內(nèi)的代碼塊執(zhí)行完后執(zhí)行的語(yǔ)句，即循環(huán)內(nèi)代碼塊執(zhí)行完后i的值加1，循環(huán)執(zhí)行完5次后i的值為5（第1次，i=0），判斷i<5時(shí)不成立，所以循環(huán)不會(huì)執(zhí)行第6次。循環(huán)內(nèi)的代碼還可以是另一個(gè)循環(huán)，從而構(gòu)成多重循環(huán)，以前面那個(gè)二維數(shù)組為例，看看二重循環(huán)的簡(jiǎn)單應(yīng)用

　　運(yùn)行結(jié)果如下：依次在控制臺(tái)輸出a[0][0]至a[8][7]的值

　　可不可以跳過(guò)循環(huán)？答案是可以，你可以使用break語(yǔ)句或continue語(yǔ)句來(lái)跳過(guò)循環(huán)，看下面的例子：

　　上面的continue語(yǔ)句表示不執(zhí)行continue語(yǔ)句后面的語(yǔ)句，直接執(zhí)行循環(huán)中的語(yǔ)句3，即i++，運(yùn)行結(jié)果如下：

　　八、簡(jiǎn)單的類(lèi)

　　類(lèi)是面向?qū)ο蟪绦蛟O(shè)計(jì)語(yǔ)言最重要的一個(gè)功能，但是，很遺憾，JavaScript對(duì)類(lèi)的支持不是很友好，我們需要自己實(shí)現(xiàn)類(lèi)的相關(guān)功能。下面以一個(gè)簡(jiǎn)單的動(dòng)物類(lèi)為例簡(jiǎn)單介紹一下JavaScript的類(lèi)實(shí)現(xiàn)（限于篇幅不能詳細(xì)講解），繼承關(guān)系如下圖所示：

　　假設(shè)動(dòng)物有腿、翅膀、尾巴、喜歡的食物等屬性，有行走、飛翔，顯示喜歡食物等方法，先看看動(dòng)物類(lèi)的定義

　　很簡(jiǎn)單，注意fly和walk方法，它們又調(diào)用了子類(lèi)的方法，下面看看如何實(shí)現(xiàn)子類(lèi)繼承父類(lèi)的功能

　　是通過(guò)原型來(lái)實(shí)現(xiàn)繼承，這種方法不是很好，但很簡(jiǎn)單，下面再看看子類(lèi)的定義

　　定義了兩個(gè)子類(lèi)Cat和Bird，通過(guò)ExtendObj()函數(shù)實(shí)現(xiàn)繼承，將上述代碼復(fù)制到HTML頁(yè)面內(nèi)的<script></ script >標(biāo)簽之間并保存，打開(kāi)網(wǎng)頁(yè)將在控制臺(tái)顯示如下結(jié)果：

　　好了，終于將JavaScript基礎(chǔ)知識(shí)介紹完了，接下來(lái)的文章將給大家介紹HTML5標(biāo)準(zhǔn)的Canvas基礎(chǔ)知識(shí)，感謝你能堅(jiān)持到最后，下次再見(jiàn)。

上一篇北師大未來(lái)設(shè)計(jì)學(xué)院在第六屆中國(guó)教博會(huì)發(fā)布五項(xiàng)PBL大挑戰(zhàn)項(xiàng)目

下一篇怎么開(kāi)發(fā)軟件游戲(如何開(kāi)發(fā)一款手機(jī)攻略游戲APP？)

激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

怎么開(kāi)發(fā)網(wǎng)頁(yè)游戲(網(wǎng)頁(yè)游戲開(kāi)發(fā)基礎(chǔ))

?網(wǎng)頁(yè)游戲開(kāi)發(fā)基礎(chǔ)

請(qǐng)綁定手機(jī)號(hào)