打地鼠小游戏（Laya.box）

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-item8var 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=1this.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);
}}

打地鼠小游戏（Laya.box）相关推荐

打地鼠小游戏（HTML5+CSS+JS）
打地鼠小游戏(HTML5+CSS+JS) 文章目录打地鼠小游戏(HTML5+CSS+JS) 预设有两个文件(htlm和css)加一个文件夹(放图片) 设置基本界面 (1)背景图 (2)开始按钮 (3 ...
java 打地鼠源代码_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
敲地鼠java_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
java android 打地鼠_Android实现打地鼠小游戏
本文实例为大家分享了Android实现打地鼠小游戏的具体代码,供大家参考,具体内容如下实现结果代码实现 playmouse.java package com.example.playmouse; ...
如何用python制作五子棋游戏_Python制作打地鼠小游戏
原文链接 Python制作小游戏(二十一)mp.weixin.qq.com 效果展示打地鼠小游戏https://www.zhihu.com/video/1200492442610450432 简介 ...
【180730】WinForm打地鼠小游戏源码
本源码是采用WinForm进行开发的一个并非简单的打地鼠小游戏,有动画效果哈!有打地鼠.计分.过关等功能. 菜单功能: 1.运行游戏后,输入玩家姓名,点击开始 2.用鼠标点击从洞中钻出的地鼠给予打击 ...
android打地鼠设计报告,android开发中利用handler制作一个打地鼠小游戏
android开发中利用handler制作一个打地鼠小游戏发布时间:2020-11-25 15:21:11 来源:亿速云阅读:136 作者:Leah 这期内容当中小编将会给大家带来有关androi ...
linux打地鼠游戏代码,JavaScript实现打地鼠小游戏
一.实验说明 1. 环境介绍本实验环境采用Ubuntu Linux桌面环境,实验中会用到桌面上的程序: Xfce终端: Linux命令行终端,打开后会进入Bash环境,可以使用Linux命令 Fir ...
Python 和 PyQt5 实现打地鼠小游戏
Python 和 PyQt5 实现打地鼠小游戏实现效果: 视频效果: https://live.csdn.net/v/264602https://live.csdn.net/v/264602 代码: ...
matlab制作打地鼠游戏,Python制作打地鼠小游戏
原标题:Python制作打地鼠小游戏导语大家好,欢迎来到 Crossin的编程教室 ! 打地鼠游戏相信大家都知道,这里就不多介绍了,反正就是不停地拿锤子打洞里钻出来的地鼠呗~ 今天就给大家分享一个 ...

打地鼠小游戏（Laya.box）

打地鼠小游戏（Laya.box）相关推荐

最新文章

热门文章