直接上源碼教你做經(jīng)典HTML5小游戲

2020-03-17 11:54 更新

HTML5因其跨平臺(tái)性的特質(zhì)已逐漸成為網(wǎng)絡(luò)游戲開發(fā)的熱門新技術(shù)。過(guò)去，flash多媒體應(yīng)用可以用來(lái)構(gòu)建線上游戲，也是小游戲的主流形態(tài)，但是隨著HTML5的到來(lái)，改變了線上游戲的構(gòu)建方法，用HTML5制作游戲相比f(wàn)lash更加靈活方便。你還記得水果忍者嗎？尤其在iphone流暢的ios系統(tǒng)下運(yùn)行起來(lái)非常能緩解壓力，幾乎每個(gè)上班族和手機(jī)控都裝過(guò)這個(gè)游戲，現(xiàn)在已經(jīng)將其改版成HTML5，并將其開源，下面就為大家奉上切水果和其他精選HTML5小游戲源碼，enjoy！


1、切水果

自從iOS和Android興起以來(lái)，水果忍者游戲一直是這兩個(gè)平臺(tái)上面相當(dāng)熱門的游戲，很多玩家都會(huì)在工作學(xué)習(xí)之余切切水果，打發(fā)時(shí)間。今天，HTML5網(wǎng)頁(yè)版水果忍者游戲同樣給大家?guī)?lái)了不同的感覺(jué)，趕緊來(lái)試試這款好玩的HTML5網(wǎng)頁(yè)版水果忍者游戲吧。


切水果


2、中國(guó)象棋

棋類游戲在桌面游戲中已經(jīng)非常成熟，中國(guó)象棋的版本也非常多。今天這款基于HTML5技術(shù)的中國(guó)象棋游戲非常有特色，我們不僅可以選擇中國(guó)象棋的游戲難度，而且可以切換棋盤的樣式。程序?qū)懤哿?，喝上一杯咖啡，和電腦對(duì)弈幾把吧，相信這HTML5中國(guó)象棋游戲的實(shí)現(xiàn)算法你比較清楚，可以打開源碼來(lái)研究一下這款HTML5中國(guó)象棋游戲。

中國(guó)象棋


3、奇葩版Flappy Bird,HTML5 Flappy Text游戲

前段時(shí)間Flappy Bird游戲那是相當(dāng)?shù)幕?，有無(wú)數(shù)年輕人為之瘋狂，這里我們要分享一款奇葩版的Flappy Bird——HTML5 Flappy Text游戲，用若干個(gè)字母來(lái)代替bird，每觸碰一個(gè)障礙，字母就會(huì)少一個(gè)。一起來(lái)玩玩吧。

Flappy Bird

4、吃豆人游戲

HTML5吃豆人游戲，畫面上有一個(gè)吃豆人和一群怪物，你需要控制吃豆人移動(dòng)吃掉路上的小豆子，一旦吃豆人遇到怪物被吃掉的時(shí)候，你就GAME OVER了。這款HTML5游戲還有一點(diǎn)沒(méi)完善，就是吃豆人碰到怪物的時(shí)候不能被怪物吃掉，有興趣的同學(xué)可以繼續(xù)把它完善。HTML5游戲開發(fā)不僅需要技術(shù)，也需要?jiǎng)?chuàng)意。

吃豆人

5、太空戰(zhàn)機(jī)游戲

這又是一款制作精良的HTML5游戲，該HTML5游戲的主角是一架英勇威武的太空戰(zhàn)機(jī)，進(jìn)入游戲后按”Z”鍵發(fā)射子彈，消滅敵機(jī)。該HTML5戰(zhàn)機(jī)游戲的特點(diǎn)是：1、游戲畫面非常華麗逼真，并且加入聲音元素，讓游戲更加迷人；2、游戲元素很多，敵機(jī)類型和發(fā)射子彈類型也很多，讓玩家不會(huì)枯燥。

太空戰(zhàn)機(jī)

6、超級(jí)瑪麗游戲重體驗(yàn)

還記得小時(shí)候一起玩過(guò)的超級(jí)瑪麗冒險(xiǎn)游戲嗎？是的，那是我們小時(shí)候很火的一款游戲，今天老外利用HTML5技術(shù)讓超級(jí)瑪麗可以在網(wǎng)頁(yè)上跑了，HTML5版的超級(jí)瑪麗雖然沒(méi)有原版的功能強(qiáng)大，但是如果你有興趣，完全可以把它寫完善了。HTML5真的很強(qiáng)大，HTML5游戲方面更是犀利。

超級(jí)瑪麗


7、城市消消樂(lè)

很不錯(cuò)的HTML5消除游戲，同樣顏色的建筑相鄰，可以將它們進(jìn)行合成，建筑隨之升級(jí)。必要的時(shí)候可以點(diǎn)擊沒(méi)有與之相鄰的建筑物進(jìn)行拆除。游戲結(jié)束后會(huì)有當(dāng)前分?jǐn)?shù)和歷史最高分?jǐn)?shù)，有預(yù)留的分享功能待開發(fā)，有需要的下手吧！

城市消消樂(lè)


8、打地鼠

游戲功能： 
1.幫助界面 
2.游戲預(yù)備開始 
3.5種不同地鼠的隨機(jī)出現(xiàn) 
4.關(guān)卡設(shè)置，當(dāng)然有計(jì)時(shí)條顯示 
5.失敗和通過(guò)關(guān)卡設(shè)置 
6.音效設(shè)置 該游戲兼容Chrome和FF（效果最不錯(cuò)），但I(xiàn)E有問(wèn)題（聲音也播不出）。。。

打地鼠


9、捕魚達(dá)人

非常逼真的捕魚達(dá)人網(wǎng)頁(yè)游戲源碼下載，基于HTML5和JS特效實(shí)現(xiàn)，游戲動(dòng)畫非常的炫，不卡頓，大家有時(shí)間的完全可以學(xué)習(xí)學(xué)習(xí)，HTML5做游戲跟客戶端其實(shí)是各有各的優(yōu)勢(shì)，做到平衡就好。

捕魚達(dá)人



怎么運(yùn)行HTML 5游戲的源代碼

HTML5游戲是通過(guò)html+javascript+css技術(shù)開發(fā)的游戲，屬于網(wǎng)頁(yè)游戲，可以運(yùn)行在HTML5的網(wǎng)頁(yè)瀏覽器中。

運(yùn)行HTML5游戲，需要一個(gè)支持HTML5的網(wǎng)頁(yè)瀏覽器，比如IE10或11，google的chrome瀏覽器，火狐firefox，百度瀏覽器，或者UC，QQ瀏覽器，獵豹瀏覽器。早期的IE9以前的版本是不行的。瀏覽器可以到百度搜索下載，然后安裝。使用方法就是普通的上網(wǎng)。

下載的HTML5游戲文件解壓后，文件夾中會(huì)有一個(gè)后綴為html的文件，應(yīng)該是在根目錄下。其他文件可能有js后綴，css后綴，或者圖片，請(qǐng)保持相對(duì)位置不能動(dòng)。

然后下面你就需要運(yùn)行那個(gè)html文件了：

方法1：
你可以打開瀏覽器，將html文件拖拽到瀏覽器中。

方法2：
也可以在文件夾中選中html文件，點(diǎn)右鍵，在菜單選擇“打開方式”，然后選擇火狐或Chrome瀏覽器即可。

源代碼


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)