使用 WebGL 為 HTML5 游戲創建逼真的地形

薦：使用NSDT 編輯器快速搭建3D應用場景

建模和 3D 地形

大多數 3D 對象是使用建模工具創建，這是有充分理由的。創建復雜對象（如飛機甚至建筑物）很難在代碼中完成。建模工具幾乎總是有意義的，但也有例外！其中之一可能是案例就像飛行拱廊島連綿起伏的丘陵一樣。我們最終使用了我們發現更簡單，甚至可能更直觀的技術：一個高度圖。

高度圖是一種使用常規二維圖像來描述像島嶼或其他地形一樣的表面。這是一種非常常見的使用方式高程數據，不僅在游戲中，而且在地理信息系統中制圖師和地質學家使用的（GIS）。

幫助您獲得想法有關其工作原理，請查看此交互式演示中的高度圖。嘗試繪圖，然后檢出生成的地形。

高度圖背后的概念很簡單。在上圖所示的圖像中，純黑色是 “地板”和純白色是最高峰。介于兩者之間的灰度顏色表示相應的高程。這為我們提供了 256 個海拔高度，這是我們游戲的大量細節。實際應用程序可能會使用完整的色譜可存儲更多層次的細節（2564 = 4，294，967，296 級詳細信息（如果包含 Alpha 通道）。

高度圖有幾個與傳統多邊形網格相比的優勢：

一、高度圖很多更緊湊。僅存儲最重要的數據（高程）。它需要以編程方式轉換為 3D 對象，但這是經典交易：您現在節省空間，稍后通過計算付款。通過存儲數據即圖像，您將獲得另一個空間優勢：您可以利用標準圖像壓縮技術并使數據變?。ㄏ啾戎拢?！

其次，高度圖是一個生成、可視化和編輯地形的便捷方式。非常直觀當你看到一個。感覺有點像看地圖。這被證明是對飛行街機特別有用。我們設計和編輯了我們的島嶼在 Photoshop 中！這使得根據需要進行小調整變得非常簡單。例如，當我們想確保跑道完全平坦時，我們只是確保以單一顏色在該區域上繪畫。

您可以看到高度圖下面的飛行拱廊?？纯茨闶欠衲馨l現我們為跑道和村莊。

飛行街機島的高度圖。它是在Photoshop中創建的，它基于著名的太平洋島鏈中的“大島”。有什么猜測嗎？

在解碼高度貼圖后映射到生成的 3D 網格上的紋理。更多內容見下文。

解碼高度圖

我們用Babylon.js建造了飛行拱廊，Babylon給了我們一個漂亮的從高度圖到 3D 的簡單路徑。Babylon提供了一個 API 來生成來自高度圖圖像的網格幾何體：

ar ground = BABYLON.Mesh.CreateGroundFromHeightMap(

'your-mesh-name',

'/path/to/heightmap.png',

100, // width of the ground mesh (x axis)
100, // depth of the ground mesh (z axis)

40, // number of subdivisions

0, // min height

50, // max height

scene,

false, // updateable?

null // callback when mesh is ready
);`

細節量是由該細分的財產決定。需要注意的是，參數是指高度圖兩側的細分數量圖像，而不是單元格總數。所以稍微增加這個數字可以對網格中的頂點總數有很大影響。

20 個細分 = 400 細胞
50 個細分 = 2，500 細胞
100 個細分 = 10，000 細胞
500 個細分 = 250，000 細胞
1，000 個細分 = 1，000，000 細胞

在下一節中，我們將了解如何為地面設置紋理，但在嘗試使用高度貼圖時創建時，查看線框很有用。這是應用簡單代碼線框紋理，因此很容易看到高度圖數據是如何轉換為的網格的頂點：

// simple wireframe material

var material = new BABYLON.StandardMaterial('ground-material', scene);

material.wireframe = true;

ground.material = material;`

創建紋理細節

一旦我們有一個模型，映射一個質地相對簡單。對于飛行街機，我們簡單地創建了一個非常大的圖像，與我們的高度圖中的島嶼相匹配。圖像得到延伸到地形的輪廓上，所以紋理和高度圖保持相關性。這真的很容易想象，再一次，所有制作工作是在Photoshop中完成的。

原始紋理圖像是創建于 4096x4096。那可是挺大的！（我們最終將尺寸減小了為了保持下載合理，級別到2048x2048，但所有使用全尺寸圖像進行開發。這是來自原始紋理。

