整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
览器和 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 是一款令人上瘾的游戏，你可以在其他玩家绘制的赛道上骑自行车。可以在成千上万的播放器曲目中选择一个播放，也可以创建自己的曲目并分享。
地址：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小时内与您取得联系。
