小球大小随机，随机运动碰撞

已于 2022-07-01 17:59:20 修改
阅读量271 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
于 2022-06-29 18:27:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongheng123/article/details/125527395
版权

在这里插入图片描述

<template>
 <GZNormalWrap title="建筑工业化" style="position: relative;" type= 'three'>
   <div class="button-style" @click="handleLink('bimBuildingIndustrialization')">
     决策BI
   </div>
  <ul id="constructionIndustryMain" v-if="dataArr.length>0">
    <li v-for="(item, index) in circleData" :key="index" class="ball-style" @click="handleClick('bimBuildingIndustrialization')">
      <div style="width:100%">
        <div class="num-style">{{ item.value }}</div>
        <div class="name-style">{{item.name}}</div>
      </div>
    </li>
  </ul>
 </GZNormalWrap>
</template>

<script>
import GZNormalWrap from '../../common/GZNormalWrapQds'
import api from 'api'
import GetUrlParams from 'mixins/getUrlParams'
import GetUserInfo from 'mixins/getUserInfo'
// import ball from './components/ball'
export default {
  data() {
    return {
      circleData: [],
      circleDom: [],
      circleArr: [],
      // 初始化运动的最大宽和高，初始定义0
      maxW: 0,
      maxH: 0,
      timer: null,
      getValueTimer: null,
      timerArr: [],
      count: 7,
      clientWidthValue: 0,
      ballWidth: 0,
      ballWidthArr: [],
      divVis: true,
      // dataArr: ''
      dataArr: [{ name: '装配式智能建造', value: 0, type: 2 }, { name: '机器人应用', value: 0, type: 3 }, { name: '放样机器人应用', value: 0, type: 5 }, { name: '三维激光机器', value: 0, type: 4 }, { name: '远程遥控', value: 0, type: 7 }, { name: '智慧展馆', value: 0, type: 1 }, { name: '倾斜摄影', value: 0, type: 6 }]
    };
  },
  components: {
    GZNormalWrap
    // ball
    // NoData
  },
  mixins: [GetUrlParams, GetUserInfo],
  mounted() {
    this.getData()
    // 处理接口返回后小球之间来回不碰撞 按逻辑分析是因为 crash 里的引用改变  暂时这样处理  时间紧张
    this.getValueTimer = setInterval((i) => {
      if(this.divVis === true) {
        this.divVis = false
        this.getLatest_sign_users()
        clearInterval(this.getValueTimer)
      }
    }, 500)
    this.$nextTick(() => {
      this.clientWidthValue = document.querySelector('#constructionIndustryMain').clientWidth
      this.ballWidth = Math.floor(this.clientWidthValue / this.count)
      this.handleBallWidth(this.ballWidth)
      // this.getLatest_sign_users()
    })
  },
  methods: {
    getData() {
      this.divVis = false
      this.$get(api.QDSQHomePageWisdomPavilionCircleByModule(this.globalTenantId, this.type, this.id)).then(
        (res) => {
          if(res.data && res.data.data.length > 0) {
            res.data.data.forEach(item => {
              this.dataArr.forEach(ele => {
                if(item.buildingType === ele.type.toString()) {
                  ele.value = item.applicationProjectNum
                }
              })
            })
            this.divVis = true
          }
        }
      )
    },
    handleLink(item) {
      if(item) {
        this.$router.push({ path: '/' + item, query: this.$route.query })
        sessionStorage.setItem('supervisePath', '/' + item)
      } else {
        return false
      }
    },
    handleClick(item) {
      if(item) {
        this.$router.push({ path: '/' + item, query: this.$route.query })
        sessionStorage.setItem('supervisePath', '/' + item)
      } else {
        return false
      }
    },
    handleBallWidth(ballWidth) {
      this.ballWidthArr.push(this.ballWidth)
      const cell = ballWidth / (this.count)
      // const num = (this.count - 1) % 2 + Math.floor((this.count - 1) / 2)
      for(let i = 0; i < (this.count - 1); i++) {
        const value = Math.floor(ballWidth - (cell * (i + 1)))
        // const value2 = Math.floor(ballWidth + (cell * (i + 1)))
        this.ballWidthArr.push(value)
        // this.ballWidthArr.unshift(value2)
      }
      this.ballWidthArr.sort((a, b) => {
        return a - b
      })
    },
    getLatest_sign_users() {
      // const data = [{ 'name': '三维激光机器', 'value': 0, 'type': 4 }, { 'name': '远程遥控', 'value': 0, 'type': 7 }, { 'name': '智慧展馆', 'value': 0, 'type': 1 }, { 'name': '倾斜摄影', 'value': 0, 'type': 6 }, { 'name': '装配式智能建造', 'value': 1, 'type': 2 }, { 'name': '机器人应用', 'value': 1, 'type': 3 }, { 'name': '放样机器人应用', 'value': 1, 'type': 5 }]
      // this.dataArr = data
      const data = this.dataArr
      data.sort((a, b) => {
        return a.value - b.value
      })
      this.circleData = [...data]
      // 计算球体比例
      // 计算比例 处理特殊场景
      let vallConst = ''
      const min = this.ballWidthArr[0] > 60 ? this.ballWidthArr[0] : 60
      if((data[data.length - 1].value - data[0].value) === 0 && data[data.length - 1].value === 0) {
        vallConst = min
      } else if((data[data.length - 1].value - data[0].value) === 0 && data[data.length - 1].value !== 0) {
        vallConst = this.ballWidthArr[this.ballWidthArr.length - 1]
      } else {
        this.ballRatio = (this.ballWidthArr[this.ballWidthArr.length - 1] - min) / (data[data.length - 1].value - data[0].value)
      }
      this.$nextTick(() => {
        if (data.length) {
          this.initBubble(vallConst)
        }
      })
    },
    initBubble(vallConst) {
      const main = document.getElementById('constructionIndustryMain');
      const divDom = main.querySelectorAll('.ball-style'); // 获取新增加的dom
	  // 给新增加的dom设置宽高
      for (let i = 0; i < divDom.length; i++) {
        const textValue = divDom[i].querySelector('.name-style').innerText
        const indexValue = this.circleData.findIndex(item => item.name === textValue)
        // divDom[i].style.boxShadow = '0 0 20px' + ' ' + colors[this.circleData[i].gender] + ' ' + 'inset';
        divDom[i].style.background = 'linear-gradient(123deg, rgba(4, 4, 45, 0.43), rgba(38, 142, 161, 0.43))'
        // 10个以上尺寸变小
        // let sizeValue = this.ballWidthArr[indexValue]
        const min = this.ballWidthArr[0] > 60 ? this.ballWidthArr[0] : 60
        let sizeValue = vallConst ? vallConst : (Math.floor(this.circleData[indexValue].value * this.ballRatio) + min)
        if(sizeValue < 60) {
          sizeValue = 60
        }
        divDom[i].style.width = sizeValue + 'px' // '80px';
        divDom[i].style.height = sizeValue + 'px';
        divDom[i].style.fontSize = '12px';
        divDom[i].style.lineHeight = '16px';
        this.circleDom.push(divDom[i])
      }

      // 根据浏览器窗口的大小自动调节小球的运动空间
      window.onresize = () => {
        this.maxW = main.clientWidth - divDom[0].clientWidth; // 为了让小球不卡在浏览器边缘
        this.maxH = main.clientHeight - divDom[0].clientHeight; // 所以要减去自身的宽高
      };
      onresize();

      // 数组对象的初始化
      for (let i = 0; i < this.circleDom.length; i++) {
        const obj = {};
        // 增加每个小球自己的maxW 和 maxH
        const maxW = main.clientWidth - this.circleDom[i].clientWidth; // 为了让小球不卡在浏览器边缘
        const maxH = main.clientHeight - this.circleDom[i].clientHeight;

        // if (this.circleDom[i].getAttribute('class') === 'active') {
        obj.x = Math.floor(Math.random() * (maxW + 1)); // 初始x坐标
        obj.y = Math.floor(Math.random() * (maxH + 1)); // 初始y坐标
        obj.cx = obj.x + this.circleDom[i].offsetWidth / 2;// 圆心x坐标
        obj.cy = obj.y + this.circleDom[i].offsetHeight / 2;// 圆心y坐标
        obj.movex = Math.floor(Math.random() * 2); // x轴移动方向
        obj.movey = Math.floor(Math.random() * 2); // y轴移动方向
        obj.speed = 0.2; // 随机速度
        obj.timer = null; // 计时器
        obj.index = i; // 索引值
        obj.maxW = maxW; // 每个小球最大宽
        obj.maxH = maxH; // 每个小球最大高
        obj.offsetWidthValue = this.circleDom[i].offsetWidth
        this.circleArr.push(obj)
        // 小球位置初始化
        this.circleDom[i].style.left = obj.x + 'px';
        this.circleDom[i].style.top = obj.y + 'px';
        // } else {
        //   // 保留之前数据得位置信息，不刷新位置
        //   obj = this.circleArr[i]
        // }
        this.move(obj);
      }
    },

    // 移动函数
    move(balls) {
      const self = this
      self.timer = requestAnimationFrame(function fn() {
        if (balls.movex === 1) {
          // 如果往右跑，则一直加速度，碰到边界，改为反方向运动
          balls.x += balls.speed;
          if (balls.x + balls.speed >= balls.maxW) {
            // 防止小球出界
            balls.x = balls.maxW;
            balls.movex = 0; // 小球运动方向发生改变
          }
        } else {
          balls.x -= balls.speed; // 1和0表示正反方向
          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 >= balls.maxH) {
            balls.y = balls.maxH;
            balls.movey = 0;
          }
        } else {
          balls.y -= balls.speed;
          if (balls.y - balls.speed <= 0) {
            balls.y = 0;
            balls.movey = 1;
          }
        }
        if (self.circleDom[balls.index]) {
          balls.cx = balls.x + self.circleDom[balls.index].offsetWidth / 2;// 小球圆心等于：运动中x的值加上自身的半径
          balls.cy = balls.y + self.circleDom[balls.index].offsetHeight / 2;
          self.circleDom[balls.index].style.left = balls.x + 'px'; // 小球相对于屏幕的位置
          self.circleDom[balls.index].style.top = balls.y + 'px';
          self.crash(balls.index); // 每个小球进行碰撞检测
        }
        requestAnimationFrame(fn);
      });


      // // 每个球单独有定时器
      // balls.timer = setInterval(() => {
      //   if (balls.movex === 1) {
      //     // 如果往右跑，则一直加速度，碰到边界，改为反方向运动
      //     balls.x += balls.speed;
      //     if (balls.x + balls.speed >= balls.maxW) {
      //       // 防止小球出界
      //       balls.x = balls.maxW;
      //       balls.movex = 0; // 小球运动方向发生改变
      //     }
      //   } else {
      //     balls.x -= balls.speed; // 1和0表示正反方向
      //     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 >= balls.maxH) {
      //       balls.y = balls.maxH;
      //       balls.movey = 0;
      //     }
      //   } else {
      //     balls.y -= balls.speed;
      //     if (balls.y - balls.speed <= 0) {
      //       balls.y = 0;
      //       balls.movey = 1;
      //     }
      //   }
      //   if (this.circleDom[balls.index]) {
      //     balls.cx = balls.x + this.circleDom[balls.index].offsetWidth / 2;// 小球圆心等于：运动中x的值加上自身的半径
      //     balls.cy = balls.y + this.circleDom[balls.index].offsetHeight / 2;
      //     this.circleDom[balls.index].style.left = balls.x + 'px'; // 小球相对于屏幕的位置
      //     this.circleDom[balls.index].style.top = balls.y + 'px';
      //     this.crash(balls.index); // 每个小球进行碰撞检测
      //   }
      // }, 25);
      // this.timerArr.push(balls.timer)
    },
    // 碰撞函数
    crash(a) {
      const container = [...this.circleArr]
      const ball1x = container[a].cx; // 在数组中任意球的圆心坐标
      const ball1y = container[a].cy;// 思路：先随便拿一个球，然后遍历所有球，拿这个球和所有球的圆心距离比较
      for (let i = 0; i < container.length; i++) {
        if (i !== a) { // 判断取出来的球不是本身，才能和其他球进行距离判断
          const ball2x = container[i].cx; // 将其他球的圆心坐标赋值给球2
          const ball2y = container[i].cy;
          // 圆心距 求两个点之间的距离,开平方
          const distence = Math.sqrt((ball1x - ball2x) * (ball1x - ball2x) + (ball1y - ball2y) * (ball1y - ball2y));
          if (distence <= ((this.circleDom[a].offsetWidth + container[i].offsetWidthValue) / 2)) { // 球心距离和求直径比较
            if (ball1x > ball2x) {
              // 当前位于未知求的右方
              if (ball1y > ball2y) { // 预设未知球撞当前球，然后当前球改变运动
                container[a].movex = 1; // 1表示为正值，对应的右和下
                container[a].movey = 1;// 0表示为负值，对应的左和上
              } else if (ball1y < ball2y) {
                container[a].movex = 1;
                container[a].movey = 0;
              } else {
                container[a].movex = 1;
              }
            } else if (ball1x < ball2x) {
              if (ball1y > ball2y) {
                container[a].movex = 0;
                container[a].movey = 0;
              } else if (ball1y < ball2y) {
                container[a].movex = 0;
                container[a].movey = 1;
              } else {
                container[a].movex = 0;
              }
            } else {
              if (ball1y > ball2y) {
                container[a].movey = 1;
              } else if (ball1y < ball2y) {
                container[a].movey = 0;
              }
            }
          }
        }
      }
    }
  },
  beforeDestroy() {
    cancelAnimationFrame(this.timer)
    // 清理每个球得定时器
    this.timerArr.forEach(item => {
      clearInterval(item)
    })
    // 清理签到数据
    clearInterval(this.timer)
  }
};
</script>
<style lang='less' scoped>
#constructionIndustryMain {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;

  li {
    position: absolute;
    overflow: hidden;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    cursor: pointer;
    &.active {
      animation: scaleBox 1s 1;
    }

    @keyframes scaleBox {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
    }

    div {
      span {
        display: block;
        width: 100%;
        color: #fff;
        text-align: center;
      }
    }
  }
}
.num-style{
  font-size: 18px;
  font-weight: bold;
  color: #20E3E1;
  text-align: center;
}
.name-style{
  margin-top: 5px;
  font-size: 12px;
  color: #FFFFFF;
  text-align: center;
}
.button-style{
  position: absolute;
  right: 30px;
  top: 20px;
  cursor: pointer;
  background: rgba(56, 137, 255, 0.6);
  width: 80px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #FFFFFF;
  border-radius: 2px;
  border: 1px solid #3889FF;
}
</style>