原始島嶼紋理的全像素示例。整個城鎮只有大約300平方像素。

這些矩形表示島上城鎮的建筑。我們很快注意到我們可以在地形和其他 3D 模型。即使使用我們巨大的島嶼紋理，區別在于令人分心的明顯！

為了解決這個問題，我們“混合” 以隨機噪聲的形式進入地形紋理的附加細節。您可以請參閱下面的之前和之后。注意額外的噪點如何增強外觀地形細節。

我們創建了一個自定義著色器添加噪音。著色器為您提供了對 WebGL 3D 場景的渲染，這是著色器如何有用。

WebGL著色器由兩個組成主要部分：頂點和片段著色器。頂點的主要目標著色器是將頂點映射到渲染幀中的某個位置。片段（或像素）著色器控制像素的結果顏色。

著色器是用稱為GLSL（圖形庫著色器語言）的高級語言，它類似于C。此代碼在 GPU 上執行。深入了解如何著色器工作，請參閱此處有關如何為 Babylon.js 創建自己的自定義著色器的教程，或參閱此圖形著色器編碼初學者指南。

頂點著色器

我們不會改變我們的紋理映射到地面網格體，因此我們的頂點著色器非常簡單。它只是計算標準映射并分配目標位置。

precision mediump float;
// Attributes
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
// Uniforms
uniform mat4 worldViewProjection;
// Varying
varying vec4 vPosition;
varying vec3 vNormal;
varying vec2 vUV;
void main() {
vec4 p = vec4( position, 1.0 );
vPosition = p;
vNormal = normal;
vUV = uv;
gl_Position = worldViewProjection * p;
}

碎片著色器

我們的片段著色器有點更復雜。它結合了兩個不同的圖像：基礎圖像和混合圖像。基礎圖像映射到整個地面網格。在飛行街機中，這個是島嶼的彩色圖像。混合圖像是使用的小噪點圖像在近距離為地面提供一些紋理和細節。著色器組合每個圖像中的值以創建跨島。

飛行的最后一課街機發生在有霧的日子，所以我們的像素著色器的另一個任務是調整顏色以模擬霧。調整基于頂點的距離來自相機，遠處像素被“遮擋”得更厲害在霧中。您將在函數中看到此距離計算在主著色器代碼上方。calcFogFactor

// #ifdef GL_ES
precision highp float;
// #endif
uniform mat4 worldView;
varying vec4 vPosition;
varying vec3 vNormal;
varying vec2 vUV;
// Refs
uniform sampler2D baseSampler;
uniform sampler2D blendSampler;
uniform float blendScaleU;
uniform float blendScaleV;
// #define FOGMODE_NONE 0.
// #define FOGMODE_EXP 1.
// #define FOGMODE_EXP2 2.
// #define FOGMODE_LINEAR 3.
// #define E 2.71828
uniform vec4 vFogInfos;
uniform vec3 vFogColor;
float calcFogFactor() {
// gets distance from camera to vertex
float fogDistance = gl_FragCoord.z / gl_FragCoord.w;
float fogCoeff = 1.0;
float fogStart = vFogInfos.y;
float fogEnd = vFogInfos.z;
float fogDensity = vFogInfos.w;
if (FOGMODE_LINEAR == vFogInfos.x) {
fogCoeff = (fogEnd - fogDistance) / (fogEnd - fogStart);
}
else if (FOGMODE_EXP == vFogInfos.x) {
fogCoeff = 1.0 / pow(E, fogDistance * fogDensity);
}
else if (FOGMODE_EXP2 == vFogInfos.x) {
fogCoeff = 1.0 / pow(E, fogDistance * fogDistance * fogDensity * fogDensity);
}
return clamp(fogCoeff, 0.0, 1.0);
}
void main(void) {
vec4 baseColor = texture2D(baseSampler, vUV);
vec2 blendUV = vec2(vUV.x * blendScaleU, vUV.y * blendScaleV);
vec4 blendColor = texture2D(blendSampler, blendUV);
// multiply type blending mode
vec4 color = baseColor * blendColor;
// factor in fog color
float fog = calcFogFactor();
color.rgb = fog * color.rgb + (1.0 - fog) * vFogColor;
gl_FragColor = color;
}

我們定制的最后一件作品 Blend shader 是 Babylon 使用的 JavaScript 代碼。主要目的此代碼用于準備傳遞給頂點和像素著色器的參數。

