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

2020-03-17 11:54 更新

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


1、切水果

自從iOS和Android興起以來，水果忍者游戲一直是這兩個平臺上面相當熱門的游戲，很多玩家都會在工作學(xué)習(xí)之余切切水果，打發(fā)時間。今天，HTML5網(wǎng)頁版水果忍者游戲同樣給大家?guī)砹瞬煌母杏X，趕緊來試試這款好玩的HTML5網(wǎng)頁版水果忍者游戲吧。


切水果


2、中國象棋

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

中國象棋


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

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

Flappy Bird

4、吃豆人游戲

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

吃豆人

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

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

太空戰(zhàn)機

6、超級瑪麗游戲重體驗

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

超級瑪麗


7、城市消消樂

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

城市消消樂


8、打地鼠

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

打地鼠


9、捕魚達人

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

捕魚達人



怎么運行HTML 5游戲的源代碼

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

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

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

然后下面你就需要運行那個html文件了：

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

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

源代碼


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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號