，做了一个h5活动页，以游戏的形式展示。第一次尝试用js写小游戏。这是一个非常有趣的过程，也是非常宝贵的经验。效果图直接上传了效果的gif，一小部分游戏效果，录制有点卡。主题平台），是不是应该给用户一些反馈，就像之前特别火爆的微信年终总结。总之就是给用户留下深刻印象，特别酷。她说很酷的时候，转过头冲我笑了笑，笑中带着点，嗯，杀意。活动的形式、展示的方式、数据，反正都没有想好，整个过程讨论得如火如荼。当时我不知道为什么脑袋一热，就对她说：“没关系，你做吧，你能想到我给你做。”而我也因为这句话让自己陷入了水深火热之中。.讨论的结果是大家的想法都不是特别酷，不好玩，干脆做个游戏吧！众人转头看向我，我想着刚才的话，只吐出一个字，“操”。而心中百感交集，“游戏？有趣？做！以前没做过？能做吗？做！”。敲定，两周之内，游戏方法将在魔修中展现用户的点点滴滴。预备工作游戏的形式大概类似于滑雪冒险和赛车的结合。伪3D效果以赛车形式展现。滑雪冒险的风格是我们的主题。同时大家也给我们的游戏做了很酷的设计。名字----磨修士道。游戏引擎游戏的显示形式确定后，直觉告诉我，如果想快速稳定地呈现游戏，而不需要图片加载控制、动画控制等复杂的处理，就需要一个JS游戏引擎。最终在EgretPhaserPixiJS中选择了PixiJS。虽然它不像Egret那样有完整的中文文档，但是提供了清晰易懂的示例，可以快速上手。没有复杂的生态。简单的几行代码就可以用js实现。我认为需要以下功能：容器渲染和背景绘制。我需要自定义整个画布的大小和背景。我需要使用不同的容器承载不同的内容，灵活控制每个容器的属性：//canvasvarapp=newPIXI.Application(800,600,{backgroundColor:0x1099bb});document.body.appendChild(app.view);//自定义容器varcontainer=newPIXI.Container();container.x=(app.renderer.width-container.width)/2;container.y=(app.renderer.height-container.height)/2;app.stage.addChild(容器);图片加载和动画处理我们都知道，在使用canvas进行图片绘制时，需要确认图片是否加载成功，游戏中有大量的图片资源需要维护。PixiJS为我们提供了这个服务：varbunny=PIXI.Sprite.fromImage('required/assets/basics/bunny.png');bunny.x=app.renderer.width/2;bunny.y=app.renderer.height/2;app.stage.addChild(bunny);同时，我们需要一个动画控制器来控制每个Sprite的移动和权重，而不是直接重新修改各种属性：app.ticker.add(function(delta){bunny.rotation+=0.1*delta;});需要注意的是，我们会发现这里的SpriteAnimation控件相当于在动画队列中加入了motion，实现了类似transformjs的效果，可以直接对实例的属性进行操作。我在写项目的时候，官方给出的例子是通过统一的animate函数来操作，通过requestAnimationFrame来控制帧动画。我推荐一种新方法而不是以下方法：functionanimate(){requestAnimationFrame(animate);bunny.rotation+=1;renderer.render(stage);}事件处理游戏中最重要的部分相当于用户交互，称为事件处理。给Sprite添加事件监听器很简单，如下图：//Elementscanbeclickedonsprite.interactive=true;//鼠标移动到cursorsprite.buttonMode=true;sprite.on('click',onClick);//mouse-onlyprite.on('tap',onClick);//touch-onlyfunctiononClick(){sprite.scale.x*=1.25;sprite.scale.y*=1.25;}设计图设计图当然也很重要，它决定了我们如何实现这个游戏，当我拿到设计图的时候，他就这样长大了，我的心都碎了。怎么办呢，我也很无奈~加油吧！实现思路基于以上，PixiJS已经基本满足了我们的需求，也就是说工具准备和素材准备已经完成。在开始编写之前，我们需要先想好实现思路，以保证编写过程的清晰，避免不必要的麻烦。后台滑动效果的实现就像我们平时玩赛车游戏一样。我们感觉赛车在赛道上竞速。事实上，赛车只是左右移动，而背景是移动的。如何规划路线，让背景跟随既定场景去锻炼，展现不同视角，特地请教了中美洲的同胞。他们使用一种叫做“相机”的东西来实现它。对于我们来说，不需要这么复杂的场景，只需要像以前一样让背景有规律地“平移”，造成“树动我不动”的视觉效果。大、远、小”的变化会产生低矮的立体效果。Keywords:PerspectiveNear,large,far,small(offset,size,speed)Offsetroute对于背景和物体运动，一般的路线规划如下：确定视觉焦点后，我们只需要随机生成物体所在的位置出现，计算出a,b相对固定，这样y就可以增加相应的速度，x就可以根据运动轨迹进行偏移，从而实现跑得更近的效果。对于运动轨迹，假设物体向下偏移N，对应的相对于中心轴的水平偏移量为：size同时，我们还需要显示物体的近、大、远、小。这个比较简单，焦点为0，页面底部为1，相应的scale可以放大：scale=(curY-startY)/(endY-startY);运动的速度应根据距离的远近与物体的速度不同。背景树和碰撞对象的区别对于背景树，我们需要在一开始就显示所有的树，覆盖两边的背景。每一列树对应的移动路线都是一样的，可以直接循环显示。当树移动到底部时，让它出现在顶部。所以只需要判断树有多少行多少列，并设置它的边界，根据行数和列数确定初始唯一性并移动即可。同时可以在小范围内随机移动树，使树错落有致。如下图：exportdefaultfunctionTree(row,col,direction){this.cfg={direction:direction,//directioncol:col,//列数row:row,//行数MaxX:440,minY:210,maxY:500,range:10//坐标浮动范围}};对于物体，需要随机生成它的初始x坐标，并计算它的运动路径，并在运动过程中进行碰撞检测，检测是否碰撞到角色。字符滑动实现字符滑动的操作，使用最简单的实现方式：按钮。当用户点击不同的方向时，让角色向相应的方向偏移。同时，为了让人物滑动不生硬，人物在左右滑动过程中也应该有一个相应的倾斜角度，就像我们平时玩滑雪转弯时换心一样。思路如下：当按钮被点击时，方向改变时检测方向。如果它向左移动，x减小，向右移动，它增加。当向右（左）移动时，手松开时角色相应的旋转也增加（减少），角色对应的旋转慢慢归0；碰撞检测肯定是必须的，因为角色有一个吃东西的环节（不然这叫什么游戏），所以碰撞检测肯定是必须的。我们可以通过两种方式执行碰撞检测。人们检测碰撞物体。需要实时遍历物体坐标列表，检测每个物体自身的碰撞检测，检测自身与人位置的对应差异。我明智地选择了第二个。毕竟，每个物体的位置都是实时变化的，每次碰撞检测都执行一个循环的方法太繁琐了。这里我们设置碰撞检测区域（宽度和高度）。当物体在移动时，将角色的x、y坐标与自身x、y坐标加减形成的四个边界进行比较。如果有碰撞，进行相应的操作就可以了，比如播放音频，打分+1等。架构设计思路理清后，后面的路就很清楚了。接下来，我们就可以开始设计如何实现这个东西了。显然，我们在游戏中的“角色”很多，还是用“面向对象”的方式比较好。大致分为如下stage//舞台，基本场景渲染，游戏整体控制（开始，停止）等玩家吃饭。包括碰撞检测等，它会自己移动树//因为树本身会移动，所以每棵树都是一个类分数//分数控制和显示cfg.js//包括整体游戏配置对象内部划分的各个对象包含以下Point属性和功能：1.对象配置每个对象包含自己内部的基本配置，包括位置，边框，图片等直观，方便调试exportdefaultfunctionPeople(stage){this.cfg={img:require('./img/people.png'),anchor:{x:0.5,y:0.5,},position:{x:cfg.width/2,y:500},speed:5,}}2.其他方法每个对象都有自己的方法，如下：render//渲染图片等animate//动画函数init//一些初始化配置的实现通过以上思路和结构的设计，我很快实现了这个游戏。..没错，理清思路和结构的重要性就在于此。当然，在实现过程中，也有一些小点可以记录下来：资源加载器（图片）为了游戏的效果，在加载完所有资源（尤其是图片资源）后决定停止加载页面。如何判断所有内容都加载完毕？写了一个小加载程序varpics=[require('./img/bg-start.png'),require('./img/btn-start.png'),...];functionloadImages(pics,callback){if(pics.length){varimg=newImage(),pic=pics.转移（）;图像。onload=回调；图像。来源=图片；loadImages（图片，回调）；}else{返回；}}$(function(){loadImages(pics,function(){if(!pics.length){$('.loading').hide();};})});强制横屏游戏横屏显示，再强制横屏。我当时还在这个上面纠结了好久，因为基础不扎实还在想走私，还在想是监听resize事件还是监听screenrotation事件，有没有这些东西，好吧！让它旋转。如果(window.orientation==180||window.orientation==0){$('#main').height(winW);$('#main').width(winH);$('#main').css({'transform':'rotate(90deg)',});}else{$('#main').css('transform','rotate(0)');}定时器控件理清思路最后，最乱的就是各种定时器了。为了达到物体随机出现的效果，让每个物体在随机数秒后开始出现；最后一个物体出现后，结束画面出现后多少秒等，需要理清各个定时器之间的关系，并为其添加语义。及时清除未完成的定时器，防止定时器引起意外问题。写在最后，最终游戏的效果基本让大家满意。也是第一次尝试这种开发方式，周围也完全没有人做过。从一开始的忐忑和茫然，到过程中理清了思路和结构，再到写作中各种不为人知的陷阱，感觉这两周经历了一件很充实的事情。同时，对于一些未知事物的后续探索和学习，我也有了更丰富的经验。找对方法才是王道！