function BlendMaterial(name, scene, options) {
this.name = name;
this.id = name;
this.options = options;
this.blendScaleU = options.blendScaleU || 1;
this.blendScaleV = options.blendScaleV || 1;
this._scene = scene;
scene.materials.push(this);
var assets = options.assetManager;
var textureTask = assets.addTextureTask('blend-material-base-task', options.baseImage);
textureTask.onSuccess = _.bind(function(task) {

    this.baseTexture = task.texture;
    this.baseTexture.uScale = 1;
    this.baseTexture.vScale = 1;
    if (options.baseHasAlpha) {
        this.baseTexture.hasAlpha = true;
    }
}, this);
textureTask = assets.addTextureTask('blend-material-blend-task', options.blendImage);
textureTask.onSuccess = _.bind(function(task) {
    this.blendTexture = task.texture;
    this.blendTexture.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
    this.blendTexture.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
}, this);

}
BlendMaterial.prototype = Object.create(BABYLON.Material.prototype);
BlendMaterial.prototype.needAlphaBlending = function () {
return (this.options.baseHasAlpha === true);
};
BlendMaterial.prototype.needAlphaTesting = function () {
return false;
};
BlendMaterial.prototype.isReady = function (mesh) {
var engine = this._scene.getEngine();
// make sure textures are ready
if (!this.baseTexture || !this.blendTexture) {
return false;
}
if (!this._effect) {
this._effect = engine.createEffect(
// shader name
"blend",
// attributes describing topology of vertices
[ "position", "normal", "uv" ],
// uniforms (external variables) defined by the shaders
[ "worldViewProjection", "world", "blendScaleU", "blendScaleV", "vFogInfos", "vFogColor" ],
// samplers (objects used to read textures)
[ "baseSampler", "blendSampler" ],
// optional define string
"");
}
if (!this._effect.isReady()) {
return false;
}
return true;
};
BlendMaterial.prototype.bind = function (world, mesh) {
var scene = this._scene;
this._effect.setFloat4("vFogInfos", scene.fogMode, scene.fogStart, scene.fogEnd, scene.fogDensity);
this._effect.setColor3("vFogColor", scene.fogColor);
this._effect.setMatrix("world", world);
this._effect.setMatrix("worldViewProjection", world.multiply(scene.getTransformMatrix()));
// Textures
this._effect.setTexture("baseSampler", this.baseTexture);
this._effect.setTexture("blendSampler", this.blendTexture);
this._effect.setFloat("blendScaleU", this.blendScaleU);
this._effect.setFloat("blendScaleV", this.blendScaleV);
};
BlendMaterial.prototype.dispose = function () {
if (this.baseTexture) {
this.baseTexture.dispose();
}
if (this.blendTexture) {
this.blendTexture.dispose();
}
this.baseDispose();
};

Babylon.js使它變得容易創建基于著色器的自定義材質。我們的混合材料相對簡單，但它確實對島嶼的外觀產生了很大的影響，當飛機低空飛到地面。著色器將 GPU 的強大功能帶到瀏覽器，擴展可應用于 3D 的創意效果類型場景。在我們的案例中，這是畫龍點名！

原文鏈接：使用 WebGL 為 HTML5 游戲創建逼真的地形

過去的兩周內，2048聲名鵲起，開發者Gabriele Cirulli差點成為阮哈東那樣的名人。但世事難料，隨后的發展連這位“原生作者”都沒趕上趟——一款與網頁版2048完全一致的App迅速上架App Store，并席卷各國免費排行榜，開發者卻不是Cabriele Cirrulli本人。

如今排在各國免費榜前列的2048并不像網頁版那樣人畜無害。此前Cabriele Cirrulli的作品并不以盈利為直接目的，沒有任何廣告，只在游戲的頁面底部加入了捐贈按鈕。而在將網頁版原封不動地移植到iOS平臺后，名為Ketchapp的開發商大大方方地加入了永久懸停的廣告。憑借著和網頁版100%的相似性與“時效性”，這款游戲先是在美區從幾十款2048仿制品里脫穎而出，位居免費榜前列。獲取到一定關注度后，接下來的事就和Flappy Bird的病毒營銷如出一轍了——借著相關話題的推波助瀾，以相當迅速的速率全球范圍流行開來。

