使用Three.js实现跳转游戏_0

时间：2023-03-18 15:21:24 科技观察

前言跳转是微信小程序[3]的一款小游戏。长按屏幕让小人跳跃玩耍。分数根据小人跳跃的箱子数量和特殊箱子奖励物品计算。游戏规则很简单：按住鼠标充电，松手，立方体就会从一个盒子跳到另一个盒子。然而，正是这个小动作，让你神奇地一开始就停不下来。Three.jsThree.js是一个在浏览器中运行的3D引擎。您可以使用它来创建各种3D场景，包括相机、光影和材质等各种对象。创建场景，设置光源，创建相机，设置相机位置和相机镜头的方向，创建3D渲染器，并使用渲染器将创建的场景渲染出来。整个程序的结构就实现了。将html文件导入three.js引擎页面结构本次得分

重启

分数：0

场景letscene=newTHREE.Scene();//创建场景相机常用的相机有两种：透视相机PerspectiveCamera[4]符合人们的心理习惯，近的大，远的小。人脸相机OrthographicCamera[5]和距离一样大letcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);//创建一个透视相机，有4个参数（visualrange,widthHighscale,closerange,longrange）camera.position.z=10;camera.position.y=3;camera.position.x=8;//相机的xyz场景方向几何体使用CubeGeometryGeometry创建一个立方体，使用MeshLambertMaterial材质配置立方体渲染出一个看起来暗淡无光的表面。该材质将对场景中的光源做出反应。这个材质可以配置一些其他的属性比如：颜色等letgeometry=newTHREE.CubeGeometry(4,2,4);//创建一个几何对象（宽，高，深）letmaterial=newTHREE.MeshLambertMaterial({color:0xbebebe});//创建一个几何对象，可以用来作为立方体的材质，该对象包含颜色、透明度等属性，letcube=newTHREE.Mesh(geometry,material);//合并cube.position.x=16;场景。添加（立方体）；//添加场景中，光源场景Scene主要由几何模型和灯光Light组成。在实际开发过程中，大多数3D场景往往需要设置光源，通过不同的光源在模型上模拟生活中的灯光效果，尤其是为了提高Threejs的渲染效果，需要对光源进行设置，就像摄影师拍照时需要开灯一样。让directionalLight=newTHREE.DirectionalLight(0xffffff,1.1);//平行光（颜色，强度）directionalLight.position.set(3,10,5);//平行光位置scene.add(directionalLight);//在场景中添加平行光letlight=newTHREE.AmbientLight(0xffffff,0.4);//灯光材质scene.add(light);//直接通过WebGL渲染器给场景渲染添加光照WebGLRenderer[6].setSize()方法将渲染尺寸设置为浏览器主体区域的宽高。让renderer=newTHREE.WebGLRenderer({antialias:true});//创建渲染器（让边缘动画不锯齿）renderer.setSize(window.innerWidth,window.innerHeight);//画布宽高renderer.setClearColor(0x282828);//修改画布颜色renderer.render(scene,camera);//渲染场景相机（后续更新也在这里）document.body.appendChild(renderer.domElement);//把当前渲染的canvas放到body里面letx=8;functionrender(){//递归x-=0.1;相机.position.x=x;renderer.render（场景，相机）；//更新并重新渲染if(x>=-8){//满足当前条件requestAnimationFrame(render)//循环渲染}}至此，实现了一个原型添加第二块_createCube(){letgeometry=newTHREE.CubeGeometry(this.config.cubeWidth,this.config.cubeHeight,this.config.cubeDeep);//创建一个几何对象（宽，高，深）letmaterial=newTHREE.MeshLambertMaterial({color:this.config.cubeColor});//材质，对象包含颜色，透明度等属性，letcube=newTHREE.Mesh(geometry,material);//合并在一起if(this.cubes.length){//从第二块开始向左右方向随机出现cube.position.x=this.cubes[this.cubes.length-1].position.x;立方体.position.y=this.cubes[this.cubes.length-1].position.y;cube.position.z=this.cubes[this.cubes.length-1].position.z;this.cubeStat.nextDir=Math.random()>0.5?“左右”;//向左或向右if(this.cubeStat.nextDir=="left"){//改变x轴向左或y轴cube.position.x=cube.position.x-Math.round(Math.random()*4+6);}else{cube.position.z=cube.position.z-Math.round(Math.random()*4+6);}}this.cubes.push(立方体);//统一添加块if(this.cubes.length>5){//页面最多可以看到5个块this.scene.remove(this.cubes.shift());//超过则移除}this.scene.add(cube);//添加到场景中if(this.cubes.length>1){//更新相机位置this._updateCameraPros();}};定义一个正方形数组，判断它们从左右第二个方块开始随机出现this.cubeStat.nextDir=Math.random()>0.5？"left":"right"如上图所示：（这个由两张图组成）跳块_createJumper(){letgeometry=newTHREE.CubeGeometry(this.config.jumperWidth,this.config.jumperHeight,这个.config.jumperDeep);//(宽度,高度,深度)letmaterial=newTHREE.MeshLambertMaterial({color:this.config.jumperColor});//材质、颜色、透明度this.jumper=newTHREE.Mesh(geometry,material);//合并在一起this.jumper.position.y=1;//显示跳块geometry.translate(0,1,0);//翻译this.scene.add(this.jumper);//添加到场景}使用Geometry几何对象有一系列的顶点属性和方法，通过.scale(),.translate(),.rotateX()等方法可以进行几何变换如几何本身的缩放、平移和旋转。请注意，组合的顶点位置的坐标数据实际上发生了变化。鼠标按下状态this.jumperStat={//鼠标按下速度ready:false,xSpeed:0,ySpeed:0};_handleMouseDown(){if(!this.jumperStat.ready&&this.jumper.scale.y>0.02){this.jumper.scale.y-=0.01;//压缩块this.jumperStat.xSpeed+=0.004;this.jumperStat.ySpeed+=0.008;这个._render();requestAnimationFrame(()=>{this._handleMouseDown()})}};松开鼠标，弹出状态的生活不就是这样吗？只要跳对位置，就可以“逆袭”！//鼠标释放讲state_handleMouseUp(){this.jumperStat.ready=true;如果(this.jumper.position.y>=1){如果(this.jumper.scale.y<1){这个。jumper.scale.y+=0.1;//如果压缩状态小于1，则+}if(this.cubeStat.nextDir=="left"){//pickbox落在哪里this.jumper.position.x-=this.jumperStat.xSpeed;}else{this.jumper.position.z-=this.jumperStat.xSpeed;}this.jumper.position.y+=this.jumperStat.ySpeed;this.jumperStat.ySpeed-=0.01;//上升和下降状态this._render();requestAnimationFrame(()=>{//循环执行this._handleMouseUp();})}else{//下降状态this.jumperStat.ready=false;this.jumperStat.xSpeed=0;this.jumperStat.ySpeed=0;this.jumper.position.y=1;this.jumper.scale.y=1;这个._checkInCube();//检查它落在哪里if(this.falledStat.location==1){//落下后等于1,+scorethis.score++;这个._createCube();这个._updateCamera();if(this.successCallback){//否则失败this.successCallback(this.score);}}else{this._falling()}}};它落在哪里？学会控制速度感是一件美妙的事情。当你减速时，学会控制速度。因为在每一个过程中，你生命中都有值得停下来浏览、欣赏、感受的东西。在我们的认知中，我们总觉得速度越快，时间越多，效率就越高，生产力就越高。其实并不是。如果你的头脑经常处于高速思考的状态，你肯定会感到忙碌和无所适从；如果你总是担心未来或想着过去，你将无法专注于你现在正在做的事情，你一定会觉得时间不够用。效率大大降低。this.falledStat={location:-1,//落在当前区块的哪个位置distance:0,//距离是否已经落下};this.fallingStat={//是否落到点end:false,speed:0.2}//检查落在哪里//-1-10从当前框落下//1落在下一个框10落自下一个盒子//0不落在盒子上_checkInCube(){letdistanceCur,distanceNext;//当前框与下一个框的距离letshould=(this.config.jumperWidth+this.config.cubeWidth)/2;//if(this.cubeStat.nextDir=="left"){//向左走distanceCur=Math.abs(this.jumper.position.x-this.cubes[this.cubes.length-2].position.x);distanceNext=Math.abs(this.jumper.position.x-this.cubes[this.cubes.length-1].position.x);}else{//向右走distanceCur=Math.abs(this.jumper.position.z-this.cubes[this.cubes.length-2].position.z);distanceNext=Math.abs(this.jumper.position.z-this.cubes[this.cubes.length-1].position.z);}if(distanceCurthis.cubes[this.cubes.length-1].position.x){this._fallingRotate("leftBottom")}else{this._fallingRotate("leftTop")}}else{//确定正确的方向if(this.jumper.position.z>this.cubes[this.cubes.length-1].position.z){this._fallingRotate("rightBottom")}else{this._fallingRotate("rightTop")}}}elseif(this.falledStat.location==-10){//从当前框落下if(this.cubeStat.nextDir=="left"){this._fallingRotate("leftTop")}else{this._fallingRotate("rightTop")}}elseif(this.falledStat.location==0){this._fallingRotate("none")}};结局无论输赢，人生就是一个起起落落的过程。这才是人生正确的姿势。当然，这不仅仅是游戏。可能是你沉浸在游戏中，也可能你已经注意到，小方块的玩家形象就是生活中的“自己”。世界就像一个“跳跳”的游戏：规则和目标明确的智力游戏，玩家可以自由移动，站对位置得分。不时轻轻擦拭，避免灰尘。可以有所收获，可以享受生活，可以热爱人间烟火！！！参考文献[1]fwjzzz.gitee.io/jump:https://fwjzzz.gitee.io/jump[2]gitee.com/fwjzzz/Jump:https://gitee.com/fwjzzz/Jump[3]微信小站程序：https://baike.baidu.com/item/微信小程序/20171697[4]PerspectiveCamera：http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/cameras/PerspectiveCamera[5]OrthographicCamera：http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/cameras/OrthographicCamera[6]WebGLRenderer：http://www.yanhuangxueyuan.com/threejs/docs/index。html#api/en/renderers/WebGLRenderer

上一篇：微软发现与伊朗有关的APT组织以美国和以色列国防公司为目标

下一篇：白宫将乌克兰DDoS攻击事件归咎于俄罗斯GRU黑客

使用Three.js实现跳转游戏_0相关文章