vue中多个小球运动 碰撞之后弹开效果

最新推荐文章于 2024-08-16 19:02:09 发布
最新推荐文章于 2024-08-16 19:02:09 发布
阅读量538 收藏 9
点赞数 5
文章标签： javascript echarts vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50572526/article/details/135995490
版权 
<template>

  <div class="about">

    <div class="chart" ref="main">

      <div class="circle1 circle" ref="circle2">

        <span>球1<br /><span style="top: 20px;position: relative;">30分</span></span>
      </div>

      <div class="circle2  circle" ref="circle2">

        <span>球2<br /><span style="top: 20px;position: relative;">20分</span></span>

      </div>

      <div class="circle3 circle" ref="circle3">

        <span>球3<br /><span style="top: 20px;position: relative;margin-left: 1.5rem">25分</span></span>
      </div>

      <div class="circle4  circle" ref="circle4">

        <span>球4<br /><span style="top: 20px;position: relative;margin-left: 2.5rem">10分</span></span>
      </div>
      <div class="circle5  circle" ref="circle5">
        <span>球5<br /><span style="top: 20px;position: relative;margin-left: 2rem">14分</span></span>

      </div>

    </div>

  </div>

</template>



<script>

export default {

  data() {

    return {

      main: "",

      //获取五个小球的div

      circlesL: "",

      //用来存放小球div每个的具体信息，包括坐标，速度等值

      container: [],

      arr: {},

      //初始化运动的最大宽高，初始定义为0

      maxW: [],

      maxH: [],

      //获取小球的直径

      cwidth: [],

    };

  },
  mounted() {

    this.main = this.$refs.main;

    this.circles = this.main.getElementsByClassName('circle');

    // 为了让小球不卡在盒子边缘，所以要减去自身宽高

    for (let index = 0; index < this.circles.length; index++) {

      this.maxW.push(this.main.offsetWidth - this.circles[index].clientWidth);

      this.maxH.push(this.main.offsetHeight - this.circles[index].clientHeight);

      this.cwidth.push(this.circles[index].offsetWidth);

    }

    this.initializeCircle();

    // 对每一个小球绑定计时器，让小球动起来

    for (let i = 0; i < this.container.length; i++) {

      this.cricleMove(this.container[i]);

    }

  },

  methods: {

    //初始化球体信息

    initializeCircle() {

      // 数组对象初始化

      for (let i = 0; i < this.circles.length; i++) {

        this.arr = {};

        // 初始x坐标

        this.arr.x = Math.floor(Math.random() * (this.maxW[i] + 3));

        // 初始y坐标

        this.arr.y = Math.floor(Math.random() * (this.maxH[i] + 5));

        // 圆心x坐标

        this.arr.cx = this.arr.x + this.circles[i].offsetWidth / 2;

        // 圆心y坐标

        this.arr.cy = this.arr.y + this.circles[i].offsetHeight / 2;

        // x轴移动方向

        this.arr.movex = Math.floor(Math.random() * 3);

        // y轴移动方向

        this.arr.movey = Math.floor(Math.random() * 3);

        // 随机速度

        this.arr.speed = 1 + Math.floor(Math.random() * 2);

        // 计数器

        this.arr.timer = null;

        // 索引值

        this.arr.index = i;

        // 存放所有属性值

        this.container.push(this.arr);

        // 初始化小球位置

        this.circles[i].style.left = `${this.arr.x}px`;

        this.circles[i].style.top = `${this.arr.y}px`;

      }

    },

    // 球体碰撞函数

    circleCrash(index) {

      const currentBall = this.container[index];

      for (let i = 0; i < this.container.length; i++) {

        if (i !== index) {

          const otherBall = this.container[i];

          // 计算两个球心的距离

          const dx = otherBall.cx - currentBall.cx;

          const dy = otherBall.cy - currentBall.cy;

          const distance = Math.sqrt(dx * dx + dy * dy);



          // 碰撞阈值，这里应该是两个球的半径之和

          const collisionThreshold = (this.cwidth[currentBall.index] / 2) + (this.cwidth[otherBall.index] / 2);



          if (distance < collisionThreshold) {

            // 简单的互斥逻辑，像弹簧一样把球推开

            // 计算重合部分的长度

            const overlap = collisionThreshold - distance;



            // 计算互斥方向上的单位向量

            const unitX = dx / distance;

            const unitY = dy / distance;



            // 将球体移开使其不重叠

            // 移动当前球

            currentBall.x -= overlap * unitX * 0.5;

            currentBall.y -= overlap * unitY * 0.5;



            // 同时移动另一个球

            otherBall.x += overlap * unitX * 0.5;

            otherBall.y += overlap * unitY * 0.5;



            // 更新球的圆心位置

            currentBall.cx = currentBall.x + this.cwidth[currentBall.index] / 2;

            currentBall.cy = currentBall.y + this.cwidth[currentBall.index] / 2;

            otherBall.cx = otherBall.x + this.cwidth[otherBall.index] / 2;

            otherBall.cy = otherBall.y + this.cwidth[otherBall.index] / 2;



            // 简单地反转当前球的运动方向来模拟碰撞的响应

            currentBall.movex = -unitX > 0 ? 1 : 0;

            currentBall.movey = -unitY > 0 ? 1 : 0;



            // 反转另一个球的运动方向

            otherBall.movex = unitX > 0 ? 1 : 0;

            otherBall.movey = unitY > 0 ? 1 : 0;

          }

        }

      }

    },

    //球体移动函数

    cricleMove(balls) {

      // 每个球都有单独的定时器

      balls.timer = setInterval(() => {

        if (balls.movex === 1) {

          // 如果向右跑，则一直加速度，碰到边界，改为反方向运动

          balls.x += balls.speed;

          if (balls.x + balls.speed >= this.maxW[balls.index]) {

            // 防止小球移动出界限

            balls.x = this.maxW[balls.index];

            balls.movex = 0;

          }

        } else {

          balls.x -= balls.speed;

          if (balls.x - balls.speed <= 0) {

            balls.x = 0;

            balls.movex = 1;

          }

        }

        if (balls.movey === 1) {

          balls.y += balls.speed;

          if (balls.y + balls.speed >= this.maxH[balls.index]) {

            balls.y = this.maxH[balls.index];

            balls.movey = 0;

          }

        } else {

          balls.y -= balls.speed;

          if (balls.y - balls.speed <= 0) {

            balls.y = 0;

            balls.movey = 1;

          }

        }

        balls.cx = balls.x + this.circles[0].offsetWidth / 2; // 小球圆心等于：运动中x的值加上自身的半径

        balls.cy = balls.y + this.circles[0].offsetHeight / 2;

        this.circles[balls.index].style.left = balls.x + 'px'; // 小球相对于屏幕的位置

        this.circles[balls.index].style.top = balls.y + 'px';

        this.circleCrash(balls.index); // 每个小球进行碰撞检测

      }, 25);

    }



  }

};