Ketchapp的到底有什么來頭？打開他們的作品列表，一排Flappy XX赫然映入眼簾。事情到這里變得有些狗血，顯然Ketchapp是一家標準的換皮公司。在他們的9個iPhone應用里，有7個是Flappy Bird的換皮作品。哪怕在Flappy XX熱潮偃旗息鼓的3月底，這家公司依然孜孜不倦地上架了兩款同類游戲……

或許正因為有了上一次的換皮經驗，Ketchapp才能手疾眼快，搶在其它競爭者之前將2048的App上架——3月19日，遠在人們對這一熱潮引起足夠重視之前，要知道網頁版的2048也是在20號之后才逐漸廣為人知。此前的一大幫換皮公司正在忙著做各種2、3、5、8、1024……之類的變種呢。

相比自家的Flappy換皮系列，2048與原版的相似程度要高得多，畫面素材和玩法完全一致，Ketchapp唯一做的改變就是加了簡單的音效?？紤]到碩大的廣告條，網頁版在手機上的體驗甚至更舒適一些（基于html5開發，完美支持移動設備）。

在2048之前，Ketchapp符合“名不見經傳”的字面意思，基本沒有被任何媒體報道過。在2048之后，Ketchapp依然默默無聞，繼續借用別人的游戲悶聲賺大錢。沒什么人注意到登頂免費榜的是這么一部荒唐的作品。只有在2048上架當天，國外移動游戲社區Toucharcade的一位玩家表示了自己的質疑。他首先在論壇上發布了這款新作，隨后即建議大家去嘗試體驗更好網頁版，在主貼中，這位玩家表示了對App Store山寨游戲橫行的擔憂，并無不輕蔑地寫道：什么時候我們能迎來一款Flappy Threes？

Flappy和Threes，這正是今年兩次“App Store山寨運動”的起點。但與誤打誤撞走紅的Flappy Bird不同，《Threes!》是唯一可稱得上制作精良的作品，從每個細節都能看出開發者的用心。移動平臺總有一些會在第一眼就打動人的優秀作品，《Threes》就算其中之一。除了悅耳的音樂和細膩的動畫，《Thress!》最為傳神的是將每個數字都做了擬人化，從3到1536，各自都有不同的神態和配音，玩起來倍感溫馨。更難得的是，《Threes!》同時也是一款挑戰性極高的游戲，基礎規則雖然是三三疊加，但基本單位是1和2，移動方式也和2048不盡相同，更近似于平面魔方。游戲易于上手，但若想拿到768甚至1536，就需要非常強的空間思維能力和足夠好的運氣?？傊@是一款適合長期挑戰的游戲，而不是只要稍微用心就能通關，只能找一個換皮作品繼續打發時間的2048。

但現實就是這么不堪，花費兩位開發者14個月之久的《Thress》，風頭完全被簡單粗暴的模仿者們蓋過。在沉寂了兩個月，看著山寨作品層出不群，甚至山寨的山寨在排行榜上風光無限，兩位開發者再也按捺不住了，他們以獨特的方式，發出了另一種抗議。

3月27日，《Thress!》的兩位開發者公開了在游戲開發的14個月時間內所有的通信記錄(470封郵件)，以及相關所有計劃。在這個花半分鐘才能拖到底的頁面中，我們可以看到《Threes!》在開發過程中的多個雛形。Asher Vollmer和Greg Wohlwend曾嘗試了各種不同的概念、主題和游戲機制，比如頁面中的壽司、動物和國際象棋的版本。但就像設計師Asher所說的那樣，“每當加入一些東西，游戲就會變得累贅和不自然，拿掉之后就覺得像一個好游戲了”。在一年多的時間里，《Threes！》的開發歷程仿佛是2048流行的逆向演變，兩位開發者不斷去繁存簡，最終塑造出這么一款足夠簡潔，且足夠有趣的作品。

然后，成了各種換皮游戲的模版。

在2048如日中天的時刻來這么一出，難免會給人一種酸溜溜的感覺。就如同他們在前言中坦言，“這種感情很復雜，很難表達，寫這樣的東西也會讓人覺得我們是吃不到葡萄說葡萄酸?？吹轿覀兊南敕ū凰私梃b，我們很想高興一些，可即便我們盡可能地理智，依然有一種被抄襲的感覺”。平心而論，這是再合理不過的人之常情，特別是看到自己一年多的心血被人稱為“抄襲2048”的時候。但他們之所以將開發歷程公布出來，更多的是出于這樣一種心態：不希望人們將《Threes!》這個精巧的小產品當成是“一個周末的成果”（在媒體報道Cabriele Cirrulli的2048時經常會看到這樣的描述）。Asher Vollmer和Greg Wohlwend希望人們知道，一個精致的小游戲的誕生過程并不簡單，而是伴隨著無數的思考、嘗試與取舍，因為他們最終創造出的，是創意。

