1、创建项目并资源导入
2、制作打地鼠界面UI （Game.UI）
3、加载资源并显示打地鼠界面。（Main.ts主程序） Main.ts 主程序（游戏入口） 图集打包：
var resArray: Array<any> = [ { url: "res/atlas/gamestart/gamestart.json", type: Laya.Loader.ATLAS }, { url: "res/atlas/gameview/gameview.json", type: Laya.Loader.ATLAS }, { url: "res/atlas/gameover/gameover.json", type: Laya.Loader.ATLAS }, { url: "res/atlas/hammer/hammer.json", type: Laya.Loader.ATLAS }, ];4、地鼠的显示、停留、消失、受击、重置。 Mole.ts(地鼠类) //重置
reset(): void { this.normalState.visible = false; this.hitState.visible = false; this.scoreimg.visible = false; this.isActive = false; this.isShow = false; this.isHit = false; }//显示
show():void{ if(this.isActive)return; //判断小鼠是否处于运动，运动就直接返回 //缓动函数 （（当前对象，{移动位置}，移动时间，移动方法，回调函数）） Laya.Ease.backOut开始朝目标移动，稍微过冲一些，然后再反转回来朝着目标 Laya.Tween.to(this.normalState,{y:this.upY},500,Laya.Ease.backOut,Laya.Handler.create(this,this.showComplete)) }//停留
showComplete():void{ //显示停留状态且不处于受击状态 if(this.isShow && !this.isHit){ //定时执行一次。 （停留时间，使用者，跳转至下一步方法） Laya.timer.once(2000,this,this.hide); } }//消失
hide():void{ //是否处于停留或不受击状态 if(this.isShow && !this.isHit){ this.isShow = false; //缓动函数 Laya.Ease.backIn 开始往后运动，然后反向朝目标移动 Laya.Tween.to(this.normalState,{y:this.downY},300,Laya.Ease.backIn,Laya.Handler.create(this,this.reset)); }}//受击
hit():void{ if(this.isShow && !this.isHit){ this.isHit = true; this.isShow = false; //清除 消失状态 Laya.timer.clear(this,this.hide); this.normalState.visible = false; this.hitState.visible = true; //一次执行器， 停留时间500ms，所在类，重置当前状态 Laya.timer.once(500,this,this.reset); } }}5、编辑UI界面，给每个树洞添加地鼠 1）创建地鼠的box容器，利用重复复制每个树洞中。 2）在GameView类中创建地鼠数组、更换前置遮挡图、将地鼠的状态传入Mole类。
this.moles = new Array<Mole>(); for (var i: number = 0; i < this.moleNum; i++) { //定义box对象， 得到Gameui中的item0-item8 var box: ui.MoleUI = this["item" + i]; //更换地鼠前遮挡图（草grass），更换skin图片来实现。 box.grass.skin = "ui/mask-0" + (i + 1) + ".png"; //实例化Mole类，传入地鼠的常态图、受击图、最低点 var mole: Mole = new Mole(box.normal, box.hit, 70); //得到所有地鼠的数组 moles[] this.moles.push(mole); } //每1s运行执行一次onloop方法 Laya.timer.loop(1000, this, this.onLoop);6、随机从某个树洞中出现地鼠
onLoop(): void { /** Math.random() 返回介于 0（包含） ~ 1（不包含） 之间的一个随机数： Math.floor（x）不大于x的最大整数 */ // 实现index从0-8中随机取数 var index: number = Math.floor(Math.random() * this.moleNum); // 调用Mole中的show方法，实现随机地鼠的出现 this.moles[index].show();7、随机出现不同类型的地鼠 方法：更改地鼠的skin。（通过随机数，取得不同类型的地鼠）
//type：number 地鼠的类型 this.type = Math.random()<0.3? 1:2; //随机数小于0.3时，this.type=1 this.normalState.skin = "图片地址"+this.type+".png"; this.hitState.skin = "图片地址"+this.type+".png";8、实现游戏倒计时。 1)设置ui界面。进度条是由两张图片合成。内部图命名：末尾+$bar。 value实现内部图片的变化，1为初始满格状态。（左图） 2）loop函数，每s执行一次。
//每1s运行执行一次onloop方法 Laya.timer.loop(1000, this, this.onLoop); } onLoop(): void { this.timeBar.value -= (1 / 90); if (this.timeBar.value <= 0) { this.gameOver(); return; } gameOver(): void { //清除时间管理器 Laya.timer.clear(this, this.onLoop); this.hammer.visible = false; this.hammer.end(); console.log("游戏结束！！"); }9、显示游戏得分，游戏飘字。 1）通过取余的方式调整得分ui显示。
updatescoreUI(): void { var data: any = {}; var temp: number = this.score; for (var i: number = 9; i >= 0; i--) { data["item" + i] = { index: Math.floor(temp % 10) }; temp /= 10; } //组件赋值 this.scoreNums.dataSource = data; } //组件赋值格式举例 // this.scoreNums.dataSource ={item0:{index:5},item1:{index:9}};2）通过tween，to函数实现飘字的出现；通过缩放实现飘字的变大
//显示飘字 showScore(): void { //初始不显示，受击后显示图片 this.scoreimg.visible = true; this.scoreimg.y = this.scoreY + 50; //缩放原点0，0，向x，y方向进行缩放。 this.scoreimg.scale(0, 0); Laya.Tween.to(this.scoreimg, { y: this.scoreY, scaleX: 1, scaleY: 1 }, 500, Laya.Ease.backOut); }10、小锤子的添加。 1）UI界面设置： ①将坐标原点设置在锤子柄中间部位。 ②通过rotation设置旋转20°、-20° ③通过动画编辑实现锤子摆动。 ④建立Hammer锤子类，继承ui.hammerUI.
//开始使用 start(): void { Laya.Mouse.hide(); Laya.stage.on(Laya.Event.MOUSE_DOWN, this, this.onMouseDown); Laya.stage.on(Laya.Event.MOUSE_MOVE, this, this.onMouseMove); } //结束使用 end(): void { Laya.Mouse.show(); Laya.stage.off(Laya.Event.MOUSE_DOWN, this, this.onMouseDown); Laya.stage.off(Laya.Event.MOUSE_MOVE, this, this.onMouseMove); } onMouseDown(): void { //播放锤子动画 this.hit.play(0, false); } onMouseMove(): void { this.pos(Laya.stage.mouseX - this.width / 2, Laya.stage.mouseY - this.height / 3); }}