当前位置: 首页 > Web前端 > HTML5

微信小游戏入门,写一个简单的东方弹幕

时间:2023-04-05 19:09:09 HTML5

,了解微信小游戏官方文档。对小游戏的文件结构有详细的介绍。新建一个官方例子来说明最外层除了readme外还有3个文件。game.js程序入口game.json小游戏配置文件project.config.json项目设置文件具体配置可以查看官方文档,只需要按照文件名格式写这几个文件,其他文件内容而这个文件是官方examples中用来模拟浏览器环境的adapter,如果有需要可以自己写,我们这里继续沿用这个。入口文件game.jsimport'./js/libs/weapp-adapter'import'./js/libs/symbol'importMainfrom'./js/main'newMain()整个微信小游戏其实运行在微信框架中一个原生的canvas,没有document等浏览器页面环境(所以才有了模拟浏览器环境的adapter),小游戏框架运行game。小游戏api的调用和原生画布的操作。如果你之前用过原生canvas或者其他canvas库,马上就可以零成本开始开发,官方开发工具也有es6=》es5转换,所以如果项目比较小,就不需要其他东西了,只需在文本编辑器中修改它,保存并查看它。启动音频使用原码帧时序,同样使用wx回调函数window.requestAnimationFrame(this.TimerHandel.bind(this),canvas)引入easyfromcanvas2d库createjs和自写工具库import'./js/libs/weapp-adapter'import'./js/libs/ease'import'./js/plugin/Math'importMainfrom'./js/main'window.main=newMain();保持原有的触摸运动飞行器和新型重力感应移动飞行器=>{this.player.speedx=Math.floor(res.x*100)/10;this.player.speedy=Math.floor(-res.y*100)/10;})所有其他的都根据删除重写create.js库;所有的子弹都继承一个父类exportdefaultclassBullet_Super{constructor(cantiner,SHOOT_FRAME=10,sprite_sheet){this.cantiner=cantiner;this.shoot_frame=SHOOT_FRAME;这个.list=[];this.deletelist=[];这个.y=0;这个.x=0;this.spriteSheet=newcreatejs.SpriteSheet(sprite_sheet);}outOfScreen(s,test){if(test){if(s.y>window.innerHe右+100||s.x>window.innerWidth+100||s.x<-100){this.deletelist.push(s);s.visible=false;返回假;}}返回真;}createSprite(anime,option,die_option){让isnew=true;让sprite=this.deletelist.length>0?(isnew=false,this.deletelist.shift()):newcreatejs.Sprite(this.spriteSheet,anime);sprite.isdie=false;sprite.dieing_frame=0;sprite.diecount=0;Object.assign(精灵,选项);精灵.die=精灵.die||(()=>{sprite.isdie=true;Object.assign(sprite,die_option);});!是新的?(sprite.visible=true,sprite.gotoAndPlay(anime)):this.cantiner.addChild(sprite);this.list.push(sprite);}update(timeFunc,dieFunc,diedFunc,test){this.list=this.list.filter((s)=>{如果(s.isdie){s.diecount++;dieFunc(s);如果(s.diecount>(s.dieing_frame)){diedFunc(s);this.deletelist.push(s);s.visible=false;返回假;}返回真;}timeFunc(s);returnthis.outOfScreen(s,测试);});.com/lichddd/we...B站演示https://www.bilibili.com/video...