整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
發(fā)基于 WebGL 的網(wǎng)頁(yè)游戲涉及多個(gè)步驟，包括游戲概念的設(shè)計(jì)、圖形資源的創(chuàng)建、編碼和調(diào)試等。以下是一個(gè)一般性的步驟指南，希望對(duì)大家有所幫助。北京木奇移動(dòng)技術(shù)有限公司，專業(yè)的軟件外包開(kāi)發(fā)公司，歡迎交流合作。
請(qǐng)注意，這只是一個(gè)一般性的開(kāi)發(fā)流程，具體的步驟可能因項(xiàng)目的規(guī)模和復(fù)雜性而有所不同。在整個(gè)過(guò)程中，文檔、版本控制和團(tuán)隊(duì)協(xié)作也是關(guān)鍵的因素，尤其是在大型項(xiàng)目中。
對(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文件位置及名稱， 例如：
<html>
<body onload="main()">
<script src="first.js"></script>
</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)行注釋，有兩種方式，第一種：多行注釋，以"/*"開(kāi)頭，然后增加注釋文字，最后以"*/"結(jié)尾，例如：
第二種：?jiǎn)涡凶⑨專?#34;//"開(kāi)頭，只能添加一行注釋文字，例如：
四、數(shù)據(jù)類型
JavaScript 有多種數(shù)據(jù)類型：數(shù)字，字符串，數(shù)組，對(duì)象等等，例如：
其中數(shù)字、字符串類型較簡(jiǎn)單，數(shù)組、對(duì)象類型較復(fù)雜，下面再簡(jiǎn)單說(shuō)說(shuō)數(shù)組和對(duì)象類型。
1、數(shù)組
JavaScript 數(shù)組（Array）是有序數(shù)據(jù)的集合，數(shù)組中的每個(gè)成員被稱為元素（Element），每個(gè)元素的名稱（鍵）被稱為數(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ù)組稱為多維數(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);
即，先將數(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í)行，直到不滿足循環(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)顯示如下：
0
1
2
3
4
上面的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)單的類
類是面向?qū)ο蟪绦蛟O(shè)計(jì)語(yǔ)言最重要的一個(gè)功能，但是，很遺憾，JavaScript對(duì)類的支持不是很友好，我們需要自己實(shí)現(xiàn)類的相關(guān)功能。下面以一個(gè)簡(jiǎn)單的動(dòng)物類為例簡(jiǎn)單介紹一下JavaScript的類實(shí)現(xiàn)（限于篇幅不能詳細(xì)講解），繼承關(guān)系如下圖所示：
假設(shè)動(dòng)物有腿、翅膀、尾巴、喜歡的食物等屬性，有行走、飛翔，顯示喜歡食物等方法，先看看動(dòng)物類的定義
很簡(jiǎn)單，注意fly和walk方法，它們又調(diào)用了子類的方法，下面看看如何實(shí)現(xiàn)子類繼承父類的功能
是通過(guò)原型來(lái)實(shí)現(xiàn)繼承，這種方法不是很好，但很簡(jiǎn)單，下面再看看子類的定義
定義了兩個(gè)子類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)。
上有很多有助于學(xué)習(xí)CSS的游戲，本文收集了一些非常實(shí)用的免費(fèi)CSS游戲，希望這些游戲可以幫助你再次體驗(yàn)CSS的樂(lè)趣！
作者 | Andreas Müller
譯者 | 彎月，責(zé)編 | 郭芮
出品 | CSDN（ID：CSDNnews）
以下為譯文：
我必須承認(rèn)，我的記性不是很好。特別是我記不住CSS，例如Flexbox布局等。flex容器的屬性justify-content可以有12種以上的不同值，其中許多可以與關(guān)鍵字safe或unsafe組合。詳細(xì)說(shuō)明可以參照這篇文章《CSS技巧：flexbox的完整指南》（https://css-tricks.com/snippets/css/a-guide-to-flexbox/），這個(gè)頁(yè)面只有兩列，高度卻超過(guò)了2萬(wàn)像素，雖然文章題目表明這是一篇完整的指南，但實(shí)際上文中并沒(méi)有覆蓋到所有內(nèi)容。
最近，我在偶然間發(fā)現(xiàn)了一款塔防式的flexbox教學(xué)游戲，這款游戲真的是……
等等，你說(shuō)什么？
你沒(méi)聽(tīng)錯(cuò)，事實(shí)證明，網(wǎng)上的確有很多有助于學(xué)習(xí)CSS的游戲。我收集了一些非常實(shí)用的免費(fèi)CSS游戲，希望這些游戲也可以幫助你再次體驗(yàn)CSS的樂(lè)趣！
Flexbox Defense
上述我提到的就是這款游戲。它涵蓋了flex的屬性align-items、justify-content、flex-direction、align-self和order，游戲本身總共有12關(guān)。特別是最后4關(guān)非常有趣，而且難度也很高。
游戲地址：http://www.flexboxdefense.com
代碼庫(kù)：https://github.com/channingallen/tower-defense
作者：Channing Allen
Flexbox Froggy
這也是一款涉及Flexbox的游戲，它涵蓋的flex屬性更多：align-items、justify-content、align-content、flex-direction、align-self、flex-wrap和flex-flow，而且游戲總共有24關(guān)，如果你打通關(guān)了，別忘了告訴我啊。
游戲地址：https://flexboxfroggy.com
代碼庫(kù)：https://github.com/thomaspark/flexboxfroggy
作者：Codepip
Grid Garden
這款游戲總共有28關(guān)，你可以從中學(xué)習(xí)CSS網(wǎng)格布局。它涵蓋了以下網(wǎng)格屬性：grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area、order、grid-template-columns、grid-template-rows以及grid-template。
游戲地址：https://cssgridgarden.com
代碼庫(kù)：https://github.com/thomaspark/gridgarden
作者：Codepip
CSS Diner
這是一款有關(guān)各種CSS選擇器的小游戲，總共有32關(guān)，打通關(guān)后你就可以自詡為CSS選擇器專家了，而且你會(huì)越玩越餓。
游戲地址：http://flukeout.github.io
代碼庫(kù)：https://github.com/flukeout/css-diner
作者：Luke Pacholski
Unfold
這不完全是一款游戲，更像是一個(gè)有關(guān)CSS 3D變換的交互式演示。你可能會(huì)覺(jué)得無(wú)聊，但請(qǐng)相信我，游戲里面的動(dòng)畫(huà)非常燃，而且你肯定會(huì)覺(jué)得純CSS不可能做出這樣的效果。
游戲地址：https://rupl.github.io/unfold
代碼庫(kù)：https://github.com/rupl/unfold
作者：Chris Ruppel
Roadmap
你需要一定的技巧和速度才能打通關(guān)這款游戲，但游戲本身是只用CSS和HTML制作的。它并非直接地講解了CSS，而且通過(guò)研究源代碼學(xué)習(xí)了很多有關(guān)clip-path、transform和帶有@keyframes的動(dòng)畫(huà)知識(shí)！請(qǐng)?jiān)谙路搅粞?，告訴我們你總共嘗試了幾次才通關(guān)，我試了8次！
游戲地址：http://victordarras.fr/cssgame
作者：Victor Darras
Carnival
你需要在8秒內(nèi)擊中所有目標(biāo)！這是一款很不錯(cuò)的CSS小游戲，使用了復(fù)選框和CSS動(dòng)畫(huà)。
游戲地址：https://codepen.io/una/pen/NxZaNr
作者：Una Kravets
Tic-Tac-Toe （井字棋游戲）
這是一款經(jīng)典的小游戲。這款純CSS的井字棋游戲只有2關(guān)，也使用了復(fù)選框和CSS動(dòng)畫(huà)。
游戲地址：https://codepen.io/alvaromontoro/pen/BexWOw
作者：Alvaro Montoro
Flexbox Zombies
這款游戲帶有故事情節(jié)，你可以從中學(xué)習(xí)如何使用Flexbox和弩來(lái)打僵尸。這款游戲需要注冊(cè)。
游戲地址：https://mastery.games/p/flexbox-zombies
價(jià)格：179美元
作者：Dave Geddes
Service Workies
在這款冒險(xiǎn)游戲中，你可以學(xué)習(xí)如何避免PWA的陷阱。你可以提高自己的技術(shù)力，并與游戲中的角色一起成長(zhǎng)。也許你可以試著殺死在可憐的村子里肆虐了幾個(gè)世紀(jì)的兇猛野獸！這款游戲需要注冊(cè)。
游戲地址：https://serviceworkies.com
價(jià)格：179美元
作者：Dave Geddes
Grid Critters
在這款游戲中，你掌握CSS Grid的旅程始于這位神秘的Grid勇士。你的任務(wù)是使用強(qiáng)大的Grid工具來(lái)拯救外星生物，使其免于滅絕。這款游戲需要注冊(cè)。
游戲地址：https://gridcritters.com
價(jià)格：179美元
作者：Dave Geddes
總結(jié)
不論你是初學(xué)者還是專家，我都希望你能夠在玩游戲的同時(shí)又能學(xué)習(xí)一些有關(guān)CSS的知識(shí)！另外，你可以在Codepen上找到很多只用HTML和CSS創(chuàng)建的非常很棒的游戲。
你還知道哪些非常有趣的學(xué)習(xí)CSS的游戲？請(qǐng)?jiān)谙路搅粞浴?/p>
原文：https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f
本文為 CSDN 翻譯，轉(zhuǎn)載請(qǐng)注明來(lái)源出處。
【END】
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