借鉴于此
https://blog.csdn.net/weixin_39150852/article/details/123825240

囿于江湖
关注
[Android 基础知识] 之 二十一 UI与Handler实例之小球碰撞
coder
05-22 2104
这个例子是根据《 Android---自定义的view类（一）》http://blog.csdn.net/lxw1980/article/details/6031978来改写的. 代码如下:package com.example.ballbump; import android.os.Bundle; import android.app.Activity; import android.vie
小球的随机运动
10-23
JavaScript在Canvas上画一个小球，随机位置并且让它随机运动
小球随机运动，图片随机运动
06-27
在页面里面可以是div也可以使图片随机运动特效 体验非常好，小球随机运动，图片随机运动，小球随机运动，图片随机运动
小球碰撞
weixin_45583482的博客
12-04 351
额。。。。啥都不说好吧，直接上代码 public class zhuye implements MouseListener { Threadsleep thread = new Threadsleep(); Listener listen=new Listener(); int x, y; public void initUI() { JFrame lgjf = n...
小球碰撞问题
laocooon的博客
12-21 494
小球碰撞问题 #pragma warning(disable : 4996) #include<stdio.h> #include<math.h> #include<stdlib.h> #define N 10000 int main() { int nlt[3], n, l, t, i, j, i1, j1; for (i = 0; i < 3; i++) scanf("%d", &nlt[i]); n =
javascript实现10个球随机运动、碰撞实例详解
10-23
4. 随机速度的生成：在开始动画时，可以为每个小球随机生成一组vx和vy值，使得小球具有不同的初始速度。 5. 小球样式的动态改变：可以通过JavaScript动态改变小球的样式，比如随机选择不同的背景图片，来实现小球的...
jQuery实现的分子运动小球碰撞效果
10-22
### jQuery实现的分子运动小球碰撞效果知识点 #### jQuery简介 jQuery是一个快速、简洁的JavaScript库，其设计目的是使HTML文档遍历与操作、事件处理、动画和Ajax等操作更加简单。通过简化JavaScript编程，jQuery极...
java小球点击动画 碰撞效果 随机生成
04-12
这篇内容将详细解析如何利用Java语言来创建这样一个功能：在鼠标点击的位置生成具有随机颜色和大小的小球，并让它们具备碰撞效果，包括小球之间的碰撞和与边界碰撞。 首先，我们需要引入Java Swing库，它提供了丰富...
CCF 碰撞的小球（满分代码 + 解题思路）201803-2
一只可爱的小猴子的博客
03-06 534
题目描述 解题思路 题意就是一群小球在线段上运动，给出球的初始位置和运动方向，问在t时间后小球的位置 小球只会有两种行为，一种是移动，一种是反向 当与别的小球碰撞时，会反向，所以要判断两个小球是否会碰撞 判断两个小球是否会碰撞，那么就要知道此时刻小球所在的位置，所以可以根据时间来依次移动小球 每一秒，移动过后，判断该小球是否与前面已经移动过的小球相撞，若是，两球反向 还需注意，移动过程中，超出线段范围需要反向 代码实现 #include <iostream> #include <cs
android自定义View之气球碰撞效果
努力的八戒
07-14 2167
最近项目需要做个许多小球碰撞的效果，就用自定义View撸了一个出来，效果如下这个效果也不复杂，说下算法步骤吧。1、小球数量ballCount，可以设个最大值，在这个阈值内去随机数2、小球圆心随机坐标（mX，mY）以及半径radius3、小球在x方向和y方向的随机速度mSpeedX，mSpeedY4、本次效果小球默认白色，通过alpha设置透明度，实际你们也可以通过随机颜色值达到五彩频繁的小球效果。...
Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法
忘尘_追忆的专栏
05-17 854
源码下载地址：http://download.csdn.net/detail/harvic880925/8032579 转载出处：http://blog.csdn.net/harvic880925/article/details/39996643  相关文章： 1、《Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性
android sensor之重力小球
huowen1990的专栏
01-22 1510
安卓重力小球demo 要过年了，最近在公司也没事。于是就在研究android的一些SDK。看到sensor时，突然想到大学里面刚出现android的时候，还没有钱买android手机，那时候想要是有个android手机能测试什么的岂不是很牛逼啊。记得那时候同学有款重力小球的游戏。 今天就开发了一款简单的demo重力小球。在网上也借鉴了一些别人的代码。测试是用的我爸以前的联想200元安卓机，
vue实现多个小球碰撞反弹效果
唯爱赞多的博客
06-27 972
实现多个小球碰撞反弹效果
Android碰撞的小球，密集恐惧症者谨慎
喜爱兰兰
11-07 3814
今天又温习了一遍Java的进程。正好用Android写了一个小Demo，具体就是在手机屏幕上显示多个运动的小球，小球碰到手机屏幕边缘会自动弹回。大概就是下面图中显示的: 该本主要的结束的是自定义View封装，View视图绘制，通过xml文件自定义View属性并设置属性，多线程Thread，小球碰撞弹回简单算法。 下面是制作这个Demo的简单步骤: step1:自定义一个View抽象类
android练习：碰撞的小球
gundumw100的专栏
04-10 1086
先看图： 小球碰到边上反弹，下面的横杆接住小球让其再反弹上去。很简单，大家都见过的啦。 这里主要练习SurfaceView，Callback以及在SurfaceView中使用线程，看主要的View类： package com.wt.app; import android.content.Context; import android.graphics.Canvas; import
C语言EasyX详解(小球碰撞)
热门推荐
云淡风轻ing的博客
09-16 1万+
首先先来认识下EasyX EasyX 是针对 C/C++ 的图形库，可以帮助使用C/C++语言的程序员快速上手图形和游戏编程。 比如，可以用 VC + EasyX 很快的用几何图形画一个房子，或者一辆移动的小车，可以编写俄罗斯方块、贪吃蛇、黑白棋等小游戏，可以练习图形学的各种算法，等等。 文章目录1.静止小球2.颜色渐变实现3.围棋棋盘4.国际象棋棋盘5.小球运动6.多个小球移动7.多个小球碰撞 ...
CCF CSP 碰撞的小球
凤凰于飞
09-05 3704
问题描述 　　数轴上有一条长度为L（L为偶数)的线段，左端点在原点，右端点在坐标L处。有n个不计体积的小球在线段上，开始时所有的小球都处在偶数坐标上，速度方向向右，速度大小为1单位长度每秒。 　　当小球到达线段的端点（左端点或右端点）的时候，会立即向相反的方向移动，速度大小仍然为原来大小。 　　当两个小球撞到一起的时候，两个小球会分别向与自己原来移动的方向相反的方向，以原来的速度大小继续移动。...
c语言小球随机运动,webassembly demo之canvas中随机运动圆球
weixin_34343610的博客
05-25 748
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？1、Demo功能介绍实现了一个圆球在800px 600px画布内随机运动，固定时间间隔随机运动一次，运动方向由x和y轴组成的向量决定，这个向量是随机值(后面会称它为 *随机向量 )，从C语言代码中的随机函数获取，JS代码实现小球的画布渲染、越界纠正、设置运动频率等工作。Demo同时实现了纯JS(即不使用WebAssemb...
Canvas实现动态小球碰撞与随机运动教程
总结起来，本文介绍了如何结合Canvas API和JavaScript编程实现动态小球重叠效果，包括静态小球的生成和随机运动的实现，以及如何通过碰撞检测保持游戏逻辑的合理性。这种技术在游戏开发、可视化应用以及动画设计中有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值