整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
覽器和 JavaScript 的功能逐年不斷的變強變大。曾幾何時，任何類型的游戲都需要Flash。但隨著 HTML5 發展，HTML5 + WebGL 游戲式就慢慢占領著這個舞臺。以下是30款流行的游戲，它們可以在所有現代瀏覽器中運行，并且只使用web技術構建。
地址：http://hexgl.bkcore.com/
類型：街機，賽車
HexGL 是一款基于HTML5，JavaScript和WebGL的快節奏的賽車游戲。玩家可以使用鍵盤，觸摸屏設備或leap motion(體感控制器)來控制太空飛船。
地址：http://www.cross-code.com/en/home
類型：動作，角色扮演
一個復古靈感的2D游戲設定在遙遠的未來。這是一個充滿偉大的游戲機制，如組合，拼圖，技能樹，任務，物品等等。
地址：https://sketch-out.appspot.com/
類型：街機
Sketchout的任務保護你的行星，并通過改變流星的方向來消滅對手，通過使流星偏轉來保護您的星球并消滅對方，這款游戲有很棒的視覺效果和音樂特效。
地址：http://www.treasurearena.com/類型：多人，角色扮演，動作
Treasure Arena 是一款動態的競技場戰斗游戲，最多可容納4名玩家。它具有不同的游戲模式，出色的幀率和配樂，是一個非常有趣的游戲。
地址：http://bejeweled.popcap.com/html5/
類型：街機，解謎，娛樂
HTML5格式的經典“寶石迷陣”游戲。這是一個官方克隆，因此可以正常運行且外觀完美。
地址：http://missile-game.bwhmather.com/類型：街機
這是一款非常具有挑戰性的游戲，游戲中我們扮演的是一枚被發射進隧道的導彈。游戲有很酷的黑白圖像，玩的時候會有很強的場景效果。
地址：http://www.deconstructeam.com/games/gods-will-be-watching/類型：拼圖
在這個令人毛骨悚然（但又很棒）的游戲中，我和自己團隊必須獨自生存40天。團隊有六名成員，其中包括一只狗，一名精神病醫生和一個機器人，您必須與他們互動，以使其保持溫暖，溫飽和理智的狀態。
地址：http://www.sinuousgame.com/類型：街機
一個簡單的游戲，極簡的圖形和流暢的幀率。拾取電源時避免與紅點碰撞。此外，如果你想要那些額外的積分，就需要不停向前移動
地址：http://swooop.playcanvas.com/類型：街機
在一個美麗多彩的3D世界里，到處飛翔，收集寶石和星星。
地址：http://www.freeriderhd.com/
Free Rider HD 是一款令人上癮的游戲，你可以在其他玩家繪制的賽道上騎自行車?？梢栽诔汕先f的播放器曲目中選擇一個播放，也可以創建自己的曲目并分享。
地址：http://entanglement.gopherwoodstudios.com/zh-CN-index.html類型:拼圖,娛樂
這個游戲的目的是通過在網格上放置線段來創建一條盡可能長的路徑。你可以單獨玩，也可以和朋友一起玩。
地址：https://www.modern.ie/en-us/ie6countdown#escape-from-xp
類型：動作，街機
用“Escape from XP”來慶祝 Windows XP 的終結。你的任務是拯救最后一個陷入Clippy暴政的開發人員。
地址：http://polycraftgame.com/類型：角色扮演，塔防，動作
在這個很棒的3D游戲中，你到處收集資源，建造東西，完成任務。關于它的所有東西都經過拋光，并且運行也非常順暢。
地址：https://gabrielecirulli.github.io/2048/類型：拼圖
一個非常上癮的游戲，你可能已經玩過了。在 2048 ，你移動編號的圖塊并合并它們。當界面中最大數字是`2048 時，游戲勝利。
地址：http://arcade.lostdecadegames.com/onslaught_arena/
類型:動作
一種快節奏的復古生存游戲，您可以使用不同的武器與成群的敵人作戰。
地址：http://chrome.angrybirds.com/類型:游戲
《憤怒的小鳥》游戲，這就不用介紹了。
地址:https://www.cubeslam.com/mcycrs
類型：街機，多人
具有豐富的色彩和炫酷的3D圖形乒乓球游戲。我們可以通過向朋友發送一個URL來挑戰他們，還可以通過網絡攝像頭看到對方。
地址：http://hypnoticowl.com/games/the-wizard/類型：動作，角色扮演，策略
Wizard 是基于回合的地牢爬行者，在里面會遇到神話般的怪物并找到奇妙的咒語。該游戲具有酷炫的戰斗機制，有時可能會帶來很大挑戰。
地址：http://phoboslab.org/xtype/類型：動作，街機
在這款酷炫的太空射擊游戲中，你目的就是要起戰勝 Boss。
地址：http://orteil.dashnet.org/cookieclicker/類型：休閑，搞笑
Cookie clicker 是一款可能為了開玩笑而創建的游戲，但仍然提供了大量的樂趣。你可以從0個cookie開始，然后單擊一些有效率的cookie，最后你可能會發現自己擁有數十億個cookie。
地址：http://play.elevatorsaga.com/類型：拼圖，編碼
這類屬于程序員類型游戲 。在電梯中的任務是通過對電梯的運動進行編程，以最有效的方式運送人員，這些都是用 JavaScript 來完成的。
地址：http://gameofbombs.com/landing類型：動作，角色扮演，多人
Game of Bombs是一個轟炸機類型的游戲，在廣闊地圖上，都有著敵方玩家。收集力量，皮膚和成就，以成為最佳轟炸機玩家的方式。
地址：http://or.paleozoic.com/類型：平臺游戲，動作
Olympia Rising具有漂亮復古外觀圖形的游戲。它坐落在古希臘，在那里我們扮演的女人被賦予了重新的機會，所以我們的任務就是逃離死者的世界。
地址: https://ned.im/pixel-race-game/類型：街機，賽車
Pixel Race是一款簡單概念概念，你可以在收集硬幣的同時控制汽車以避開障礙物。如果有足夠的耐心和空閑時間，那么你可能會打破記錄（記錄為36309個硬幣）。
地址：https://littlealchemy.com/類型：拼圖
從這四個基本元素開始，將它們組合起來，創建510種可能的組合。
地址：http://www.kevs3d.co.uk/dev/arena5/類型：街機
在數字領域中飛行并射擊幾何敵人以獲得高分。
地址:https://vector-runner-remix.tresensa.com/
類型：街機
在這個充滿色彩和幾何形狀的平臺游戲中，盡你所能奔跑吧。
地址：http://playbiolab.com/類型:動作
一款出色的像素藝術平臺游戲，你必須在這里逃脫充滿突變生物和其他不良生物的實驗室。
地址:http://worldsbiggestpacman.com/#類型：街機
地址：http://games.jessefreeman.com/new-super-resident-raver/
從即將到來的僵尸入侵中拯救驚慌失措的人們。收集錢，升級你的武器和戰斗僵尸。
作者：Danny Markov 來源：tutorialzin 譯者：前端小智
原文：https://tutorialzine.com/2015/02/30-amazing-games-made-only-with-html5
行者，歡迎來到風花節，蒙德城內正在舉辦一項叫做「風物之歌」的小游戲。在這項小游戲里，你能夠像蒙德城里的吟游詩人一樣，彈奏和編寫出動聽的曲譜~
同時，「風物之歌」交流平臺限時開啟，旅行者們可以在平臺內自定義編輯和分享屬于你的游戲內編曲信息、查看其他旅行者制作的曲譜，以及上傳你的演奏挑戰！
一起在蒙德的風中，彈奏屬于你的樂曲吧~
點擊網頁鏈接： https://www.miyoushe.com/act/ys/ugc-music/index.html?game_biz=hk4e_cn&act_id=e202212279746&mhy_presentation_style=fullscreen&mhy_auth_required=true&utm_source=mkt&utm_medium=web&utm_campaign=arti 前往「風物之歌」交流平臺。
〓活動時間〓
2023年3月3日 - 2023年3月20日 3:59
活動結束后，旅行者可繼續訪問及瀏覽頁面內作品，但無法進行投稿管理（投稿及下架作品）、上傳挑戰視頻、對作品進行點贊及收藏等操作。請旅行者及時參與活動。
〓活動介紹〓
活動期間，當旅行者在游戲內「風物之歌」活動中發布編曲后，可以前往「風物之歌」交流平臺投稿補充信息來介紹自己的編曲。旅行者還可以在頁面內瀏覽其他旅行者的編曲、一鍵復制分享碼前往游戲內游玩、點贊收藏自己喜歡的編曲作品等。此外，旅行者還可以在網頁內上傳自己挑戰其他編曲的挑戰視頻。
在交流平臺成功投稿且稿件通過審核（包括原創編曲投稿及挑戰視頻投稿）的旅行者，可獲得摩拉*50000。獎勵僅可領取一份，不隨投稿數量疊加。獎勵預計于活動結束后10個工作日內，通過游戲內郵件發放。
〓編曲投稿〓
旅行者可以在網頁內對游戲內成功發布的編曲進行投稿，可以上傳視頻或圖片、編輯作品名稱、介紹和標簽來介紹自己的編曲。作品發布并通過審核后，旅行者的投稿作品可以被其他旅行者搜索并查看到。
〓挑戰視頻〓
活動期間，旅行者可投稿平臺內已過審編曲作品的挑戰視頻，同一編曲不可投稿多份挑戰視頻。
*更多活動細則詳見活動頁面-活動規則。
*該網頁活動僅供娛樂，與游戲內實際情況無關。
此案例實現了人物跟隨著移動操作桿進行移動并執行跑步動作，右邊的攻擊按鈕可以實現攻擊，短時間內連按可以實現不同的攻擊動作。
在線查看：https://jxtreehouse.github.io/three.js-lessions/%E6%95%99%E7%A8%8B/examples/12_game_operation.html
源碼倉庫: https://github.com/JXtreehouse/three.js-lessions/blob/gh-pages/%E6%95%99%E7%A8%8B/examples/12_game_operation.html
首先，我們需要把舞臺搭建出來，先創建scene場景:
我們創建了場景，并設置了場景一個灰色的背景色。還設置了場景的霧化效果，這個霧的效果主要是針對于場景的相機的距離實現的，三個值分別是霧的顏色、霧的開始距離、完全霧化距離相機的位置。
我們創建了一個與地面呈45度角并朝向原點的相機：
我們創建了兩個燈光：
我們使用平面幾何體創建了一個貼有草皮貼圖的材質的模型：
到這里，場景、燈光、相機、舞臺都已經備齊。接下來我們將請出我們主角naruto登場。
首先我們將模型導入到場景內，注意，案例中的模型比較大，加載和處理需要一定的時間，請小伙伴們耐心等待即可(實際案例里面可以加個loading動畫)：
var loader = new THREE.FBXLoader();
loader.load("../js/models/fbx/Naruto.fbx", function (mesh) {
scene.add(mesh);
});我們不單單只是將模型添加到場景，還對模型的陰影和位置做了一下調整：
調整模型的位置，站立在草地上面
設置燈光一直照射模型：
這個模型里面含有27個骨骼動畫，我們可以通過設置不同的動畫，來實現一整套的動作來實現相應的比如攻擊效果，移動效果等。接下來我們通過模型的數據生成一下所需的動畫：
模型加載成功后，我們需要讓模型執行一個普通的站立效果：
我們主要添加了兩種操作：模型位置移動操作和攻擊效果。
操作按鈕為了方便，直接使用的dom標簽模擬出來的。 模型位置移動操作中，我們需要模型的位置的變動和模型的朝向以及修改站立動畫和奔跑動畫的切換。 攻擊效果則是實現攻擊并且根據點擊速度實現一整套的攻擊動作切換。
在實現位置移動效果中，我們為按鈕綁定了三個事件：鼠標按下，鼠標移動，鼠標抬起。 在鼠標按下時，我們獲取到了當前操作圓盤的中心點的位置，讓模型進入跑步動畫，綁定了鼠標的移動和抬起事件。重要的是更新模型的移動方向和移動速度。
上面的dop類是封裝的一個兼容多端的事件庫，github地址: https://github.com/johnson2heng/dop 在鼠標移動回調事件中，我們更新模型的移動方向和移動速度。
function move(event) {
getRadian(event);
}
最后在鼠標抬起事件中，我們解綁事件，將按鍵復原，并停止掉模型的移動狀態，將模型動畫恢復到站立狀態。
function up() {
doc.remove("move", move);
doc.remove("up", up);
//按鈕復原
bar.style.marginTop = 0;
barWrap.style.transform = `translate(-50%, -50%) rotate(0deg)`;
bar.style.transform = `translate(-50%, -50%) rotate(0deg)`;
//設置移動距離為零
characterMove(new THREE.Vector2(), 0);
//鼠標抬起切換站立狀態
state.skills === 0 && gui["action" + 24]();
}
三個事件綁定完成后，我們需要將在回調中獲得的值求出當前的偏轉方向和移動速度： 首先我們獲取一下當前鼠標的位置：
if (media === "pc") {
mouse.x = event.clientX;
mouse.y = event.clientY;
}
else {
mouse.x = event.touches[0].clientX;
mouse.y = event.touches[0].clientY;
}
根據位置求出距離操作圓盤中心的位置，并保證最大值也不會超出圓盤的半徑：
let distance = center.distanceTo(mouse);
distance >= parseFloat(dop.getFinalStyle(control, "width")) / 2 && (distance = parseFloat(dop.getFinalStyle(control, "width")) / 2);
計算出來當前位置和中心的夾角，并修改dom的位置：
//計算兩點之間的夾角
mouse.x = mouse.x - center.x;
mouse.y = mouse.y - center.y;
//修改操作桿的css樣式
bar.style.marginTop = `-${distance}px`;
bar.style.transform = `translate(-50%, -50%) rotate(-${(mouse.angle() / Math.PI * 180 + 90) % 360}deg)`;
barWrap.style.transform = `translate(-50%, -50%) rotate(${(mouse.angle() / Math.PI * 180 + 90) % 360}deg)`;
函數的最后，則調用的characterMove方法，將按鈕數據轉換成為模型實際需要移動的距離。
//修改當前的移動方向和移動速度
characterMove(mouse.normalize(), distance / (parseFloat(dop.getFinalStyle(control, "width")) / 2));
接下來我們查看一下characterMove方法，在這個方法中，我們計算出了模型每一幀需要移動的距離。這里有一個問題，我們所謂的操作桿向前讓模型移動前方，其實是相機朝向的前方。所以我們需要先求出相機的前方矢量，再通過相機的前方矢量為基礎，計算出來模型實際方向。 我們首先聲明了兩個變量，一個是旋轉矩陣，另一個是移動矢量：
let direction = new THREE.Matrix4(); //當前移動的旋轉矩陣
let move = new THREE.Vector3(); //當前位置移動的距離
在characterMove函數內，我們根據相機的四元數獲得了旋轉矩陣：
/重置矩陣
direction.identity();
//通過相機的四元數獲取到相機的旋轉矩陣
let quaternion = camera.quaternion;
direction.makeRotationFromQuaternion(quaternion);
然后通過旋轉矩陣和當前的操作桿的方向通過相乘計算出來實際模型移動的方向：
//獲取到操作桿的移動方向
move.x = vector.x;
move.y = 0;
move.z = vector.y;
//通過相機方向和操作桿獲得最終角色的移動方向
move.applyMatrix4(direction);
move.normalize();
最后，通過比例和方向得出當前模型每一幀移動的距離，因為我們不需要修改模型y軸，所以實際上也只是修改兩個軸的位置：
move.x = move.x * ratio * 10;
move.z = move.z * ratio * 10;
我們獲取到了模型的每一幀移動的距離，還需要在幀循環中調用：
//如果模型添加成功，則每幀都移動角色位置
if (naruto) {
//獲取當前位置
position.x += move.x;
position.z += move.z;
//修改模型位置
naruto.position.x = position.x;
naruto.position.z = position.z;
//修改平衡光的位置
light.position.x = position.x;
light.position.z = position.z + 100;
//修改相機位置
camera.position.x = position.x;
camera.position.z = position.z - 800;
}
當前的模型，燈光，和相機都會跟隨移動，實現了，我們上面動圖中的模型移動的效果。
在實現攻擊效果時，我沒有只是簡單的實現一個普通的攻擊，而是直接實現一套連招。 這一套連招是通過五個動作組成，在執行一個攻擊動畫時如果再次點擊了攻擊按鈕，執行完這個攻擊動畫將不會切換到站立動畫，而是直接切換到連招的下一個攻擊動畫中。 只要連續點按攻擊按鈕，模型將完成一整套的動作。實現這個效果，我們只是使用了一個簡單的定時器即可實現，接下來我們通過代碼了解一下實現過程。
在實現動畫前，先設置一個連招的數組，將需要的動作添加到數組當中。我這里添加了五個手部攻擊的效果：
let attackList = [12, 13, 14, 15, 16]; //連招的循序
let attackCombo = false; //是否連招，接下一個攻擊
我們還設置了attackCombo設置當前是否可以連招的變量，這個變量state.skills值不為0時，將變為true。定時器每一次更新的時候，將判斷attackCombo是否為true，在為true的狀態下，將執行連招的下一個動作。否則，將停止連招。
//attackIndex 等于0，當前不處于攻擊狀態 不等于，當前處于攻擊狀態
if(state.skills === 0){
state.skills++;
gui["action" + attackList[state.skills-1]]();
attackInterval = setInterval(function () {
if(attackCombo){
//如果設置了連招，上一個攻擊動作完成后，進行下一個攻擊動作
state.skills++;
//如果整套攻擊動作已經執行完成，則清除定時器
if(state.skills-1 >= attackList.length){
closeAttack();
return;
}
//進行下一個動作
gui["action" + attackList[state.skills-1]]();
attackCombo = false;
}
else{
closeAttack();
}
}, naruto.animations[attackList[state.skills-1]].duration*1000);
}
else{
attackCombo = true;
}
在關閉掉攻擊動畫的函數內，我們首先將state.skills設置為0，然后恢復到移動或者站立動畫，最后清除掉定時器：
//關閉攻擊狀態
function closeAttack() {
state.skills = 0;
//根據狀態設置是移動狀態還是站立狀態
state.move ? gui["action" + 3]() :gui["action" + 24](); //回到站立狀態
clearInterval(attackInterval);
}
通過很簡單的一些代碼，我們就實現了一個復雜的連招效果。是不是很有成就感，這就是在最前面看到的那個操作gif的效果的案例
開發Web3D應用有時候需要實現一個霧化的效果，簡單說就是場景中越遠的位置看起來越模糊，Three.js引擎提供了兩個霧Fog和指數霧FogExp2兩個類。
Three.js場景對象Scene具有一個霧化屬性.fog,該屬性的屬性值是霧對象Fog或指數霧對象FogExp2。如果你想模擬一個霧化效果只需要在threejs代碼中設置場景對象的.fog屬性就可以。
Fog類定義的是線性霧，霧的密度是隨著距離線性增大的，即場景中物體霧化效果隨著隨距離線性變化。
構造函數霧Fog(color,near,far)的三個參數分別對應霧對象Fog的三個屬性.color、.near和.far。
.color屬性表示霧的顏色，比如設置為紅色，場景中遠處物體為黑色，場景中最近處距離物體是自身顏色，最遠和最近之間的物體顏色是物體本身顏色和霧顏色的混合效果。
// 改變霧的顏色為白色
scene.fog.color.set(0xffffff)
.near屬性值表示應用霧化效果的最小距離，距離活動攝像機長度小于.near的物體將不會被霧所影響
.far屬性值表示應用霧化效果的最大距離，距離活動攝像機長度大于.far的物體將不會被霧所影響
透視投影照相機（Perspective Camera）的構造函數是：
THREE.PerspectiveCamera(fov, aspect, near, far)
透視圖中，灰色的部分是視景體，是可能被渲染的物體所在的區域。fov是視景體豎直方向上的張角（是角度制而非弧度制），如側視圖所示。
aspect等于width / height，是照相機水平方向和豎直方向長度的比值，通常設為Canvas的橫縱比例。
near和far分別是照相機到視景體最近、最遠的距離，均為正值，且far應大于near。
環境光是指場景整體的光照效果，是由于場景內若干光源的多次反射形成的亮度一致的效果，通常用來為整個場景指定一個基礎亮度。因此，環境光沒有明確的光源位置，在各處形成的亮度也是一致的。
在設置環境光時，只需要指定光的顏色：
THREE.AmbientLight(hex)
其中，hex是十六進制的RGB顏色信息，如紅色表示為0xff0000。
創建環境光并將其添加到場景中的完整做法是：
var light = new THREE.AmbientLight(0xffffff);
scene.add(light);
如果此時場景中沒有物體，只添加了這個環境光，那么渲染的結果仍然是一片黑
環境光通常使用白色或者灰色，作為整體光照的基礎。
##TextureLoader
通過紋理貼圖加載器TextureLoader的load()方法加載一張圖片可以返回一個紋理對象Texture，紋理對象Texture可以作為模型材質顏色貼圖.map屬性的值。
材質的顏色貼圖屬性.map設置后，模型會從紋理貼圖上采集像素值，這時候一般來說不需要在設置材質顏色.color。.map貼圖之所以稱之為顏色貼圖就是因為網格模型會獲得顏色貼圖的顏色值RGB。
three.js有官方的fbx插件，可以直接將模型加載至網頁，并且支持動畫數據，代碼量也是最少的。 但是，該格式存在很大弊端：插件對文件格式的規范很嚴格，換言之，插件支持性不太好。從網上下載的fbx動畫，十有八九會加載失敗。
首先需要引入FBXLoader.js插件，如果報錯 “Error: THREE.FBXLoader: External library Inflate.min.js required, obtain or import from https://github.com/imaya/zlib.js”，則還需引入inflate.min.js文件。
我們可以看一個簡單案例
https://wow.techbrood.com/fiddle/55419
The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js : 使用three.js設計游戲的學習心得與知識分享
Three.js Making a Game
16 Three.js 游戲操作案例
Joystick, gamepad or 3D mouse support in Three.js
yoannmoinet/nipplejs
https://css-tricks.com/how-to-make-a-smartphone-controlled-3d-web-game/
ADDING SUPPORT FOR VR INPUTS WITH WEBXR AND THREE.JS
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
