blob: 25df2f2f52739a32eaf290c14882ed4da3d339df (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
---
title: Examples
slug: Games/Examples
tags:
- 游戏
translation_of: Games/Examples
---
<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/zh-CN/docs/Games")}}</div>
<p class="summary">这个页面列出了许多令人印象深刻的web技术演示,你可以从中获得灵感和乐趣。这里证明了可以利用JavaScript,WebGL和相关的技术做些什么。前两个部分列出了可以玩的游戏,其中在第二个部分中列出的演示不一定是可交互的或是游戏。</p>
<div class="column-container">
<div class="column-half">
<h2 id="免费演示游戏">免费/演示游戏</h2>
<dl>
<dt><a href="http://www.beloola.com">Beloola</a></dt>
<dd>一个连接充满激情的人们的网络虚拟现实(WebVR)平台。 可以同时在2D屏幕和虚拟现实头盔显示器(设置/转为VR模式)上体验。</dd>
<dt><a href="http://playcanv.as/p/aP0oxhUr">Tanx</a></dt>
<dd>一个多人坦克对战游戏,由<a href="https://playcanvas.com/">PlayCanvas</a>开发。</dd>
<dt><a href="https://robertsspaceindustries.com/comm-link/transmission/14704-Hyper-Vanguard-Force">Hyper Vanguard Force</a></dt>
<dd>一个优雅的纵向卷轴太空射击游戏。</dd>
<dt><a href="http://playcanv.as/p/JtL2iqIH">Swooop</a></dt>
<dd>一个飞行游戏:控制你的飞机并收集宝石。也是由<a href="https://playcanvas.com/">PlayCanvas</a>所开发。</dd>
<dt><a href="https://ga.me/games/save-the-day">Save the Day</a></dt>
<dd>在受灾区域驾驶你的救援直升机以拯救被困的受灾者(ga.me.)。</dd>
<dt><a href="https://ga.me/games/polycraft">Polycraft</a></dt>
<dd>一个海难生存游戏。探索岛屿、打败怪物。</dd>
<dt><a href="http://hexgl.bkcore.com/">HexGL</a></dt>
<dd>一个快节奏、未来主义的赛车游戏。</dd>
<dt><a href="http://beta.unity3d.com/jonas/DT2/">Dead Trigger 2</a></dt>
<dd>经典的僵尸溅射游戏,使用<a href="http://unity3d.com/">Unity3D</a>开发。</dd>
<dt><a href="http://beta.unity3d.com/jonas/AngryBots/">Angry Bots</a></dt>
<dd>一个未来风格的外星人式的第三人称射击游戏,使用<a href="http://unity3d.com/">Unity3D</a>开发。</dd>
<dt><a href="http://sandbox.photonstorm.com/html5/nutmeg/">Nutmeg</a></dt>
<dd>可爱的复古卷轴平台动作游戏。</dd>
<dt><a href="http://www.zibbo.com/game/match-3-games-top/back-to-candyland-episode-1">Back to Candyland</a></dt>
<dd>一个match-3(Candy Crush)风格的游戏。</dd>
<dt><a href="http://playbiolab.com/">Biolab Disaster</a></dt>
<dd>横向卷轴平台射击游戏。</dd>
<dt><a href="http://phoboslab.org/xtype/">X-Type</a></dt>
<dd>纵向卷轴太空射击游戏演示。</dd>
<dt><a href="http://phoboslab.org/xibalba/">Xibalba</a></dt>
<dd>复古(Doom风格)的第一人称射击游戏。</dd>
<dt><a href="https://timeinvariant.github.io/gorescript/play/">Gorescript</a></dt>
<dd>另一个复古风格的第一人称射击游戏。</dd>
<dt><a href="http://hypnoticowl.com/games/the-wizard/">The Wizard</a></dt>
<dd>一个回合制的地下城解谜游戏。</dd>
<dt><a href="http://hextris.io/">Hextris</a></dt>
<dd>类似于俄罗斯方块的六边形解谜游戏。</dd>
<dt><a href="https://gabrielecirulli.github.io/2048/">2048</a></dt>
<dd>一个滑动数字方块的解谜游戏。</dd>
<dt><a href="/en-US/demos/detail/bananabread" title="/en-US/demos/detail/bananabread">BananaBread</a></dt>
<dd>多玩家的3D第一人称射击游戏,使用Emscripten,WebGL和WebRTC开发。</dd>
<dt><a href="https://hacks.mozilla.org/2013/12/monster-madness-creating-games-on-the-web-with-emscripten/">Monster Madness</a></dt>
<dd>一个基于WebGL和asm.js的多人在线射击游戏,由Nom Nom Games 和Trendy entertainment开发。</dd>
<dt><a href="http://www.auraluxgame.com/game/">Auralux</a></dt>
<dd>基于WebGL和asm.js的策略游戏 :捕获所有的太阳以获取胜利!</dd>
<dt><a href="http://browserquest.mozilla.org/">BrowserQuest</a></dt>
<dd>由Little Workshop和Mozilla开发的MMORPG。</dd>
</dl>
<h2 id="商业游戏">商业游戏</h2>
<dl>
<dt><a href="http://oortonline.com/">Oort Online</a></dt>
<dd>一个大型多人网游:在游戏中探索、建造和战斗(目前仍在开发中)。</dd>
<dt><a href="http://www.wizardslizard.com/">A Wizard's Lizard</a></dt>
<dd>自上而下的塞尔达式的探索/RPG游戏。</dd>
<dt><a href="http://qbqbqb.rezoner.net/">QbQbQb </a></dt>
<dd>一个科幻主题的解谜游戏。</dd>
<dt><a href="http://elliotquest.com/">Elliot Quest</a></dt>
<dd>复古的8-bit画面风格冒险游戏。</dd>
</dl>
</div>
<div class="column-half">
<h2 id="混合演示">混合演示</h2>
<dl>
<dt><a href="http://greweb.me/wavegl/">WaveGL</a></dt>
<dd>音频资源的WebGL可视化展示。</dd>
<dt><a href="http://codepen.io/jackrugile/pen/CdKGx/">Canvas Airport Simulation</a></dt>
<dd>可以显示飞机在机场起飞和降落的地图动画,也可以显示航线。</dd>
<dt><a href="http://alteredqualia.com/xg/examples/animation_physics_terrain.html">Animation Physics</a></dt>
<dd>地形和汽车的3D渲染,其中的物理计算使用了<a href="https://github.com/kripken/ammo.js">ammo.js</a> 。</dd>
<dt><a href="http://david.li/flow/">Volumetric Particle Flow</a></dt>
<dd>流体的物理模拟。</dd>
<dt><a href="http://codepen.io/artzub/pen/gszpJ/">Explosion and chain reaction</a></dt>
<dd>会引发更多爆炸的爆炸粒子。</dd>
<dt><a href="http://codepen.io/AshKyd/pen/sylFw">Canvas generated planet</a></dt>
<dd>一个具有小行星带的星球。</dd>
<dt><a href="http://codepen.io/zadvorsky/pen/FAmuL">Digital Fireworks</a></dt>
<dd>在canvas上渲染出的焰火动画效果。</dd>
<dt><a href="http://oos.moxiecode.com/js_webgl/autumn/">Autumn</a></dt>
<dd>秋叶飘落,光源在其后闪烁。使用<a href="https://github.com/mrdoob/three.js">Three.js</a>开发。</dd>
<dt><a href="http://inear.se/fireshader/">Fire walk with me</a></dt>
<dd>翻腾的火云效果。</dd>
<dt><a href="http://codepen.io/jackrugile/pen/AokpF">Rainbow Firestorm</a></dt>
<dd>下雨般的七彩粒子,在由圆组成的地形上跳跃。</dd>
<dt><a href="http://visualiser.fr/babylon/crowd/">Crowd Simulation</a></dt>
<dd>模拟想到达他们相反方向的拥挤人群。</dd>
<dt><a href="http://codepen.io/noeldelgado/pen/ByxQjL">SVG Masking Experiment</a></dt>
<dd>一台X光机,由SVG蒙版创建。</dd>
<dt><a href="https://www.shadertoy.com/view/Ms2SD1">Realistic Water Simulation</a></dt>
<dd>如海浪的流水。</dd>
<dt><a href="http://www.haxor.xyz/demos/1.0/dungeon/">Dungeon demo</a></dt>
<dd>基于Haxor的地下城场景,拥有可行走的人物。</dd>
<dt><a href="http://massiveassaultnetwork.com/html5/">Massive Assault tech demo</a></dt>
<dd>渲染出的具有未来派的军用车辆的群岛。</dd>
<dt><a href="https://callumprentice.github.io/apps/flight_stream/index.html">Flight Stream</a></dt>
<dd>具有模拟航线的3D球体。</dd>
<dt><a href="http://pixelscommander.com/polygon/htmlgl/demo/filters.html">WebGL filters</a></dt>
<dd>用于向HTML元素添加效果的WebGL过滤器演示。</dd>
<dt><a href="http://codepen.io/AshKyd/pen/zxmgzV">SVG isometic tiles</a></dt>
<dd>Generating isometric tiles with SVG matricies.</dd>
<dt><a href="https://jsfiddle.net/jetienne/rkth90c9/">ThreeJS App Player</a></dt>
<dd>你可以在其中载入和运行Three.js的示例。</dd>
<dt><a href="https://developer.mozilla.org/en-US/demos/detail/escher-puzzle/launch">WebGL + Three.js Demo</a></dt>
<dd>警告:可能造成眩晕。</dd>
</dl>
</div>
</div>
|