MoeNovaClient/pages/isLand/homeLand.vue

<template>
 <view class="home-land-container">
    <!-- 第三层：背景 -->
    <view class="background-layer"></view>
  
    <!-- 第二层：地图 -->
    <view class="map-layer" id="mapLayer" :style="{ transform: `translateX(${translateX}px)` }" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @mousedown="onmousedown" @mousemove="onmousemove" @mouseup="onmouseup">
      <image class="island-image" src="/static/island/island.png" mode="widthFix" style="width:1536rpx; bottom: 0rpx;left: 0rpx; position: absolute;"></image>
      <view style="position: absolute;width: 670rpx;left: 680rpx; bottom:430rpx;align-items: center;">
        <image class="house-image" src="/static/island/building/4.png" mode="widthFix" style="width:670rpx; position: static;" @click="onHouseClick" :animation="houseAnimationData">	</image>
      </view>

      <view style="position: absolute;width: 670rpx;left:180rpx; bottom:130rpx;align-items: center;">
        <image class="hall-image" src="/static/island/building/1.png" mode="widthFix" style="width:670rpx; position: static;" @click="onHallClick" :animation="hallAnimationData">	</image>
      </view>
    </view>
  
    <!-- 第一层：UI -->
    <view class="ui-layer">
      <view class="ui-content">
        <view class="ui-buttons">
          <button class="ui-button" @click="showInventory">背包</button>
          <button class="ui-button" @click="showCharacter">角色</button>
          <button class="ui-button" @click="showShop">商店</button>
        </view>
      </view>
    </view>

    <!-- 对话框组件 -->
    <inventory-dialog :visible.sync="inventoryVisible" @close="onInventoryClose"></inventory-dialog>
    <character-dialog :visible.sync="characterVisible" @close="onCharacterClose"></character-dialog>
    <shop-dialog :visible.sync="shopVisible" @close="onShopClose" @buy="onShopBuy"></shop-dialog>
  </view> 
</template>


<script>
import InventoryDialog from '@/components/dialogs/InventoryDialog.vue'
import CharacterDialog from '@/components/dialogs/CharacterDialog.vue'
import ShopDialog from '@/components/dialogs/ShopDialog.vue'