</script>

<style lang="scss" scoped>

@mixin lineHeight($height) {

  height: $height;

  line-height: $height;

}



.about {

  .chart {

    height: 50rem;

    margin: 0 auto;

    // border: 0.1rem solid rgba(6, 143, 106, 1);

    position: relative;



    .font_style {

      text-align: center;

      color: #FFFFFF;

      font-size: 1.3rem;

    }



    .circle1 {

      position: absolute;

      top: 1rem;

      left: 5rem;

      width: 12rem;

      height: 12rem;

      // @include lineHeight(12rem);

      border-radius: 50%;

      box-shadow: inset 0px 0px 2rem 0.3rem #8F8915;

      font-size: 1.5rem;

      // text-align: center;

      align-items: center;

      display: flex;

      justify-content: center;

      flex-direction: row;

      // display: flex;

    }



    .circle2 {

      position: absolute;

      top: 16rem;

      left: 10rem;

      width: 10rem;

      height: 10rem;

      // @include lineHeight(10rem);

      border-radius: 50%;

      box-shadow: inset 0px 0px 3.3rem 1.1rem #14C424;

      font-size: 1.1rem;

      align-items: center;

      display: flex;

      justify-content: center;

      flex-direction: row;



    }



    .circle3 {

      position: absolute;

      top: 28rem;

      left: 15rem;

      width: 8rem;

      height: 8rem;

      // @include lineHeight(8rem);

      border-radius: 50%;

      box-shadow: inset 0px 0px 4rem 1.1rem #0C5EB9;

      font-size: 1rem;



      align-items: center;

      display: flex;

      justify-content: center;

      flex-direction: row;

    }



    .circle4 {

      position: absolute;

      top: 25rem;

      left: 2rem;

      width: 10rem;

      height: 10rem;

      border-radius: 50%;

      box-shadow: inset 0px 0px 4rem 1.1rem #5C15BD;

      font-size: 1.3rem;



      align-items: center;

      display: flex;

      justify-content: center;

      flex-direction: row;

    }



    .circle5 {

      position: absolute;

      top: 38rem;

      left: 5rem;

      width: 8rem;

      height: 8rem;

      // @include lineHeight(8rem);

      border-radius: 50%;

      box-shadow: inset 0rem 0rem 4rem 1.1rem #256BD1;

      font-size: 1rem;



      align-items: center;

      display: flex;

      justify-content: center;

      flex-direction: row;

    }

  }

}</style>

