寻梦敦煌 发表于 2023-3-31 16:15

web前端怎么制作游戏？

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

KaaPexei 发表于 2023-3-31 16:16

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

redhat9i 发表于 2023-3-31 16:25

目录标题
展示部分
导读
相关技术
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.x+=2;
earGeom.vertices.z+=.5;

earGeom.vertices.x+=2;
earGeom.vertices.z-=.5;

earGeom.vertices.x-=2;
earGeom.vertices.z-=.5;

earGeom.vertices.x-=2;
earGeom.vertices.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.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大作业——用前端语言写一个小游戏

七彩极 发表于 2023-3-31 16:35

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 发表于 2023-3-31 16:45

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

kyuskoj 发表于 2023-3-31 16:46

如果你不用游戏引擎。那就写原生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引擎还有差距，但是能走到这一步就是很大进步。希望国产引擎越做越好吧。
页: [1]
查看完整版本: web前端怎么制作游戏？