整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
薦：使用NSDT 編輯器快速搭建3D應(yīng)用場(chǎng)景
大多數(shù) 3D 對(duì)象是 使用建模工具創(chuàng)建，這是有充分理由的。創(chuàng)建復(fù)雜對(duì)象 （如飛機(jī)甚至建筑物）很難在代碼中完成。建模工具 幾乎總是有意義的，但也有例外！其中之一可能是案例 就像飛行拱廊島連綿起伏的丘陵一樣。我們最終使用了 我們發(fā)現(xiàn)更簡(jiǎn)單，甚至可能更直觀的技術(shù)：一個(gè) 高度圖。
高度圖是一種 使用常規(guī)二維圖像來(lái)描述 像島嶼或其他地形一樣的表面。這是一種非常常見(jiàn)的使用方式 高程數(shù)據(jù)，不僅在游戲中，而且在地理信息系統(tǒng)中 制圖師和地質(zhì)學(xué)家使用的 （GIS）。
幫助您獲得想法 有關(guān)其工作原理，請(qǐng)查看此交互式演示中的高度圖。嘗試?yán)L圖 ，然后檢出生成的地形。
高度圖背后的概念 很簡(jiǎn)單。在上圖所示的圖像中，純黑色是 “地板”和純白色是最高峰。介于兩者之間的灰度顏色 表示相應(yīng)的高程。這為我們提供了 256 個(gè)海拔高度，這 是我們游戲的大量細(xì)節(jié)。實(shí)際應(yīng)用程序可能會(huì)使用完整的 色譜可存儲(chǔ)更多層次的細(xì)節(jié)（2564 = 4，294，967，296 級(jí) 詳細(xì)信息（如果包含 Alpha 通道）。
高度圖有幾個(gè) 與傳統(tǒng)多邊形網(wǎng)格相比的優(yōu)勢(shì)：
一、高度圖很多 更緊湊。僅存儲(chǔ)最重要的數(shù)據(jù)（高程）。它 需要以編程方式轉(zhuǎn)換為 3D 對(duì)象，但這是 經(jīng)典交易：您現(xiàn)在節(jié)省空間，稍后通過(guò)計(jì)算付款。通過(guò)存儲(chǔ) 數(shù)據(jù)即圖像，您將獲得另一個(gè)空間優(yōu)勢(shì)：您可以利用標(biāo)準(zhǔn) 圖像壓縮技術(shù)并使數(shù)據(jù)變小（相比之下）！
其次，高度圖是一個(gè) 生成、可視化和編輯地形的便捷方式。非常直觀 當(dāng)你看到一個(gè)。感覺(jué)有點(diǎn)像看地圖。這被證明是 對(duì)飛行街機(jī)特別有用。我們?cè)O(shè)計(jì)和編輯了我們的島嶼 在 Photoshop 中！這使得根據(jù)需要進(jìn)行小調(diào)整變得非常簡(jiǎn)單。 例如，當(dāng)我們想確保跑道完全平坦時(shí)， 我們只是確保以單一顏色在該區(qū)域上繪畫(huà)。
您可以看到高度圖 下面的飛行拱廊。看看你是否能發(fā)現(xiàn)我們?yōu)?跑道和村莊。
飛行街機(jī)島的高度圖。它是在Photoshop中創(chuàng)建的，它基于著名的太平洋島鏈中的“大島”。有什么猜測(cè)嗎？
在解碼高度貼圖后映射到生成的 3D 網(wǎng)格上的紋理。更多內(nèi)容見(jiàn)下文。
我們用Babylon.js建造了飛行拱廊，Babylon給了我們一個(gè)漂亮的 從高度圖到 3D 的簡(jiǎn)單路徑。Babylon提供了一個(gè) API 來(lái)生成 來(lái)自高度圖圖像的網(wǎng)格幾何體：
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
);`
細(xì)節(jié)量是 由該細(xì)分的財(cái)產(chǎn)決定。需要注意的是， 參數(shù)是指高度圖兩側(cè)的細(xì)分?jǐn)?shù)量 圖像，而不是單元格總數(shù)。所以稍微增加這個(gè)數(shù)字可以 對(duì)網(wǎng)格中的頂點(diǎn)總數(shù)有很大影響。
在下一節(jié)中，我們將 了解如何為地面設(shè)置紋理，但在嘗試使用高度貼圖時(shí) 創(chuàng)建時(shí)，查看線框很有用。這是應(yīng)用簡(jiǎn)單代碼 線框紋理，因此很容易看到高度圖數(shù)據(jù)是如何轉(zhuǎn)換為的 網(wǎng)格的頂點(diǎn)：
// simple wireframe material
var material = new BABYLON.StandardMaterial('ground-material', scene);
material.wireframe = true;
ground.material = material;`
一旦我們有一個(gè)模型，映射一個(gè) 質(zhì)地相對(duì)簡(jiǎn)單。對(duì)于飛行街機(jī)，我們簡(jiǎn)單地創(chuàng)建了一個(gè) 非常大的圖像，與我們的高度圖中的島嶼相匹配。圖像得到 延伸到地形的輪廓上，所以紋理和高度圖 保持相關(guān)性。這真的很容易想象，再一次，所有 制作工作是在Photoshop中完成的。
原始紋理圖像是 創(chuàng)建于 4096x4096。那可是挺大的?。ㄎ覀冏罱K將尺寸減小了 為了保持下載合理，級(jí)別到2048x2048，但所有 使用全尺寸圖像進(jìn)行開(kāi)發(fā)。這是來(lái)自 原始紋理。
原始島嶼紋理的全像素示例。整個(gè)城鎮(zhèn)只有大約300平方像素。
這些矩形表示 島上城鎮(zhèn)的建筑。我們很快注意到 我們可以在地形和 其他 3D 模型。即使使用我們巨大的島嶼紋理，區(qū)別在于 令人分心的明顯！
為了解決這個(gè)問(wèn)題，我們“混合” 以隨機(jī)噪聲的形式進(jìn)入地形紋理的附加細(xì)節(jié)。您可以 請(qǐng)參閱下面的之前和之后。注意額外的噪點(diǎn)如何增強(qiáng)外觀 地形細(xì)節(jié)。
我們創(chuàng)建了一個(gè)自定義著色器 添加噪音。著色器為您提供了對(duì) WebGL 3D 場(chǎng)景的渲染，這是著色器如何 有用。
WebGL著色器由兩個(gè)組成 主要部分：頂點(diǎn)和片段著色器。頂點(diǎn)的主要目標(biāo) 著色器是將頂點(diǎn)映射到渲染幀中的某個(gè)位置。片段（或 像素）著色器控制像素的結(jié)果顏色。
著色器是用 稱(chēng)為GLSL（圖形庫(kù)著色器語(yǔ)言）的高級(jí)語(yǔ)言，它 類(lèi)似于C。此代碼在 GPU 上執(zhí)行。深入了解如何 著色器工作，請(qǐng)參閱此處 有關(guān)如何為 Babylon.js 創(chuàng)建自己的自定義著色器的教程，或參閱此圖形著色器編碼初學(xué)者指南。
我們不會(huì)改變我們的 紋理映射到地面網(wǎng)格體，因此我們的頂點(diǎn)著色器非常簡(jiǎn)單。 它只是計(jì)算標(biāo)準(zhǔn)映射并分配目標(biāo)位置。
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;
}
我們的片段著色器有點(diǎn) 更復(fù)雜。它結(jié)合了兩個(gè)不同的圖像：基礎(chǔ)圖像和混合圖像。 基礎(chǔ)圖像映射到整個(gè)地面網(wǎng)格。在飛行街機(jī)中，這個(gè) 是島嶼的彩色圖像?；旌蠄D像是使用的小噪點(diǎn)圖像 在近距離為地面提供一些紋理和細(xì)節(jié)。著色器 組合每個(gè)圖像中的值以創(chuàng)建跨 島。
飛行的最后一課 街機(jī)發(fā)生在有霧的日子，所以我們的像素著色器的另一個(gè)任務(wù)是 調(diào)整顏色以模擬霧。調(diào)整基于頂點(diǎn)的距離 來(lái)自相機(jī)，遠(yuǎn)處像素被“遮擋”得更厲害 在霧中。您將在函數(shù)中看到此距離計(jì)算 在主著色器代碼上方。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 代碼。主要目的 此代碼用于準(zhǔn)備傳遞給頂點(diǎn)和像素著色器的參數(shù)。
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使它變得容易 創(chuàng)建基于著色器的自定義材質(zhì)。我們的混合材料相對(duì)簡(jiǎn)單， 但它確實(shí)對(duì)島嶼的外觀產(chǎn)生了很大的影響，當(dāng) 飛機(jī)低空飛到地面。著色器將 GPU 的強(qiáng)大功能帶到 瀏覽器，擴(kuò)展可應(yīng)用于 3D 的創(chuàng)意效果類(lèi)型 場(chǎng)景。在我們的案例中，這是畫(huà)龍點(diǎn)名！
原文鏈接：使用 WebGL 為 HTML5 游戲創(chuàng)建逼真的地形
過(guò)去的兩周內(nèi)，2048聲名鵲起，開(kāi)發(fā)者Gabriele Cirulli差點(diǎn)成為阮哈東那樣的名人。但世事難料，隨后的發(fā)展連這位“原生作者”都沒(méi)趕上趟——一款與網(wǎng)頁(yè)版2048完全一致的App迅速上架App Store，并席卷各國(guó)免費(fèi)排行榜，開(kāi)發(fā)者卻不是Cabriele Cirrulli本人。
如今排在各國(guó)免費(fèi)榜前列的2048并不像網(wǎng)頁(yè)版那樣人畜無(wú)害。此前Cabriele Cirrulli的作品并不以盈利為直接目的，沒(méi)有任何廣告，只在游戲的頁(yè)面底部加入了捐贈(zèng)按鈕。而在將網(wǎng)頁(yè)版原封不動(dòng)地移植到iOS平臺(tái)后，名為Ketchapp的開(kāi)發(fā)商大大方方地加入了永久懸停的廣告。憑借著和網(wǎng)頁(yè)版100%的相似性與“時(shí)效性”，這款游戲先是在美區(qū)從幾十款2048仿制品里脫穎而出，位居免費(fèi)榜前列。獲取到一定關(guān)注度后，接下來(lái)的事就和Flappy Bird的病毒營(yíng)銷(xiāo)如出一轍了——借著相關(guān)話題的推波助瀾，以相當(dāng)迅速的速率全球范圍流行開(kāi)來(lái)。
Ketchapp的到底有什么來(lái)頭？打開(kāi)他們的作品列表，一排Flappy XX赫然映入眼簾。事情到這里變得有些狗血，顯然Ketchapp是一家標(biāo)準(zhǔn)的換皮公司。在他們的9個(gè)iPhone應(yīng)用里，有7個(gè)是Flappy Bird的換皮作品。哪怕在Flappy XX熱潮偃旗息鼓的3月底，這家公司依然孜孜不倦地上架了兩款同類(lèi)游戲……
或許正因?yàn)橛辛松弦淮蔚膿Q皮經(jīng)驗(yàn)，Ketchapp才能手疾眼快，搶在其它競(jìng)爭(zhēng)者之前將2048的App上架——3月19日，遠(yuǎn)在人們對(duì)這一熱潮引起足夠重視之前，要知道網(wǎng)頁(yè)版的2048也是在20號(hào)之后才逐漸廣為人知。此前的一大幫換皮公司正在忙著做各種2、3、5、8、1024……之類(lèi)的變種呢。
相比自家的Flappy換皮系列，2048與原版的相似程度要高得多，畫(huà)面素材和玩法完全一致，Ketchapp唯一做的改變就是加了簡(jiǎn)單的音效。考慮到碩大的廣告條，網(wǎng)頁(yè)版在手機(jī)上的體驗(yàn)甚至更舒適一些（基于html5開(kāi)發(fā)，完美支持移動(dòng)設(shè)備）。
在2048之前，Ketchapp符合“名不見(jiàn)經(jīng)傳”的字面意思，基本沒(méi)有被任何媒體報(bào)道過(guò)。在2048之后，Ketchapp依然默默無(wú)聞，繼續(xù)借用別人的游戲悶聲賺大錢(qián)。沒(méi)什么人注意到登頂免費(fèi)榜的是這么一部荒唐的作品。只有在2048上架當(dāng)天，國(guó)外移動(dòng)游戲社區(qū)Toucharcade的一位玩家表示了自己的質(zhì)疑。他首先在論壇上發(fā)布了這款新作，隨后即建議大家去嘗試體驗(yàn)更好網(wǎng)頁(yè)版，在主貼中，這位玩家表示了對(duì)App Store山寨游戲橫行的擔(dān)憂，并無(wú)不輕蔑地寫(xiě)道：什么時(shí)候我們能迎來(lái)一款Flappy Threes？
Flappy和Threes，這正是今年兩次“App Store山寨運(yùn)動(dòng)”的起點(diǎn)。但與誤打誤撞走紅的Flappy Bird不同，《Threes!》是唯一可稱(chēng)得上制作精良的作品，從每個(gè)細(xì)節(jié)都能看出開(kāi)發(fā)者的用心。移動(dòng)平臺(tái)總有一些會(huì)在第一眼就打動(dòng)人的優(yōu)秀作品，《Threes》就算其中之一。除了悅耳的音樂(lè)和細(xì)膩的動(dòng)畫(huà)，《Thress!》最為傳神的是將每個(gè)數(shù)字都做了擬人化，從3到1536，各自都有不同的神態(tài)和配音，玩起來(lái)倍感溫馨。更難得的是，《Threes!》同時(shí)也是一款挑戰(zhàn)性極高的游戲，基礎(chǔ)規(guī)則雖然是三三疊加，但基本單位是1和2，移動(dòng)方式也和2048不盡相同，更近似于平面魔方。游戲易于上手，但若想拿到768甚至1536，就需要非常強(qiáng)的空間思維能力和足夠好的運(yùn)氣?？傊?，這是一款適合長(zhǎng)期挑戰(zhàn)的游戲，而不是只要稍微用心就能通關(guān)，只能找一個(gè)換皮作品繼續(xù)打發(fā)時(shí)間的2048。
但現(xiàn)實(shí)就是這么不堪，花費(fèi)兩位開(kāi)發(fā)者14個(gè)月之久的《Thress》，風(fēng)頭完全被簡(jiǎn)單粗暴的模仿者們蓋過(guò)。在沉寂了兩個(gè)月，看著山寨作品層出不群，甚至山寨的山寨在排行榜上風(fēng)光無(wú)限，兩位開(kāi)發(fā)者再也按捺不住了，他們以獨(dú)特的方式，發(fā)出了另一種抗議。
3月27日，《Thress!》的兩位開(kāi)發(fā)者公開(kāi)了在游戲開(kāi)發(fā)的14個(gè)月時(shí)間內(nèi)所有的通信記錄(470封郵件)，以及相關(guān)所有計(jì)劃。在這個(gè)花半分鐘才能拖到底的頁(yè)面中，我們可以看到《Threes!》在開(kāi)發(fā)過(guò)程中的多個(gè)雛形。Asher Vollmer和Greg Wohlwend曾嘗試了各種不同的概念、主題和游戲機(jī)制，比如頁(yè)面中的壽司、動(dòng)物和國(guó)際象棋的版本。但就像設(shè)計(jì)師Asher所說(shuō)的那樣，“每當(dāng)加入一些東西，游戲就會(huì)變得累贅和不自然，拿掉之后就覺(jué)得像一個(gè)好游戲了”。在一年多的時(shí)間里，《Threes！》的開(kāi)發(fā)歷程仿佛是2048流行的逆向演變，兩位開(kāi)發(fā)者不斷去繁存簡(jiǎn)，最終塑造出這么一款足夠簡(jiǎn)潔，且足夠有趣的作品。
然后，成了各種換皮游戲的模版。
在2048如日中天的時(shí)刻來(lái)這么一出，難免會(huì)給人一種酸溜溜的感覺(jué)。就如同他們?cè)谇把灾刑寡裕斑@種感情很復(fù)雜，很難表達(dá)，寫(xiě)這樣的東西也會(huì)讓人覺(jué)得我們是吃不到葡萄說(shuō)葡萄酸。看到我們的想法被他人借鑒，我們很想高興一些，可即便我們盡可能地理智，依然有一種被抄襲的感覺(jué)”。平心而論，這是再合理不過(guò)的人之常情，特別是看到自己一年多的心血被人稱(chēng)為“抄襲2048”的時(shí)候。但他們之所以將開(kāi)發(fā)歷程公布出來(lái)，更多的是出于這樣一種心態(tài)：不希望人們將《Threes!》這個(gè)精巧的小產(chǎn)品當(dāng)成是“一個(gè)周末的成果”（在媒體報(bào)道Cabriele Cirrulli的2048時(shí)經(jīng)常會(huì)看到這樣的描述）。Asher Vollmer和Greg Wohlwend希望人們知道，一個(gè)精致的小游戲的誕生過(guò)程并不簡(jiǎn)單，而是伴隨著無(wú)數(shù)的思考、嘗試與取舍，因?yàn)樗麄冏罱K創(chuàng)造出的，是創(chuàng)意。
可惜在這個(gè)行業(yè)中，創(chuàng)意是最容易被模仿的。
于是，流行至今的2048只產(chǎn)生了三樣?xùn)|西：一段過(guò)眼煙云的網(wǎng)絡(luò)流行文化，一個(gè)讓換皮公司趨之若鶩的熱門(mén)題材，一個(gè)讓游戲開(kāi)發(fā)者心灰意冷的現(xiàn)實(shí)——真正用心去打磨的創(chuàng)意很可能只換來(lái)零星的掌聲，到頭來(lái)為他人作嫁衣裳。
模仿是最好的恭維，是這樣嗎？
覽器和 JavaScript 的功能逐年不斷的變強(qiáng)變大。曾幾何時(shí)，任何類(lèi)型的游戲都需要Flash。但隨著 HTML5 發(fā)展，HTML5 + WebGL 游戲式就慢慢占領(lǐng)著這個(gè)舞臺(tái)。以下是30款流行的游戲，它們可以在所有現(xiàn)代瀏覽器中運(yùn)行，并且只使用web技術(shù)構(gòu)建。
地址：http://hexgl.bkcore.com/
類(lèi)型：街機(jī)，賽車(chē)
HexGL 是一款基于HTML5，JavaScript和WebGL的快節(jié)奏的賽車(chē)游戲。玩家可以使用鍵盤(pán)，觸摸屏設(shè)備或leap motion(體感控制器)來(lái)控制太空飛船。
地址：http://www.cross-code.com/en/home
類(lèi)型：動(dòng)作，角色扮演
一個(gè)復(fù)古靈感的2D游戲設(shè)定在遙遠(yuǎn)的未來(lái)。這是一個(gè)充滿偉大的游戲機(jī)制，如組合，拼圖，技能樹(shù)，任務(wù)，物品等等。
地址：https://sketch-out.appspot.com/
類(lèi)型：街機(jī)
Sketchout的任務(wù)保護(hù)你的行星，并通過(guò)改變流星的方向來(lái)消滅對(duì)手，通過(guò)使流星偏轉(zhuǎn)來(lái)保護(hù)您的星球并消滅對(duì)方，這款游戲有很棒的視覺(jué)效果和音樂(lè)特效。
地址：http://www.treasurearena.com/類(lèi)型：多人，角色扮演，動(dòng)作
Treasure Arena 是一款動(dòng)態(tài)的競(jìng)技場(chǎng)戰(zhàn)斗游戲，最多可容納4名玩家。它具有不同的游戲模式，出色的幀率和配樂(lè)，是一個(gè)非常有趣的游戲。
地址：http://bejeweled.popcap.com/html5/
類(lèi)型：街機(jī)，解謎，娛樂(lè)
HTML5格式的經(jīng)典“寶石迷陣”游戲。這是一個(gè)官方克隆，因此可以正常運(yùn)行且外觀完美。
地址：http://missile-game.bwhmather.com/類(lèi)型：街機(jī)
這是一款非常具有挑戰(zhàn)性的游戲，游戲中我們扮演的是一枚被發(fā)射進(jìn)隧道的導(dǎo)彈。游戲有很酷的黑白圖像，玩的時(shí)候會(huì)有很強(qiáng)的場(chǎng)景效果。
地址：http://www.deconstructeam.com/games/gods-will-be-watching/類(lèi)型：拼圖
在這個(gè)令人毛骨悚然（但又很棒）的游戲中，我和自己團(tuán)隊(duì)必須獨(dú)自生存40天。團(tuán)隊(duì)有六名成員，其中包括一只狗，一名精神病醫(yī)生和一個(gè)機(jī)器人，您必須與他們互動(dòng)，以使其保持溫暖，溫飽和理智的狀態(tài)。
地址：http://www.sinuousgame.com/類(lèi)型：街機(jī)
一個(gè)簡(jiǎn)單的游戲，極簡(jiǎn)的圖形和流暢的幀率。拾取電源時(shí)避免與紅點(diǎn)碰撞。此外，如果你想要那些額外的積分，就需要不停向前移動(dòng)
地址：http://swooop.playcanvas.com/類(lèi)型：街機(jī)
在一個(gè)美麗多彩的3D世界里，到處飛翔，收集寶石和星星。
地址：http://www.freeriderhd.com/
Free Rider HD 是一款令人上癮的游戲，你可以在其他玩家繪制的賽道上騎自行車(chē)?？梢栽诔汕先f(wàn)的播放器曲目中選擇一個(gè)播放，也可以創(chuàng)建自己的曲目并分享。
地址：http://entanglement.gopherwoodstudios.com/zh-CN-index.html類(lèi)型:拼圖,娛樂(lè)
這個(gè)游戲的目的是通過(guò)在網(wǎng)格上放置線段來(lái)創(chuàng)建一條盡可能長(zhǎng)的路徑。你可以單獨(dú)玩，也可以和朋友一起玩。
地址：https://www.modern.ie/en-us/ie6countdown#escape-from-xp
類(lèi)型：動(dòng)作，街機(jī)
用“Escape from XP”來(lái)慶祝 Windows XP 的終結(jié)。你的任務(wù)是拯救最后一個(gè)陷入Clippy暴政的開(kāi)發(fā)人員。
地址：http://polycraftgame.com/類(lèi)型：角色扮演，塔防，動(dòng)作
在這個(gè)很棒的3D游戲中，你到處收集資源，建造東西，完成任務(wù)。關(guān)于它的所有東西都經(jīng)過(guò)拋光，并且運(yùn)行也非常順暢。
地址：https://gabrielecirulli.github.io/2048/類(lèi)型：拼圖
一個(gè)非常上癮的游戲，你可能已經(jīng)玩過(guò)了。在 2048 ，你移動(dòng)編號(hào)的圖塊并合并它們。當(dāng)界面中最大數(shù)字是`2048 時(shí)，游戲勝利。
地址：http://arcade.lostdecadegames.com/onslaught_arena/
類(lèi)型:動(dòng)作
一種快節(jié)奏的復(fù)古生存游戲，您可以使用不同的武器與成群的敵人作戰(zhàn)。
地址：http://chrome.angrybirds.com/類(lèi)型:游戲
《憤怒的小鳥(niǎo)》游戲，這就不用介紹了。
地址:https://www.cubeslam.com/mcycrs
類(lèi)型：街機(jī)，多人
具有豐富的色彩和炫酷的3D圖形乒乓球游戲。我們可以通過(guò)向朋友發(fā)送一個(gè)URL來(lái)挑戰(zhàn)他們，還可以通過(guò)網(wǎng)絡(luò)攝像頭看到對(duì)方。
地址：http://hypnoticowl.com/games/the-wizard/類(lèi)型：動(dòng)作，角色扮演，策略
Wizard 是基于回合的地牢爬行者，在里面會(huì)遇到神話般的怪物并找到奇妙的咒語(yǔ)。該游戲具有酷炫的戰(zhàn)斗機(jī)制，有時(shí)可能會(huì)帶來(lái)很大挑戰(zhàn)。
地址：http://phoboslab.org/xtype/類(lèi)型：動(dòng)作，街機(jī)
在這款酷炫的太空射擊游戲中，你目的就是要起戰(zhàn)勝 Boss。
地址：http://orteil.dashnet.org/cookieclicker/類(lèi)型：休閑，搞笑
Cookie clicker 是一款可能為了開(kāi)玩笑而創(chuàng)建的游戲，但仍然提供了大量的樂(lè)趣。你可以從0個(gè)cookie開(kāi)始，然后單擊一些有效率的cookie，最后你可能會(huì)發(fā)現(xiàn)自己擁有數(shù)十億個(gè)cookie。
地址：http://play.elevatorsaga.com/類(lèi)型：拼圖，編碼
這類(lèi)屬于程序員類(lèi)型游戲 。在電梯中的任務(wù)是通過(guò)對(duì)電梯的運(yùn)動(dòng)進(jìn)行編程，以最有效的方式運(yùn)送人員，這些都是用 JavaScript 來(lái)完成的。
地址：http://gameofbombs.com/landing類(lèi)型：動(dòng)作，角色扮演，多人
Game of Bombs是一個(gè)轟炸機(jī)類(lèi)型的游戲，在廣闊地圖上，都有著敵方玩家。收集力量，皮膚和成就，以成為最佳轟炸機(jī)玩家的方式。
地址：http://or.paleozoic.com/類(lèi)型：平臺(tái)游戲，動(dòng)作
Olympia Rising具有漂亮復(fù)古外觀圖形的游戲。它坐落在古希臘，在那里我們扮演的女人被賦予了重新的機(jī)會(huì)，所以我們的任務(wù)就是逃離死者的世界。
地址: https://ned.im/pixel-race-game/類(lèi)型：街機(jī)，賽車(chē)
Pixel Race是一款簡(jiǎn)單概念概念，你可以在收集硬幣的同時(shí)控制汽車(chē)以避開(kāi)障礙物。如果有足夠的耐心和空閑時(shí)間，那么你可能會(huì)打破記錄（記錄為36309個(gè)硬幣）。
地址：https://littlealchemy.com/類(lèi)型：拼圖
從這四個(gè)基本元素開(kāi)始，將它們組合起來(lái)，創(chuàng)建510種可能的組合。
地址：http://www.kevs3d.co.uk/dev/arena5/類(lèi)型：街機(jī)
在數(shù)字領(lǐng)域中飛行并射擊幾何敵人以獲得高分。
地址:https://vector-runner-remix.tresensa.com/
類(lèi)型：街機(jī)
在這個(gè)充滿色彩和幾何形狀的平臺(tái)游戲中，盡你所能奔跑吧。
地址：http://playbiolab.com/類(lèi)型:動(dòng)作
一款出色的像素藝術(shù)平臺(tái)游戲，你必須在這里逃脫充滿突變生物和其他不良生物的實(shí)驗(yàn)室。
地址:http://worldsbiggestpacman.com/#類(lèi)型：街機(jī)
地址：http://games.jessefreeman.com/new-super-resident-raver/
從即將到來(lái)的僵尸入侵中拯救驚慌失措的人們。收集錢(qián)，升級(jí)你的武器和戰(zhàn)斗僵尸。
作者：Danny Markov 來(lái)源：tutorialzin 譯者：前端小智
原文：https://tutorialzine.com/2015/02/30-amazing-games-made-only-with-html5
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
