vue3实现打飞机(雷电)

代码可直接运行直接玩,而且要自己加上一些随机事件都很简单了(例如发射速度变快,子弹变大,敌人变慢等)

html 复制代码
<template>
  <div class="flex items-center justify-center h-100vh w-full">
    <div>
      SCORE: {{ score }}
      <div class="box w-400 h-500 relative p-8" ref="box">
        <div
          class="tank-wrap absolute bottom-6"
          ref="tankWrap"
          :style="{ left: tankLeft + 'px' }"
        >
          <div class="tank" :style="{ width: tankWidth + 'px' }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
const box = ref();
const tankWidth = 40;
const tankWrap = ref();

/**
 * 左右方向键控制坦克
 */
const tankLeft = ref<number>(150);
function mousemove(e: MouseEvent) {
  const boxRect = box.value.getBoundingClientRect();
  if (!boxRect) return;
  const left = e.clientX - boxRect.left;

  if (left < 0) {
    tankLeft.value = 0;
  } else if (left > boxRect.width - tankWidth) {
    tankLeft.value = boxRect.width - tankWidth;
  } else {
    tankLeft.value = left;
  }
}
/**
 * 发射子弹
 */
function start() {
  const tankWrapRect = tankWrap.value.getBoundingClientRect();
  const boxRect = box.value.getBoundingClientRect();

  const bullet = document.createElement("div");
  bullet.className =
    "fixed top-0 left-0 w-6 h-6 bg-red-500 border-rd-50% bullet";
  // 加上一半的坦克宽度,再减去一半的自身宽度
  bullet.style.left = tankWrapRect.left + tankWidth / 2 - 3 + "px";
  bullet.style.top = tankWrapRect.top + "px";
  box.value.appendChild(bullet);
  let top = 0;

  const timer = setInterval(() => {
    top += 5;
    const result = tankWrapRect.top - top;
    bullet.style.top = result + "px";

    if (result < boxRect.top) {
      clearInterval(timer);
      bullet.remove();
    }
  }, 16);
}
const score = ref(0);
/**
 * 生成敌人
 */
const enemyCreator = () => {
  const boxRect = box.value.getBoundingClientRect();
  const enemy = document.createElement("div");
  //  宽度10-75px随机
  const enemyWidth = Math.floor(Math.random() * 66) + 10;
  const enemyHeight = Math.floor(Math.random() * 25) + 5;
  enemy.style.width = enemyWidth + "px";
  enemy.style.height = enemyHeight + "px";
  // 0% 到 50%随机
  enemy.style.borderRadius = Math.floor(Math.random() * 51) + "%";
  enemy.style.backgroundColor = `rgb(${Math.floor(
    Math.random() * 256
  )},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`;
  enemy.className = "fixed enemy";
  //boxRect.left 到 (boxRect.left + boxRect.width) 之间的随机数
  enemy.style.left =
    Math.floor(Math.random() * (boxRect.width - enemyWidth)) +
    boxRect.left +
    "px";
  enemy.style.top = boxRect.top + "px";
  box.value.appendChild(enemy);
  let top = 0;
  const speed = Math.floor(Math.random() * 7) + 2;
  let timer: any = setInterval(() => {
    top += speed;
    enemy.style.top = boxRect.top + top + "px";

    /**
     * 检测碰撞敌人
     */
    const enemies = document.querySelectorAll(".fixed.enemy");
    const bullets = document.querySelectorAll(".fixed.bullet");
    for (let i = 0; i < bullets.length; i++) {
      const bulletRect = bullets[i].getBoundingClientRect();
      if (
        bulletRect.left < enemy.getBoundingClientRect().right &&
        bulletRect.right > enemy.getBoundingClientRect().left &&
        bulletRect.top < enemy.getBoundingClientRect().bottom &&
        bulletRect.bottom > enemy.getBoundingClientRect().top
      ) {
        clearInterval(timer);
        score.value ++;
        bullets[i].remove();
        enemy.remove();
      }
    }

    if (enemy && boxRect.top + top + enemyHeight > boxRect.bottom) {
      alert("你已经输了");
      clearInterval(timer);
      window.location.reload();
    }
  }, 30);
};

let fireTimer: any = null;
let enemyTimer: any = null;
onMounted(() => {
  document.addEventListener("mousemove", mousemove);
  fireTimer = setInterval(() => {
    start();
  }, 260);
  enemyTimer = setInterval(() => {
    enemyCreator();
  }, 750);
});
const clear = () => {
  document.removeEventListener("mousemove", mousemove);
  clearInterval(fireTimer);
  clearInterval(enemyTimer);
};
onUnmounted(() => {
  clear();
});
</script>
<style>
.enemy {
  box-shadow: 0 2px 4px #0000006e;
}
</style>
<style lang="scss" scoped>
.box {
  border-radius: 4px;
  border: 1px solid #adadad;
  background: #ccc;
  overflow: hidden;
}
// tank-head-percentage
$t-h: 40%;
.tank-wrap {
  filter: drop-shadow(0 4px 2px #1c0099cc);
  .tank {
    height: 40px;
    border-radius: 8px;
    background-image: linear-gradient(90deg, #0b33b6 0%, #aaf2ff 100%);
    clip-path: polygon(
      0 58%,
      36% $t-h,
      36% 20%,
      50% 0%,
      64% 20%,
      64% $t-h,
      100% 58%,
      100% 100%,
      0 100%
    );
  }
}
</style>
相关推荐
顽疲3 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好35 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享37 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
Liudef067 小时前
儿童趣味记忆配对游戏
css·游戏·css3
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js