weixin_50572526
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-案例:钩子函数实现小球半场动画（购物车）
shijiaolong0的博客
02-20 330
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="lib/bootstrap
vue实现多个小球碰撞反弹效果
唯爱赞多的博客
06-27 892
实现多个小球碰撞反弹效果
实现小球碰撞动画
韭菜的故事
03-20 195
前言 小球碰撞的动画效果早在17年做一个大屏项目的时候就用过，最近的项目又有这个需求，于是乎把这个过程总结一下，省得以后又从网上找。 常规方案思路梳理 网上的做法大部分都是循环创建一堆dom元素，然后使用随机数设置起点坐标，给小球以x,y方向的初始速度，然后在运动到边界的时候进行判断并转向，还可以判断小球之间是否发生碰撞，最后设置定时器使小球不间断的运动(改变css属性)。 基于vue的代码实现(...
JS彩色气泡移动碰撞特效特效代码
03-20
JS彩色气泡移动碰撞特效是一款基于VUE.JS实现的全屏彩色透明气泡浮动碰撞特效。
vue学习04——小球移动
m0_73890688的博客
09-24 329
5.小球移动代码块，采用节点移动跟随对样式进行修改，x_speed为移动速度。用if来控制小球，使其不会跑出框外，用random随机数更改颜色。鼠标悬停在上面时触发 box:hover。// 时间循环方法 1秒=1000毫秒。// 时间循环方法 1秒=1000毫秒。// 根据id获取元素，拿到处理对象。// 根据id获取元素，拿到处理对象。// 拿到要处理的对象。// 获取对象的宽高。// 获取对象的宽高。// 对样式进行修改。// 获取对象的宽高。
Vue3 移动端 的小球碰撞、标数
weixin_68903201的博客
09-13 455
脚手架 中 注：不是原创。Vue3 移动端 的小球碰撞、标数
VUE+Canvas 实现桌面弹球消砖块小游戏
denglouhen的博客
04-07 6205
大家都玩过弹球消砖块游戏，左右键控制最底端的一个小木板平移，接住掉落的小球，将球弹起后消除画面上方的一堆砖块。 那么用VUE+Canvas如何来实现呢？实现思路很简单，首先来拆分一下要画在画布上的内容： （1）用键盘左右按键控制平移的木板； （2）在画布内四处弹跳的小球； （3）固定在画面上方，并且被球碰撞后就消失的一堆砖块。 将上述三种对象，用requestAnimationFrame()函数平移运动起来，再结合各种碰撞检查，就可以得到最终的结果。 先看看最终的效果： 一、左右平移的木板
vue中实现弹出层动画效果的示例代码
10-14
在Vue.js中，实现弹出层的动画效果可以利用Vue的内置组件`<transition>`，它提供了方便的方式来定义进入和离开的过渡效果。本示例将详细解释如何创建一个从上到下渐显的弹出层动画。 首先，我们需要在模板中使用`...
vue实现多个元素或多个组件之间动画效果
10-17
在Vue.js中，实现多个元素或多个组件之间的动画效果是一个重要的功能，这使得用户界面更加生动和吸引人。本文将详细讲解如何在Vue中实现这一目标。 首先，我们来看多个元素的过渡。Vue中，我们可以使用`...
vue框架制作购物车小球动画效果实例代码
10-16
在Vue框架中制作购物车小球动画效果是一个有趣且实用的前端技巧，它可以提升用户体验，尤其是在电子商务网站中。本文将详细介绍如何使用Vue实现这个动画效果，并解决在不同分辨率设备上保持一致性的挑战。 首先，...
JS原生实现多个小球跟着鼠标移动.html
05-19
JS原生实现多个小球跟着鼠标移动
完美解决vue 中多个echarts图表自适应的问题
12-28
看代码吧~ 　<IEcharts option=bar ref=echarts></IEcharts> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this；... self.$refs.echarts.resize()
Vue 实现简易多行滚动"弹幕"效果
10-15
在本示例中，我们将探讨如何使用Vue来实现一个简易的多行滚动“弹幕”效果。弹幕效果常见于视频网站，用户可以发送文本或图片信息，这些信息会在屏幕中从一侧滚动到另一侧。 首先，我们看到模板部分包含两个主要的...
VUE+WebPack游戏设计：实现碰撞检测和动画精灵
tyler_download的专栏
09-08 1893
实现碰撞检测和精灵动画
vue 小球动画，这玩意非常考验css
天天的博客
08-15 816
网上非常多的案列，在这里我就抄过来，能用基本就达到目的了 CartAnim.vue ，直接就是这个组件，我都复制好了 <template> <div class="ball-container"> <transition-group name="drop" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter
vue实现气泡运动撞击效果
weixin_39150852的博客
03-29 2899
封装组件 <template> <ul id="main"> <li v-for="(item, index) in circleData" :key="index" :class="{'active': item.is_latest_sign_user}"> <div> <span>{{ item.nick_name }}</span> <span>签到</sp
canvas 小球碰撞
石头的专栏
06-17 760
试着用面向对象的方式用canvas去实现一些东西， 主要代码 function Bubble() {}; //构造函数 Bubble.prototype = { init: function () { //基本配置 this.x = random(0, w); //小球x轴初始位置 this.y = random(0...
canvas系列教程06 ——边界检测、碰撞检测
朝阳39的博客
04-25 2954
边界检测 边界检测，即检测一个物体所处“运动环境的范围”（也就是边界）。 边界限制（避免越界） if (ball.x < ball.radius) { //小球"碰到"左边界时做什么 } else if (ball.x > cnv.width - ball.radius) { //小球"碰到"右边界时做什么 } if (ball.y < ball.radius) { //小球"碰到"上边界时做什么 } else if (ball.y > cnv.height.
微信小程序骨架屏
最新发布
djjdjdjdjddjjdjd的博客
08-16 410
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
多个小球碰撞用vue实现
06-07
在 Vue 中实现多个小球的碰撞，可以按照以下步骤进行： 1. 创建一个 Ball 组件，用于显示单个小球的界面。这个组件需要包含小球的位置、速度等信息，并且需要实现小球的移动和碰撞检测等功能。 ``` <template> <div :style="{ left: x + 'px', top: y + 'px' }"></div> </template> <script> export default { props: { x: Number, y: Number, speedX: Number, speedY: Number, radius: Number, color: String, bounds: Object }, data() { return { timerId: null } }, created() { this.timerId = setInterval(this.move, 10); }, methods: { move() { let x = this.x + this.speedX; let y = this.y + this.speedY; if (x - this.radius < this.bounds.left || x + this.radius > this.bounds.right) { this.speedX = -this.speedX; } if (y - this.radius < this.bounds.top || y + this.radius > this.bounds.bottom) { this.speedY = -this.speedY; } this.$emit('update:x', x); this.$emit('update:y', y); } } } </script> <style> div { position: absolute; width: 20px; height: 20px; border-radius: 50%; } </style> ``` 2. 在父组件中，创建多个 Ball 组件，并为每个组件设置不同的位置、速度等信息。同时，还需要为每个组件设置边框信息，用于碰撞检测。 ``` <template> <div ref="container" style="position: relative; width: 400px; height: 400px; border: 1px solid black;"> <Ball v-for="(ball, index) in balls" :key="index" :x.sync="ball.x" :y.sync="ball.y" :speedX="ball.speedX" :speedY="ball.speedY" :radius="ball.radius" :color="ball.color" :bounds="bounds" /> </div> </template> <script> import Ball from './Ball.vue'; export default { components: { Ball }, data() { return { balls: [ { x: 50, y: 50, speedX: 5, speedY: 3, radius: 10, color: 'red' }, { x: 100, y: 100, speedX: -3, speedY: 4, radius: 15, color: 'blue' }, { x: 150, y: 150, speedX: 4, speedY: -5, radius: 20, color: 'green' } ], bounds: { left: 0, top: 0, right: 400, bottom: 400 } } } } </script> ``` 3. 在 Ball 组件中，实现碰撞检测的功能。可以在 move 方法中，遍历所有其他的 Ball 组件，检测当前小球是否与其他小球相交。如果相交了，就需要计算当前小球的新速度，并更新位置。 ``` move() { let x = this.x + this.speedX; let y = this.y + this.speedY; let radius = this.radius; if (x - radius < this.bounds.left || x + radius > this.bounds.right) { this.speedX = -this.speedX; } if (y - radius < this.bounds.top || y + radius > this.bounds.bottom) { this.speedY = -this.speedY; } this.balls.forEach(ball => { if (ball !== this) { let dx = ball.x - x; let dy = ball.y - y; let distance = Math.sqrt(dx * dx + dy * dy); if (distance < radius + ball.radius) { let angle = Math.atan2(dy, dx); let sin = Math.sin(angle); let cos = Math.cos(angle); // 旋转坐标系 let vx1 = this.speedX * cos + this.speedY * sin; let vy1 = this.speedY * cos - this.speedX * sin; let vx2 = ball.speedX * cos + ball.speedY * sin; let vy2 = ball.speedY * cos - ball.speedX * sin; // 碰撞后的新速度 let vx1Final = ((this.radius - ball.radius) * vx1 + (2 * ball.radius) * vx2) / (this.radius + ball.radius); let vx2Final = ((2 * this.radius) * vx1 + (ball.radius - this.radius) * vx2) / (this.radius + ball.radius); // 更新速度 this.speedX = vx1Final * cos - vy1 * sin; this.speedY = vy1 * cos + vx1Final * sin; ball.speedX = vx2Final * cos - vy2 * sin; ball.speedY = vy2 * cos + vx2Final * sin; // 更新位置 x += this.speedX; y += this.speedY; ball.x += ball.speedX; ball.y += ball.speedY; } } }); this.$emit('update:x', x); this.$emit('update:y', y); } ``` 通过以上步骤，就可以实现多个小球的碰撞，并且在 Vue 中动态更新小球的位置和速度。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值