可惜在這個行業中，創意是最容易被模仿的。

于是，流行至今的2048只產生了三樣東西：一段過眼煙云的網絡流行文化，一個讓換皮公司趨之若鶩的熱門題材，一個讓游戲開發者心灰意冷的現實——真正用心去打磨的創意很可能只換來零星的掌聲，到頭來為他人作嫁衣裳。

模仿是最好的恭維，是這樣嗎？

覽器和 JavaScript 的功能逐年不斷的變強變大。曾幾何時，任何類型的游戲都需要Flash。但隨著 HTML5 發展，HTML5 + WebGL 游戲式就慢慢占領著這個舞臺。以下是30款流行的游戲，它們可以在所有現代瀏覽器中運行，并且只使用web技術構建。

1. HexGL

地址：http://hexgl.bkcore.com/

類型：街機，賽車

HexGL 是一款基于HTML5，JavaScript和WebGL的快節奏的賽車游戲。玩家可以使用鍵盤，觸摸屏設備或leap motion(體感控制器)來控制太空飛船。

2. CrossCode

地址：http://www.cross-code.com/en/home

類型：動作，角色扮演

一個復古靈感的2D游戲設定在遙遠的未來。這是一個充滿偉大的游戲機制，如組合，拼圖，技能樹，任務，物品等等。

3. Sketchout

地址：https://sketch-out.appspot.com/

類型：街機

Sketchout的任務保護你的行星，并通過改變流星的方向來消滅對手，通過使流星偏轉來保護您的星球并消滅對方，這款游戲有很棒的視覺效果和音樂特效。

4. Treasure Arena

地址：http://www.treasurearena.com/類型：多人，角色扮演，動作

Treasure Arena 是一款動態的競技場戰斗游戲，最多可容納4名玩家。它具有不同的游戲模式，出色的幀率和配樂，是一個非常有趣的游戲。

5. Bejeweled

地址：http://bejeweled.popcap.com/html5/

類型：街機，解謎，娛樂

HTML5格式的經典“寶石迷陣”游戲。這是一個官方克隆，因此可以正常運行且外觀完美。

6. Missile Game

地址：http://missile-game.bwhmather.com/類型：街機

這是一款非常具有挑戰性的游戲，游戲中我們扮演的是一枚被發射進隧道的導彈。游戲有很酷的黑白圖像，玩的時候會有很強的場景效果。

7. Gods Will Be Watching

地址：http://www.deconstructeam.com/games/gods-will-be-watching/類型：拼圖

在這個令人毛骨悚然（但又很棒）的游戲中，我和自己團隊必須獨自生存40天。團隊有六名成員，其中包括一只狗，一名精神病醫生和一個機器人，您必須與他們互動，以使其保持溫暖，溫飽和理智的狀態。

8. Sinuous

地址：http://www.sinuousgame.com/類型：街機

一個簡單的游戲，極簡的圖形和流暢的幀率。拾取電源時避免與紅點碰撞。此外，如果你想要那些額外的積分，就需要不停向前移動

9. Swooop

地址：http://swooop.playcanvas.com/類型：街機

在一個美麗多彩的3D世界里，到處飛翔，收集寶石和星星。

10. Free Rider HD

地址：http://www.freeriderhd.com/

Free Rider HD 是一款令人上癮的游戲，你可以在其他玩家繪制的賽道上騎自行車?？梢栽诔汕先f的播放器曲目中選擇一個播放，也可以創建自己的曲目并分享。

11. Entanglement

地址：http://entanglement.gopherwoodstudios.com/zh-CN-index.html類型:拼圖,娛樂

這個游戲的目的是通過在網格上放置線段來創建一條盡可能長的路徑。你可以單獨玩，也可以和朋友一起玩。

12. Escape from XP

地址：https://www.modern.ie/en-us/ie6countdown#escape-from-xp

類型：動作，街機

用“Escape from XP”來慶祝 Windows XP 的終結。你的任務是拯救最后一個陷入Clippy暴政的開發人員。

13. Polycraft

