web前端怎么制作游戏？

寻梦敦煌

用什么语言，看什么书比较好？

KaaPexei

用JavaScript里的canvas可以开发web游戏

redhat9i

目录标题
展示部分
导读
相关技术
CSS部分展示
JavaScript部分展示
点击直接资料领取
展示部分

前端小游戏

导读
期末了有些同学欺负我不会太熟练前端，给我整花活   偏让我给整一个纯前端的期末作业。

好吧我承认我确实对前端不咋熟练最近也在恶补，想要和我一起恶补的同学在下面资料里面能找到些东西哦！我们今天展示的是一个关于前端的期末作业，虽说是一个小游戏但是蚂蚁虽小也都是肉啊。好了话不多说我们开始今天的表演。

相关技术
前端期末作业肯定少不了HTML CSS JavaScript当然了我这里还用到了ajax为了节省代码量我用到了CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
可能有的小伙伴对CDN不太了解我这里简单说一下。

CDN的全称是Content Delivery
Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。


CSS部分展示

设置背景：
#world{
  position: absolute;
  width:100%;
  height: 100%;
  background-color: rgba(245, 205, 217, 0.53);
  overflow: hidden;
}
对分数样式设置：
#credits{
  position:absolute;
  width:100%;
  margin: auto;
  bottom:0;
  margin-bottom:20px;
  font-family:'Voltaire', sans-serif;
  color:#544027;
  font-size:12px;
  letter-spacing:0.5px;
  text-transform: uppercase;
  text-align : center;
  user-select: none;  
}
#credits a {
  color:#544027;
  
}

#credits a:hover {
  color:#dc5f45;
}

JavaScript部分展示

角色的构建：
juese = function() {
  this.status = "running";
  this.runningCycle = 0;
  this.mesh = new THREE.Group();
  this.body = new THREE.Group();
  this.mesh.add(this.body);
  
  var torsoGeom = new THREE.CubeGeometry(7, 7, 10, 1);
  
  this.torso = new THREE.Mesh(torsoGeom, brownMat);
  this.torso.position.z = 0;
  this.torso.position.y = 7;
  this.torso.castShadow = true;
  this.body.add(this.torso);
  
  var pantsGeom = new THREE.CubeGeometry(9, 9, 5, 1);
  this.pants = new THREE.Mesh(pantsGeom, whiteMat);
  this.pants.position.z = -3;
  this.pants.position.y = 0;
  this.pants.castShadow = true;
  this.torso.add(this.pants);
  
  var tailGeom = new THREE.CubeGeometry(3, 3, 3, 1);
  tailGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,0,-2));
  this.tail = new THREE.Mesh(tailGeom, lightBrownMat);
  this.tail.position.z = -4;
  this.tail.position.y = 5;
  this.tail.castShadow = true;
  this.torso.add(this.tail);
  
  this.torso.rotation.x = -Math.PI/8;
  
  var headGeom = new THREE.CubeGeometry(10, 10, 13, 1);
  
  headGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,0,7.5));
  this.head = new THREE.Mesh(headGeom, brownMat);
  this.head.position.z = 2;
  this.head.position.y = 11;
  this.head.castShadow = true;
  this.body.add(this.head);
  
  var cheekGeom = new THREE.CubeGeometry(1, 4, 4, 1);
  this.cheekR = new THREE.Mesh(cheekGeom, pinkMat);
  this.cheekR.position.x = -5;
  this.cheekR.position.z = 7;
  this.cheekR.position.y = -2.5;
  this.cheekR.castShadow = true;
  this.head.add(this.cheekR);
  
  this.cheekL = this.cheekR.clone();
  this.cheekL.position.x = - this.cheekR.position.x;
  this.head.add(this.cheekL);
  
  
  var noseGeom = new THREE.CubeGeometry(6, 6, 3, 1);
  this.nose = new THREE.Mesh(noseGeom, lightBrownMat);
  this.nose.position.z = 13.5;
  this.nose.position.y = 2.6;
  this.nose.castShadow = true;
  this.head.add(this.nose);
  
  var mouthGeom = new THREE.CubeGeometry(4, 2, 4, 1);
  mouthGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,0,3));
  mouthGeom.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI/12));
  this.mouth = new THREE.Mesh(mouthGeom, brownMat);
  this.mouth.position.z = 8;
  this.mouth.position.y = -4;
  this.mouth.castShadow = true;
  this.head.add(this.mouth);
  
  
  var pawFGeom = new THREE.CubeGeometry(3,3,3, 1);
  this.pawFR = new THREE.Mesh(pawFGeom, lightBrownMat);
  this.pawFR.position.x = -2;
  this.pawFR.position.z = 6;
  this.pawFR.position.y = 1.5;
  this.pawFR.castShadow = true;
  this.body.add(this.pawFR);
  
  this.pawFL = this.pawFR.clone();
  this.pawFL.position.x = - this.pawFR.position.x;
  this.pawFL.castShadow = true;
  this.body.add(this.pawFL);
  
  var pawBGeom = new THREE.CubeGeometry(3,3,6, 1);
  this.pawBL = new THREE.Mesh(pawBGeom, lightBrownMat);
  this.pawBL.position.y = 1.5;
  this.pawBL.position.z = 0;
  this.pawBL.position.x = 5;
  this.pawBL.castShadow = true;
  this.body.add(this.pawBL);
  
  this.pawBR = this.pawBL.clone();
  this.pawBR.position.x = - this.pawBL.position.x;
  this.pawBR.castShadow = true;
  this.body.add(this.pawBR);
  
  var earGeom = new THREE.CubeGeometry(7, 18, 2, 1);
  earGeom.vertices[6].x+=2;
  earGeom.vertices[6].z+=.5;
  
  earGeom.vertices[7].x+=2;
  earGeom.vertices[7].z-=.5;
  
  earGeom.vertices[2].x-=2;
  earGeom.vertices[2].z-=.5;
  
  earGeom.vertices[3].x-=2;
  earGeom.vertices[3].z+=.5;
  earGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,9,0));
  
  this.earL = new THREE.Mesh(earGeom, brownMat);
  this.earL.position.x = 2;
  this.earL.position.z = 2.5;
  this.earL.position.y = 5;
  this.earL.rotation.z = -Math.PI/12;
  this.earL.castShadow = true;
  this.head.add(this.earL);
  
  this.earR = this.earL.clone();
  this.earR.position.x = -this.earL.position.x;
  this.earR.rotation.z = -this.earL.rotation.z;
  this.earR.castShadow = true;
  this.head.add(this.earR);
  
  var eyeGeom = new THREE.CubeGeometry(2,4,4);
  
  this.eyeL = new THREE.Mesh(eyeGeom, whiteMat);
  this.eyeL.position.x = 5;
  this.eyeL.position.z = 5.5;
  this.eyeL.position.y = 2.9;
  this.eyeL.castShadow = true;
  this.head.add(this.eyeL);
  
  var irisGeom = new THREE.CubeGeometry(.6,2,2);
  
  this.iris = new THREE.Mesh(irisGeom, blackMat);
  this.iris.position.x = 1.2;
  this.iris.position.y = 1;
  this.iris.position.z = 1;
  this.eyeL.add(this.iris);
  
  this.eyeR = this.eyeL.clone();
  this.eyeR.children[0].position.x = -this.iris.position.x;
  
  
  this.eyeR.position.x = -this.eyeL.position.x;
  this.head.add(this.eyeR);

  this.body.traverse(function(object) {
    if (object instanceof THREE.Mesh) {
      object.castShadow = true;
      object.receiveShadow = true;
    }
  });
}


