整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
覽器和 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è)充滿(mǎn)偉大的游戲機(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)行且外觀(guā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ē)。可以在成千上萬(wàn)的播放器曲目中選擇一個(gè)播放，也可以創(chuàng)建自己的曲目并分享。
地址：http://entanglement.gopherwoodstudios.com/zh-CN-index.html類(lèi)型:拼圖,娛樂(lè)
這個(gè)游戲的目的是通過(guò)在網(wǎng)格上放置線(xiàn)段來(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ì)遇到神話(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ù)古外觀(guān)圖形的游戲。它坐落在古希臘，在那里我們扮演的女人被賦予了重新的機(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è)充滿(mǎn)色彩和幾何形狀的平臺(tái)游戲中，盡你所能奔跑吧。
地址：http://playbiolab.com/類(lèi)型:動(dòng)作
一款出色的像素藝術(shù)平臺(tái)游戲，你必須在這里逃脫充滿(mǎn)突變生物和其他不良生物的實(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
們分享過(guò)很多漂亮的HTML5動(dòng)畫(huà)，包括CSS3菜單、HTML5 Canvas動(dòng)畫(huà)等。今天我們精選了9款非常不錯(cuò)的超炫HTML5最新動(dòng)畫(huà)，一起來(lái)看看。
1、HTML5可愛(ài)的404頁(yè)面動(dòng)畫(huà) 很逗的機(jī)器人
很久以前我在網(wǎng)上看到一篇帖子，是專(zhuān)門(mén)分享創(chuàng)意404頁(yè)面的，很可惜我已經(jīng)找不到了。但是今天我找到一款利用HTML5實(shí)現(xiàn)的404機(jī)器人動(dòng)畫(huà)，當(dāng)你進(jìn)入該404頁(yè)面時(shí)，就會(huì)出現(xiàn)一個(gè)機(jī)器人在跳舞，非常可愛(ài)。這個(gè)機(jī)器人跳舞的動(dòng)作是利用HTML5和CSS3的動(dòng)畫(huà)屬性實(shí)現(xiàn)的。
2、HTML5/CSS3鼠標(biāo)滑過(guò)抖動(dòng)圖標(biāo) 非常可愛(ài)
這是一款簡(jiǎn)單的利用CSS3實(shí)現(xiàn)的圖標(biāo)抖動(dòng)特效，首先我們精選了幾款常用而且漂亮的圖標(biāo)，并在圖標(biāo)下方寫(xiě)有描述性的文字。當(dāng)我們把鼠標(biāo)滑過(guò)圖標(biāo)時(shí)，圖標(biāo)即會(huì)不停的抖動(dòng)，像是在告訴用戶(hù)“點(diǎn)我吧”，這個(gè)功能很多地方應(yīng)該能用到。
3、HTML5/jQuery 3D焦點(diǎn)圖插件 多種超酷切換動(dòng)畫(huà)
之前我們分享過(guò)一些很酷的焦點(diǎn)圖插件了，有些是基于jQuery的焦點(diǎn)圖應(yīng)用，今天我們要分享一款基于HTML5和jQuery的3D焦點(diǎn)圖插件，該HTML5焦點(diǎn)圖有多種超酷的切換動(dòng)畫(huà)，包括3D百葉窗、3D翻轉(zhuǎn)等特效，有些切換效果在高版本Chrome中有效果。
4、CSS3各大網(wǎng)站分享按鈕 帶網(wǎng)站Logo小圖標(biāo)
對(duì)于CSS3分享按鈕，我們?cè)谥暗奈恼轮幸呀?jīng)分享幾款了，像純CSS3社會(huì)化分享按鈕 可固定網(wǎng)頁(yè)頂部、CSS3發(fā)光社會(huì)分享按鈕等。今天我又收集了一款非常強(qiáng)大的CSS3各大網(wǎng)站分享按鈕，非常多的按鈕，基本上一些國(guó)外的社交網(wǎng)站都有。另外，這款CSS3分享按鈕還帶有社交網(wǎng)站的Logo小圖標(biāo)，外觀(guān)非常漂亮。
5、CSS3滑塊菜單 菜單動(dòng)畫(huà)很酷
我們之前分享過(guò)不少很酷且非常實(shí)用的CSS3菜單，今天我們?cè)賮?lái)分享一款CSS3滑塊菜單，這款菜單初始化時(shí)是幾個(gè)很漂亮的小圖標(biāo)，當(dāng)鼠標(biāo)滑過(guò)菜單項(xiàng)時(shí)，小圖標(biāo)即展開(kāi)成具體菜單內(nèi)容，這些內(nèi)容可以自己定義，效果非常不錯(cuò)。
6、HTML5畫(huà)圖特效 超酷的筆刷動(dòng)畫(huà)
之前我們分享過(guò)一款HTML5畫(huà)圖工具HTML5 Canvas畫(huà)板畫(huà)圖工具 可定義筆刷和畫(huà)布，我們基本對(duì)HTML5的畫(huà)圖功能有一定的了解。今天我們要分享一款超酷的HTML5筆刷動(dòng)畫(huà)，我們可以選擇不同的筆刷形狀，筆刷在畫(huà)布上移動(dòng)時(shí)就會(huì)播放非常絢麗的動(dòng)畫(huà)效果。
7、HTML5/CSS3實(shí)現(xiàn)蝙蝠俠人物動(dòng)畫(huà) 蜘蛛俠變身
利用CSS3實(shí)現(xiàn)人物動(dòng)畫(huà)效果非常多，我們?cè)趆tml5tricks上也分享了不少，像HTML5/CSS3實(shí)現(xiàn)笑臉動(dòng)畫(huà)、純CSS3繪制可愛(ài)小男孩動(dòng)畫(huà)等。今天我們?cè)俜窒硪豢罾眉僀SS3實(shí)現(xiàn)的蝙蝠俠動(dòng)畫(huà)，頁(yè)面加載后就會(huì)啟動(dòng)蝙蝠俠的繪制，就像組裝汽車(chē)一樣。
8、HTML5 SVG環(huán)形圖表應(yīng)用 很酷的數(shù)據(jù)初始動(dòng)畫(huà)
之前我們也分享過(guò)幾個(gè)HTML5餅狀圖表應(yīng)用，像HTML5 Canvas餅狀圖表，可以很清晰的展示各個(gè)數(shù)據(jù)的所占比例。今天要分享的這款HTML5圖表是一個(gè)環(huán)形的，和餅狀圖表類(lèi)似，主要特點(diǎn)也是能清晰的了解每項(xiàng)數(shù)據(jù)所占的比例。這款HTML5環(huán)形圖表是利用SVG實(shí)現(xiàn)的，圖表數(shù)據(jù)在初始化的時(shí)候?qū)⒊霈F(xiàn)非常酷的動(dòng)畫(huà)效果。
9、HTML5迷你音樂(lè)播放器 3D翻轉(zhuǎn)播放按鈕
上一篇我們分享了一款外觀(guān)很酷的HTML5音樂(lè)播放器，這次分享的播放器比較小巧迷你，雖然外觀(guān)沒(méi)有上一個(gè)播放器那么精致，但是功能卻是很齊全的。該HTML5音樂(lè)播放器的特點(diǎn)是有一個(gè)3D的翻轉(zhuǎn)播放按鈕。當(dāng)然對(duì)于HTML5播放器的外觀(guān)，大家可以自己設(shè)計(jì)定義。
以上就是9款超炫HTML5最新動(dòng)畫(huà)源碼，你喜歡么？
出處：極客頭條
者：龍付成 騰訊技術(shù)工程
轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/QqpPGWf3IVEDN1t80CZ06Q
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