地址：http://polycraftgame.com/類型：角色扮演，塔防，動作

在這個很棒的3D游戲中，你到處收集資源，建造東西，完成任務。關于它的所有東西都經過拋光，并且運行也非常順暢。

14. 2048

地址：https://gabrielecirulli.github.io/2048/類型：拼圖

一個非常上癮的游戲，你可能已經玩過了。在 2048 ，你移動編號的圖塊并合并它們。當界面中最大數字是`2048 時，游戲勝利。

15. Onslaught Arena

地址：http://arcade.lostdecadegames.com/onslaught_arena/

類型:動作

一種快節奏的復古生存游戲，您可以使用不同的武器與成群的敵人作戰。

16. Angry Birds

地址：http://chrome.angrybirds.com/類型:游戲

《憤怒的小鳥》游戲，這就不用介紹了。

17. Cube Slam

地址:https://www.cubeslam.com/mcycrs

類型：街機，多人

具有豐富的色彩和炫酷的3D圖形乒乓球游戲。我們可以通過向朋友發送一個URL來挑戰他們，還可以通過網絡攝像頭看到對方。

18. The Wizard

地址：http://hypnoticowl.com/games/the-wizard/類型：動作，角色扮演，策略

Wizard 是基于回合的地牢爬行者，在里面會遇到神話般的怪物并找到奇妙的咒語。該游戲具有酷炫的戰斗機制，有時可能會帶來很大挑戰。

19. X-Type

地址：http://phoboslab.org/xtype/類型：動作，街機

在這款酷炫的太空射擊游戲中，你目的就是要起戰勝 Boss。

20. Cookie Clicker

地址：http://orteil.dashnet.org/cookieclicker/類型：休閑，搞笑

Cookie clicker 是一款可能為了開玩笑而創建的游戲，但仍然提供了大量的樂趣。你可以從0個cookie開始，然后單擊一些有效率的cookie，最后你可能會發現自己擁有數十億個cookie。

21. Elevator Saga

地址：http://play.elevatorsaga.com/類型：拼圖，編碼

這類屬于程序員類型游戲。在電梯中的任務是通過對電梯的運動進行編程，以最有效的方式運送人員，這些都是用 JavaScript 來完成的。

22. Game of Bombs

地址：http://gameofbombs.com/landing類型：動作，角色扮演，多人

Game of Bombs是一個轟炸機類型的游戲，在廣闊地圖上，都有著敵方玩家。收集力量，皮膚和成就，以成為最佳轟炸機玩家的方式。

23. Olympia Rising

地址：http://or.paleozoic.com/類型：平臺游戲，動作

Olympia Rising具有漂亮復古外觀圖形的游戲。它坐落在古希臘，在那里我們扮演的女人被賦予了重新的機會，所以我們的任務就是逃離死者的世界。

24. Pixel Race

地址: https://ned.im/pixel-race-game/類型：街機，賽車

Pixel Race是一款簡單概念概念，你可以在收集硬幣的同時控制汽車以避開障礙物。如果有足夠的耐心和空閑時間，那么你可能會打破記錄（記錄為36309個硬幣）。

25. Little Alchemy

地址：https://littlealchemy.com/類型：拼圖

從這四個基本元素開始，將它們組合起來，創建510種可能的組合。

26. Arena5

地址：http://www.kevs3d.co.uk/dev/arena5/類型：街機

在數字領域中飛行并射擊幾何敵人以獲得高分。

27.Vector Runner Remix

地址:https://vector-runner-remix.tresensa.com/

類型：街機

在這個充滿色彩和幾何形狀的平臺游戲中，盡你所能奔跑吧。

28. Biolab Disaster

地址：http://playbiolab.com/類型:動作

一款出色的像素藝術平臺游戲，你必須在這里逃脫充滿突變生物和其他不良生物的實驗室。

29. World's Biggest PAC-MAN

地址:http://worldsbiggestpacman.com/#類型：街機

30. New Super Resident Raver

地址：http://games.jessefreeman.com/new-super-resident-raver/

從即將到來的僵尸入侵中拯救驚慌失措的人們。收集錢，升級你的武器和戰斗僵尸。

作者：Danny Markov 來源：tutorialzin 譯者：前端小智

原文：https://tutorialzine.com/2015/02/30-amazing-games-made-only-with-html5

在線咨詢

上一篇：CSS 垂直居中方法匯總
下一篇：文章采集網站源碼（php采集系統）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商