用JavaScript写一个类似于windows的气泡屏保效果
2024-05-29 12:21:49
最近在学习JavaScript，然后在书上看到了一个简单的碰壁反弹效果，效果你们可以看一下，js代码如下：
window.onload = function(){var main = document.getElementById('main');var box = document.getElementById('box');var posX = 375; //初始位置x坐标var posY = 175; //初始位置y坐标var moveX = true; //判断是否向左向右移动，true向左，false向右var moveY = true; //同上var timer;box.style.left = posX + 'px';box.style.top = posY + 'px';//移动函数function move(){if(moveX){if(posX > 0){posX--;box.style.left = posX + 'px';}else{moveX = false;}}else{if(posX < main.clientWidth - box.offsetWidth){posX++;box.style.left = posX + 'px';}else{moveX = true;}}if(moveY){if(posY > 0){posY--;box.style.top = posY + 'px';}else{moveY = false;}}else{if(posY < main.clientHeight - box.offsetHeight){posY++;box.style.top = posY + 'px';}else{moveY = true;}}}timer = setInterval(move,10);}效果的具体实现方式就是，判断box的上下左右是否达到临界值。
上：判断posY < 0
下：判断posY < main.clientHeight - box.offsetHeight(main自身的高度 - box自身的高度)
左右，同理。
但是，写完这一个我并不满足，然后想给它加一个拖拽效果。并且给美化一下，让方块变成一个球体，且并不只有一个。
js代码如下：
window.onload = function(){var main = document.getElementById('main');var num = 1+Math.floor(Math.random()*15); //随机生成1-15的数字，代表球的个数var posX = []; //每个球的位置var posY = []; var moveX = [];//每个球的移动方向var moveY = [];var speed = [];//每个球的速度var flag = [];//判断球是否移动var timer;//根据浏览器改变窗口大小window.onresize = function(){var nwidth = document.documentElement.clientWidth;var nheight = document.documentElement.clientHeight;main.style.width = (nwidth - 40) + 'px';main.style.height = (nheight - 40) + 'px';}onresize();//让所有球都可以移动for(var i = 0;i < num;i++){moveX[i] = true;moveY[i] = true;speed[i] = 1+Math.floor(Math.random()*5);flag[i] = 1;}//随机颜色var getRandomColor = function(){return '#' +(function(color){return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])&& (color.length == 6) ? color : arguments.callee(color);})('');}//创建dom节点function creat(){for(var i = 0;i < num;i++){var dom1 = document.createElement('div');//获取随机位置posX[i] = 1+Math.floor(Math.random()*1600);posY[i] = 1+Math.floor(Math.random()*800);dom1.style.left = posX + 'px';dom1.style.top = posY + 'px';dom1.style.background=getRandomColor();main.appendChild(dom1);dom1.id = i+'box';}}//移动function move(box,cnt,sp){if(moveX[cnt]){if(posX[cnt] > 0){posX[cnt]-=sp;box.style.left = posX[cnt] + 'px';}else{moveX[cnt] = false;}}else{if(posX[cnt] < main.clientWidth - box.offsetWidth){posX[cnt]+=sp;box.style.left = posX[cnt] + 'px';}else{moveX[cnt] = true;}}if(moveY[cnt]){if(posY[cnt] > 0){posY[cnt]-=sp;box.style.top = posY[cnt] + 'px';}else{moveY[cnt] = false;}}else{if(posY[cnt] < main.clientHeight - box.offsetHeight){posY[cnt]+=sp;box.style.top = posY[cnt] + 'px';}else{moveY[cnt] = true;}}}function start(){timer = setInterval(function(){for(var i = 0;i < num;i++){if(flag[i]==1){var div = document.getElementById(i+'box');move(div,i,speed[i]);}}},15);}creat();//拖拽效果for(var i = 0;i < num;i++){var drag = document.getElementById(i+'box');drag.onmousedown = function(event){var alias = this;var index = parseInt(this.id);flag[index] = 0;var event = event || window.event;var tmpX = event.clientX - this.offsetLeft;var tmpY = event.clientY - this.offsetTop;if(event.preventDefault){event.preventDefault();}else{event.returnValue = false;}document.onmousemove = function(event){var event = event || window.event;var endX = event.clientX - tmpX;var endY = event.clientY - tmpY;var mouseX = main.clientWidth - alias.offsetWidth;var mouseY = main.clientHeight - alias.offsetHeight;if(endX >= mouseX){endX = mouseX;}if(endX <= 0){endX = 0;}if(endY >= mouseY){endY = mouseY;}if(endY <= 0){endY = 0;}posX[index] = endX;posY[index] = endYalias.style.left = posX[index] + 'px';alias.style.top = posY[index] + 'px';}document.onmouseup = function(){document.onmousemove = null;flag[index] = 1;}}}start();}原理是，当鼠标放置到球上并点击后，球不会移动，通过拖拽改变球的位置，并保存。放开鼠标后，从新位置移动。
不过貌似没有做兼容优化，估计IE只有最新版本可以支持！
做完这个以后，还是不死心。因为想到了windows系统一个气泡的屏幕保护程序。所以就想做一个。
这里面最重要的思想是判断球与球之间的碰撞！
原理：求出球（div）的圆心，并判断两个球的圆心距离是否等于球直径的平方，如果相等，则根据球的位置改变移动方向。
js代码如下：
window.onload = function(){var main = document.getElementById('main');var num = 1+Math.floor(Math.random()*10);var posX = [];var posY = [];var moveX = [];var moveY = [];var speed = [];var flag = [];var timer;//根据浏览器改变窗口大小window.onresize = function(){var nwidth = document.documentElement.clientWidth;var nheight = document.documentElement.clientHeight;main.style.width = (nwidth - 40) + 'px';main.style.height = (nheight - 40) + 'px';}onresize();for(var i = 0;i < num;i++){moveX[i] = true;moveY[i] = true;speed[i] = 2+Math.floor(Math.random()*4);flag[i] = 1;}//随机颜色var getRandomColor = function(){return '#' +(function(color){return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])&& (color.length == 6) ? color : arguments.callee(color);})('');}//创建dom节点function creat(){for(var i = 0;i < num;i++){var dom1 = document.createElement('div');//获取随机位置posX[i] = 1+Math.floor(Math.random()*1600);posY[i] = 1+Math.floor(Math.random()*800);dom1.style.left = posX + 'px';dom1.style.top = posY + 'px';dom1.style.background=getRandomColor();main.appendChild(dom1);dom1.id = i+'box';}}//球与球之间的碰撞function crash(ball,cnt){var aballX = posX[cnt] + 100;var aballY = posY[cnt] + 100;var areaWL = ball.offsetLeft - 200;var areaWR = ball.offsetLeft + 400;var areaHT = ball.offsetTop - 200;var areaHB = ball.offsetTop + 400;for(var i = 0;i < num;i++){if(i != cnt){var div = document.getElementById(i+'box');var bballX = posX[i] + 100;var bballY = posY[i] + 100;if((bballX >= areaWL && bballX <= areaWR) && (bballY >= areaHT && bballY <= areaHB)){var lX = aballX - bballX;var lY = aballY - bballY;var len = lX*lX + lY*lY;if(len <= 40000){if(bballX > aballX){if(bballY > aballY){moveX[cnt] = true;moveY[cnt] = true;}else if(bballY < aballY){moveX[cnt] = true;moveY[cnt] = false;}else{moveX[cnt] = true;}}else if(bballX < aballX){if(bballY > aballY){moveX[cnt] = false;moveY[cnt] = true;}else if(bballY < aballY){moveX[cnt] = false;moveY[cnt] = false;}else{moveX[cnt] = false;}}else if(bballX = aballX){if(bballY > aballY){moveY[cnt] = true;}else if(bballY < aballY){moveY[cnt] = false;}}}}}}}//移动function move(box,cnt,sp){if(moveX[cnt]){if(posX[cnt] > 0){posX[cnt]-=sp;box.style.left = posX[cnt] + 'px';crash(box,cnt);}else{moveX[cnt] = false;}}else{if(posX[cnt] < main.clientWidth - box.offsetWidth){posX[cnt]+=sp;box.style.left = posX[cnt] + 'px';crash(box,cnt);}else{moveX[cnt] = true;}}if(moveY[cnt]){if(posY[cnt] > 0){posY[cnt]-=sp;box.style.top = posY[cnt] + 'px';crash(box,cnt);}else{moveY[cnt] = false;}}else{if(posY[cnt] < main.clientHeight - box.offsetHeight){posY[cnt]+=sp;box.style.top = posY[cnt] + 'px';crash(box,cnt);}else{moveY[cnt] = true;}}}function start(){timer = setInterval(function(){for(var i = 0;i < num;i++){if(flag[i]==1){var div = document.getElementById(i+'box');move(div,i,speed[i]);}}},15);}creat();//拖拽效果for(var i = 0;i < num;i++){var drag = document.getElementById(i+'box');drag.onmousedown = function(event){var alias = this;var index = parseInt(this.id);flag[index] = 0;var event = event || window.event;var tmpX = event.clientX - this.offsetLeft;var tmpY = event.clientY - this.offsetTop;if(event.preventDefault){event.preventDefault();}else{event.returnValue = false;}document.onmousemove = function(event){var event = event || window.event;var endX = event.clientX - tmpX;var endY = event.clientY - tmpY;var mouseX = main.clientWidth - alias.offsetWidth;var mouseY = main.clientHeight - alias.offsetHeight;if(endX >= mouseX){endX = mouseX;}if(endX <= 0){endX = 0;}if(endY >= mouseY){endY = mouseY;}if(endY <= 0){endY = 0;}posX[index] = endX;posY[index] = endYalias.style.left = posX[index] + 'px';alias.style.top = posY[index] + 'px';}document.onmouseup = function(){document.onmousemove = null;flag[index] = 1;}}}start();}本人有点懒。。写完了就没做优化，所以低版本的浏览器并不能运行！
而且最后这个版本存在一个bug：当拖拽小球并碰到另一个小球时，如果拖拽速度过快，则会两球会重叠到一起一会。
产生原因：因为球的速度是初始化随机定了的，反弹的速度跟移动速度是一样的。当拖拽移动速度超过反弹速度就会产生重叠效果。
解决方法：得到拖拽速度，当碰撞时将速度付给反弹速度！之后再让反弹速度慢慢减小。
如果有人有对这个有点小兴趣，可以修改一下！
用JavaScript写一个类似于windows的气泡屏保效果相关推荐
- C#实现气泡屏保效果（用4个timer）
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- php气泡效果,js 模拟气泡屏保效果代码_其他特效
核心代码: var T$ = function(id) { return document.getElementById(id); } var $extend = function(des, src) ...
- C#实现气泡屏保效果（用1个timer）
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- [ActionScript 3.0] 模拟win7彩色气泡屏保效果
主文件: package {import com.views.BubbleView;import com.views.ColorfulBubble;import flash.display.Sprit ...
- JavaScript写一个虚拟软键盘，可拼音输入
在某些业务场景中,无法使用外接实体键盘,也不方便调出windows自带的虚拟键盘,这时候我们可以利用JavaScript写一个虚拟键盘,实现点击输入框即可唤醒,大小写中.英文及数字的输入.可满足实际使 ...
- php开发俄罗斯方块,用JavaScript写一个俄罗斯方块
曾经用 Turbo C++ 3.0 写过 DOS 下的俄罗斯方块,不久之后又用 VB 写了另一个版本.这次决定用 JavaScript 再写一个并非完全心血来潮,从技术上来说,主要是想尝试使用 web ...
- 用JavaScript写一个正则表达式测试工具
用JavaScript写一个正则表达式测试工具 <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
- 使用JavaScript写一个三级下拉框联动
使用JavaScript写一个三级下拉框联动 首先我们需要确定思路,定义三个下拉框: 1.从后台获取包含的数组1.1定义数组2.将数组中的信息添加到下拉框中2.1遍历数组,将数组信息添加下拉框2.2每 ...
- 用JavaScript写一个可以聊天的桌面宠物
好的,我们可以用 JavaScript 写一个聊天桌面宠物.首先,我们需要使用 JavaScript 的 GUI 库,比如 Electron 或 NW.js 来创建一个桌面应用程序.然后,我们可以使用 ...
最新文章
- bootstrap轮播如何支持移动端滑动手势
- 入门Promise的正确姿势
- win8+ubuntu，ubuntu中打开NTFS文件
- python基础作业第十四天
- No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=arm64, VALID_ARCHS=armv7 armv7s)
- linux centos7清除系统日志、历史记录、登录信息
- python如何自动缩进_Python缩进
- LeetCode 1049. 最后一块石头的重量 II（DP）
- 进度条上的小圆点怎么做_傲视网：【AE教程】如何制作环形进度条（第一讲）...
- c语言计算机动画生成原理,计算机组成原理动画演示系统 - 源码下载|多媒体|源代码 - 源码中国...
- is not a registered tag library. Must be one of:
- 解决idea下tomcat乱码
- 马克思主义基本原理概论
- python 下载qq群文件_利用多线程快速下载腾讯QQ群文件的方法
- matlab global rbfnet,基于RBF简单的matlab手写识别
- c++模板（函数模板，类中函数模板，类模板）
- 3.2 QuickBI可视化分析工具
- 学习Java可以从事哪些工作
- Au 入门系列之三：波形编辑器操作基础
- Win11怎么连接宽带？