export default {
	components: {
		InventoryDialog,
		CharacterDialog,
		ShopDialog
	},
	data() {
		return {
			// 背景位置控制
			translateX: 0,
			startX: 0,
			currentX: 0,
			isDragging : false,
			
			// 获取屏幕宽度和背景宽度
			screenWidth: 0,
			backgroundWidth: 0,
			islandHeight: 0,
			houseAnimationData: {},
			hallAnimationData: {},
			houseAnimating: false,
			hallAnimating: false,
			baseTranslate: { x: -50, y: 50 },
			inventoryVisible: false,
			characterVisible: false,
			shopVisible: false,
		}
	},
	onLoad() {
		let self = this;
		// 获取屏幕宽度
		uni.getSystemInfo({
			success: (res) => {
				self.screenWidth = res.windowWidth;
				console.log('屏幕宽度:', self.screenWidth);
			}
		});
	},
	onShow() {
		// this.loadData();
	},
	onReady() {
		// 在组件渲染完成后获取图片尺寸
		setTimeout(() => {
			this.getImageSize();
		}, 300);
	},
	methods: {
		loadData() {
			// 可以在这里加载其他数据
		},
		getImageSize() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.island-image').boundingClientRect(data => {
				if (data) {
					// 获取岛屿图片的宽度和高度
					this.backgroundWidth = data.width;
					this.islandHeight = data.height;
					
					// 计算最大可移动距离
					this.maxTranslate = this.backgroundWidth - this.screenWidth;
					
					// 初始位置居中
					this.translateX = -this.maxTranslate / 2;
					
					// 打印调试信息
					console.log('屏幕宽度:', this.screenWidth);
					console.log('背景宽度:', this.backgroundWidth);
					console.log('岛屿高度:', this.islandHeight);
					console.log('最大可移动距离:',this.maxTranslate);
					
					console.log('岛屿data:', data);
					
				} else {
					console.error('未能获取岛屿图片的尺寸');
				}
			}).exec();
		},
		// 触摸开始
		touchStart(e) {
			this.startX = e.touches[0].clientX;
			this.currentX = this.translateX;
			console.log('this.startX =',this.startX);
			console.log('this.currentX =',this.currentX);
		},
		// 触摸移动
		touchMove(e) {
			console.log('----------- touchMove');
			const moveX = e.touches[0].clientX - this.startX;
			let newTranslateX = this.currentX + moveX;
			
			// 限制移动范围，不让背景两侧露出
			if (newTranslateX > 0) {
				newTranslateX = 0;
			} else if (newTranslateX < -this.maxTranslate) {
				newTranslateX = -this.maxTranslate;
			}
			
			this.translateX = newTranslateX;
			console.log('moveX =',moveX);
			console.log('this.translateX =',this.translateX);
		},
		// 触摸结束
		touchEnd() {
			console.log('----------- touchEnd');
			this.currentX = this.translateX;
			console.log('this.currentX =',this.currentX);
		},
		
		onmousedown(e) {
			console.log('----------- onmousedown');
			console.log('----------- e',e);
			this.isDragging = true;
			this.startX = e.clientX;
			this.currentX = this.translateX;
			mapLayer.style.cursor = 'grabbing';
		},
		
		onmousemove(e) {
			if(this.isDragging){
				console.log('----------- onmousemove');
				const moveX = e.clientX - this.startX;
				let newTranslateX = this.currentX + moveX;
				
				//限制移动范围，不让背景两侧露出
				if (newTranslateX > 0) {
					newTranslateX = 0;
				} else if (newTranslateX < -this.maxTranslate) {
					newTranslateX = -this.maxTranslate;
				}
				
				this.translateX = newTranslateX;
				console.log('moveX =',moveX);
				console.log('this.translateX =',this.translateX);
			}
		},
		
		onmouseup(e) {
			console.log('----------- onmouseup');
			this.isDragging = false;
			mapLayer.style.cursor = 'grab';
		},

		onHouseClick(event) {
			if(this.houseAnimating) return;
			// 处理点击事件
			console.log('House clicked!');
			
			// 播放房子的点击动画
			this.playAnimation('house');
			
			uni.showToast({
				title: 'House clicked!',
				icon: 'none'
			});
		},

		onHallClick(event) {
			if(this.hallAnimating) return;
			// 处理点击事件
			console.log('Hall clicked!');
			
			// 播放大厅的点击动画
			this.playAnimation('hall');
			
			uni.showToast({
				title: 'Hall clicked!',
				icon: 'none'
			});
		},

		playAnimation(type) {
			let self = this;
			
			// 根据类型设置对应的动画状态
			if (type === 'house') {
				this.houseAnimating = true;
			} else if (type === 'hall') {
				this.hallAnimating = true;
			}

			// 创建动画实例
			const animation = uni.createAnimation({
				duration: 400,
				timingFunction: 'ease',
			});

			// 定义果冻动画序列
			animation.scale(0.95).step({ duration: 100 })
					.scale(1.05).step({ duration: 100 })
					.scale(0.98).step({ duration: 100 })
					.scale(1).step({ duration: 100 });

			// 根据类型应用动画到对应的元素
			if (type === 'house') {
				this.houseAnimationData = animation.export();
			} else if (type === 'hall') {
				this.hallAnimationData = animation.export();
			}

			// 动画结束后重置状态
			setTimeout(() => {
				if (type === 'house') {
					self.houseAnimating = false;
				} else if (type === 'hall') {
					self.hallAnimating = false;
				}
			}, 800);
		},

		showInventory() {
			console.log('Opening inventory...')
			this.inventoryVisible = true
		},
		onInventoryClose() {
			console.log('Closing inventory...')
			this.inventoryVisible = false
		},
		showCharacter() {
			console.log('Opening character...')
			this.characterVisible = true
		},
		onCharacterClose() {
			console.log('Closing character...')
			this.characterVisible = false
		},
		showShop() {
			console.log('Opening shop...')
			this.shopVisible = true
		},
		onShopClose() {
			console.log('Closing shop...')
			this.shopVisible = false
		},
		onShopBuy(item) {
			console.log('Buying item:', item)
		}
	}
}
</script>


<style lang="scss" scoped>
@import './homeLand.scss';
.ui-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;

  .ui-content {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    pointer-events: auto;
    z-index: 101;
  }

  .ui-buttons {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .ui-button {
      background: rgba(255, 255, 255, 0.9);
      border: none;
      padding: 16rpx 32rpx;
      border-radius: 8rpx;
      font-size: 28rpx;
      color: #333;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      min-width: 120rpx;
      
      &:active {
        opacity: 0.8;
        transform: scale(0.95);
      }
    }
  }
}

.map-layer {
  position: relative;
  z-index: 1;
  cursor: grab;
  
  &:active {
    cursor: grabbing;
  }
}
</style>