<template><view class="index"><div @keydown="onKeyDown" tabindex="0" ref="container"><view class="SXZY" :style="styleObject"></view><view class="content_For" v-for="(item, index) in items" :key="index":style="{ left: item.left + 'rpx', top: item.top + 'rpx' }"><image src="../../static/ex1.png" style="width: 100%;height: 100%;"></image></view><div>计数: {{ count }}</div> <!-- 显示计数 --></div></view>
</template><script>export default {data() {return {items: [],count: 0,left: 0,top: 0,moveStep: 10, // 每次移动的步长 styleObject: {left: this.left + 'rpx',top: this.top + 'rpx',position: 'absolute',},};},mounted() {this.generateRandomPositions(20); // 根据需要生成 20 个随机位置 window.addEventListener('keydown', this.onKeyDown);},beforeDestroy() {window.removeEventListener('keydown', this.onKeyDown);},methods: {generateRandomPositions(count) {const positions = new Set();while (positions.size < count) {const left = Math.floor(Math.random() * (2500 - 100)); // 假设容器宽2500rpx const top = Math.floor(Math.random() * (2000 - 100)); // 假设容器高2000rpx const positionKey = `${left},${top}`;if (!positions.has(positionKey)) {positions.add(positionKey);this.items.push({left,top});}}},onKeyDown(event) {// 处理键盘按下事件，移动 SXZY switch (event.keyCode) {case 38: // 上箭头 this.top = Math.max(0, this.top - this.moveStep);break;case 40: // 下箭头 this.top = Math.min(2000 - 50, this.top + this.moveStep); // 假设容器高度限制 break;case 37: // 左箭头 this.left = Math.max(0, this.left - this.moveStep);break;case 39: // 右箭头 this.left = Math.min(2500 - 50, this.left + this.moveStep); // 假设容器宽度限制 break;}this.styleObject = {left: this.left + 'rpx',top: this.top + 'rpx',position: 'absolute',};this.checkCollision();},checkCollision() {// 检测 SXZY 是否与 content_For 碰撞 this.items.forEach((item, index) => {if (this.left < item.left + 50 && // SXZY 右边界大于 content_For 左边界 this.left + 50 > item.left && // SXZY 左边界小于 content_For 右边界 this.top < item.top + 50 && // SXZY 下边界大于 content_For 上边界 this.top + 50 > item.top // SXZY 上边界小于 content_For 下边界 ) {// 碰撞发生，移除此 content_For this.items.splice(index, 1);this.count += 1; // 计数器加1 }});},},};
</script><style>.index{width: 100vw;height: 100vh;background: paleturquoise;position: relative;overflow: hidden;}.SXZY {width: 100rpx;height: 100rpx;position: absolute;/* background: blue; */border-radius: 10rpx;background-image: url('../../static/copy.png');background-size: 100% 100%;}.content_For {width: 70rpx;height: 70rpx;/* background: red; */border-radius: 50%;position: absolute;z-index: 8;}
</style>
