Egret學習之路-拖動瓶子（2）
皮膚完成，現在繼續。
在src目錄下創建 Game.ts (對應GameSceneSkin)
class Game extends eui.Component{
public constructor() {
super()
this.skinName = GameScene
}
}
打開Main.ts
/**
* 創建場景界面
* Create scene interface
*/
protected createGameScene(): void {
this.addChild(new Game())
}
現在按下f5，就可以看到遊戲場景了
現在讓履帶動起來
class Game extends eui.Component{
public bg1:eui.Image;
public bg2:eui.Image;
public bottleGroup:eui.Group;
/**運行速度 */
private speed: number
public constructor() {
super()
this.skinName = GameScene
this.speed = 10
this.addEventListener(egret.Event.ENTER_FRAME, this.rollBg, this)
}
/** 背景滾動 */
private rollBg() {
this.bg1.y += this.speed
if(this.bg1.y >= this.height) {
this.bg1.y = - this.bg1.height + (this.height - this.bg1.height)
}
this.bg2.y += this.speed
if(this.bg2.y >= this.height) {
this.bg2.y = - this.bg2.height + (this.height - this.bg2.height)
}
}
}
這裡遇到一個坑，因為使用可視化編輯的時候x和y的值不精確，所以滾動出現了空白的一小塊，解決方案是回到皮膚裡面，把兩張背景圖的x和y值手動設置
現在f5運行，就可以看到正常的背景滾動
創建瓶子
創建一個Bottles.ts類，因為瓶子一共就6個，所以可以使用枚舉（第一個是None，我也不太清楚是為什麼要這樣做，但是大佬是這樣說的，應該有一個沒有狀態的狀態霧）
enum bottleType{
None, bottle1, bottle2, bottle3, bottle4, bottle5, bottle6
}
/** 瓶子類 */
class Bottles extends eui.Image {
public constructor(type: bottleType) {
super()
this.source = RES.getRes(`${bottleType[type]}_png`)
}
}
給bottleGroup
// 監聽幀事件,創建瓶子,並向下移動
this.bottleGroup.addEventListener(egret.Event.ENTER_FRAME, this.creatBottle, this)
this.timeOnEnterFrame = egret.getTimer()
creatBottle
/**創建瓶子 */
private creatBottle() {
var now = egret.getTimer()
var pass = (now - this.timeOnEnterFrame) / 1000
this.timeOnEnterFrame = egret.getTimer()
this.timeCount += pass
// 把每一幀消耗的時間累加到this.timeCount,如果超過1s,就創建一個瓶子,並歸零,重新開始計算
if (this.timeCount >= 1) {
this.timeCount = 0
var type = Math.floor(Math.random() * 6 + 1)
var bottle:Bottles = new Bottles(type)
bottle.x = Math.random() * this.bottleGroup.width
this.bottleGroup.addChild(bottle)
}
for(var i = this.bottleGroup.numChildren - 1; i >= 0; i--) {
var item = <Bottles>this.bottleGroup.getChildAt(i)
item.y += this.speed
if (item.y >= this.height) {
this.bottleGroup.removeChild(item)
}
}
}
按f5，就能看到間隔一秒生成一個瓶子，並且向下移動
有了瓶子，但是現在只能看著，並不能操作它們
瓶子非常的多，如果給它們每個都添加觸摸事件就太蠢了，只要在this添加觸摸事件就可以了
循環遍歷一遍bottleGroup裡面的瓶子，如果觸摸的點和某個瓶子碰撞，表示觸摸的就是這個瓶子
先去Bottles.ts類裡面添加一個介面，用來設置是否被點擊，被點擊的時候阿爾法值改變
/**是否被選中 */
private _isSelect : boolean;
public get isSelect() : boolean {
return this._isSelect;
}
public set isSelect(v : boolean) {
this._isSelect = v;
if(v) {
this.alpha = 0.5
} else {
this.alpha = 1
}
}
回到Main.ts 添加觸摸事件
public constructor() {
super()
this.skinName = GameScene
this.speed = 5
// 監聽幀事件,滾動背景圖片
this.addEventListener(egret.Event.ENTER_FRAME, this.rollBg, this)
// 監聽幀事件,創建瓶子,並向下移動
this.bottleGroup.addEventListener(egret.Event.ENTER_FRAME, this.creatBottle, this)
this.timeOnEnterFrame = egret.getTimer()
// 添加觸摸事件,
this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.touchBegin, this)
this.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.touchMove, this)
this.addEventListener(egret.TouchEvent.TOUCH_END, this.touchEnd, this)
}
/**手指觸摸的瓶子 */
private touchBottle: Bottles
/**用來顯示移動過程的瓶子 */
private showBottle: Bottles
/**觸摸開始 */
private touchBegin(e: egret.TouchEvent) {
for(var i = this.bottleGroup.numChildren - 1; i >= 0; i--) {
var item: Bottles = <Bottles>this.bottleGroup.getChildAt(i)
if(item.hitTestPoint(e.stageX, e.stageY)) {
item.isSelect = true
// 賦值給手指觸摸的瓶子
this.touchBottle = item
}
}
}
/**觸摸移動過程中 */
private touchMove(e: egret.TouchEvent) {
}
/**觸摸結束 */
private touchEnd(e: egret.TouchEvent) {
// 如果手指觸摸的瓶子存在, 說明手指觸摸到了某個瓶子
if(this.touchBottle) {
this.touchBottle.isSelect = false
}
}
f5運行，滑鼠點擊的時候半透明，鬆開的時候恢復
繼續！完成觸摸移動過程
思路是觸摸到某個瓶子之後，觸摸的那個瓶子變成半透明，這時出現一個用來顯示移動過程的瓶子跟著手指的觸摸點移動
這個moveBottle顯示的時候，應該和手指觸摸選中的那個瓶子完全一樣，為了效果更棒所以讓這個瓶子變大，這需要去改造一下Bottles.ts類，讓它能獲取到瓶子的類型
Bottles.ts
/** 瓶子類 */
class Bottles extends eui.Image {
public constructor(type: bottleType) {
super()
this.type = type
}
/**瓶子的種類 */
private _type : number;
public get type() : number {
return this._type;
}
public set type(v : number) {
this._type = v;
this.source = RES.getRes(`${bottleType[v]}_png`)
}
/**是否被選中 */
private _isSelect : boolean;
public get isSelect() : boolean {
return this._isSelect;
}
public set isSelect(v : boolean) {
this._isSelect = v;
if(v) {
this.alpha = 0.5
} else {
this.alpha = 1
}
}
}
現在只要調用這個type屬性就可以知道瓶子的種類
Game.ts
public constructor() {
super()
this.skinName = GameScene
this.speed = 5
// 監聽幀事件,滾動背景圖片
this.addEventListener(egret.Event.ENTER_FRAME, this.rollBg, this)
// 監聽幀事件,創建瓶子,並向下移動
this.bottleGroup.addEventListener(egret.Event.ENTER_FRAME, this.creatBottle, this)
this.timeOnEnterFrame = egret.getTimer()
// 添加觸摸事件,
this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.touchBegin, this)
this.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.touchMove, this)
this.addEventListener(egret.TouchEvent.TOUCH_END, this.touchEnd, this)
// 創建一個用來顯示移動過程的瓶子, 先隱藏
this.showBottle = new Bottles(1)
this.showBottle.anchorOffsetX = 25 / 2
this.showBottle.anchorOffsetY = 90 / 2
console.log(this.showBottle.anchorOffsetX, this.showBottle.anchorOffsetY)
this.showBottle.scaleX = 2
this.showBottle.scaleY = 2
this.showBottle.visible = false
this.addChild(this.showBottle)
}
預先創建好這個用來顯示的瓶子，隱藏好
現在完善那三個事件
/**觸摸開始 */
private touchBegin(e: egret.TouchEvent) {
for(var i = this.bottleGroup.numChildren - 1; i >= 0; i--) {
var item: Bottles = <Bottles>this.bottleGroup.getChildAt(i)
if(item.hitTestPoint(e.stageX, e.stageY)) {
item.isSelect = true
// 賦值給手指觸摸的瓶子
this.touchBottle = item
this.showBottle.type = this.touchBottle.type
this.showBottle.visible = true
}
}
}
/**觸摸移動過程中 */
private touchMove(e: egret.TouchEvent) {
if(this.touchBottle) {
this.showBottle.x = e.stageX
this.showBottle.y = e.stageY
}
}
/**觸摸結束 */
private touchEnd(e: egret.TouchEvent) {
// 如果手指觸摸的瓶子存在, 說明手指觸摸到了某個瓶子
if(this.touchBottle) {
this.touchBottle.isSelect = false
this.showBottle.visible = false
}
}
f5，
啦啦啦啦啦啦可以看到效果完成~
推薦閱讀：