function createjuese() {
  juese = new juese();
  juese.mesh.rotation.y = Math.PI/2;
  scene.add(juese.mesh);
  juese.nod();
}
<hr/>我建了一个前端小白交流群，私信我，进入交流群。我会给大家分享我收集整理的各种学习资料，组织大家一起做项目练习，帮助大家匹配一位学习伙伴互相监督学习，欢迎加入
作者：肥学
原文链接：期末前端web大作业——用前端语言写一个小游戏

七彩极

Web前端开发游戏发布到Web平台上的话，一般就是使用前端语言开发 HTML/CSS/JS。
可以使用Cocos/白鹭/LayaBox也可以使用Eva.js，他们都可以使用JS开发。使用Unity可以导出成Web平台运行，一般不推荐（杀猪用牛刀了）。
介于纯DOM（React/Vue）项目开发和游戏开发中间，有一个没有游戏功能那么复杂，又带有一些游戏的效果，叫做互动游戏，可以使用 Eva.js 进行开发。
Eva.js 致力于让前端工程师更低成本的开发互动游戏。
Eva.js 介绍：新工具开源！一款双11养猫5亿用户的互动引擎（附地址）
基础知识：阿里巴巴淘系技术：所有前端都要看的2D游戏化互动入门基础知识
官网：https://eva.js.org
Demo: EVA Playground
Github：https://github.com/eva-engine/eva.js

BlaXuan

可以去B站看，自己多操作，就慢慢的会了

kyuskoj

如果你不用游戏引擎。那就写原生html,js,css，或者使用canvas/svg。
什么叫游戏？简单点说：可交互的图形画面就可以称之为游戏。所以从这点来说。写几个html，加点事件交互，也算是制作了一个简单迷你游戏。同样的，使用canvas/svg这种更底层的图形开发api当然也可以实现。
如果使用游戏引擎，又想用前端的技术栈，那就用cocos creator。一次开发，多端打包。整个引擎非常的像Unity3d，可以理解为是2d版本的unity。使用的是js作为脚本语言。cocos creator暂时只能做2d游戏。
如果你想做3d游戏。那就直接开搞Unity3d吧。不过虽然Unity3d也支持js作为脚本语言，但实际上大部分公司和团队选择的是C#，大部分教程也是以C#作为脚本语言，所以如果要上手Unity3d，那就需要学习C#。
其他的还有UE4，寒霜等等，学习成本都比较高，也不适合个人开发者。这里就不推荐了。
不建议看书。网上找视频看看，多上手练就可以了。
<hr/>2022年了，更新一下。creator已经支持3d游戏开发。虽然跟几个巨头专业3d引擎还有差距，但是能走到这一步就是很大进步。希望国产引擎越做越好吧。