java小球碰撞界面设计_JavaScript实现小球碰撞特效

JavaScript实现小球碰撞特效。类似自由落体运动。实现原理非常简单,就是动态的改变每个元素的坐标。使用radius属性将图片圆角化。使用left,top属性动态的改变小球的位置。碰撞反弹球,当碰撞到容器的边缘后,进行反弹,反向改变坐标。

首先创建Screen类,并在Screen的构造函数中给出了球移动、碰撞所需的各种属性变量,如ballsnum、spring、bounce、gravity等等  然后用原型prototype给出相应的函数,如创建球,createBalls,球碰撞hitBalls,球移动moveBalls,给每个函数添加相应的功能、

最后用按钮点击事件调用函数,仅此而已。只是我这里把点击的效果注释掉了,直接刷新页面就会随机改变。

运行效果如下:

6d5301c57d5c54b10bff16734a8a7043.png

html代码如下:html>

业余草:www.xttblog.com

body {

margin:0;

padding:0;

text-align: center;

}

#screen { width: 800px; height: 640px; position: relative; background: #ccccff;margin: 0 auto;vertical-align: bottom}

#inner { position: absolute; left:0px; top:0px; width:100%; height:100%; }

#screen p {color:white;font:bold 14px;}

.one { background:url('images/QP1.png') no-repeat; background-size: 100% auto;}

.two { background:url('images/QP2.png') no-repeat; background-size: auto 100%;}

.three { background:url('images/QP3.png') no-repeat; background-size: auto 100%; }

.four { background:url('images/QP4.png') no-repeat; background-size: auto 100%;}

.five { background:url('images/QP5.png') no-repeat; background-size: auto 100%;}

.six { background:url('images/QP6.png') no-repeat; background-size: auto 100%;}

.seven { background:url('images/QP7.png') no-repeat; background-size: auto 100%; }

.eight { background:url('images/QP8.png') no-repeat; background-size: auto 100%; }

.nine { background:url('images/QP9.png') no-repeat; background-size: auto 100%;}

.ten{ background:url('images/QP10.png') no-repeat; background-size: auto 100%;}

hi test it!

相关js代码如下:var getFlag=function (id) {

return document.getElementById(id);   //获取元素引用

}

var extend=function(des, src) {

for (p in src) {

des[p]=src[p];

}

return des;

}

var clss=['one','two','three','four','five','six','seven','eight','nine','ten'];

var Ball=function (diameter,classn) {

var ball=document.createElement("div");

ball.className=classn;

with(ball.style) {

width=height=diameter+'px';position='absolute';

}

return ball;

}

var Screen=function (cid,config) {

//先创建类的属性

var self=this;

if (!(self instanceof Screen)) {

return new Screen(cid,config)

}

config=extend(Screen.Config, config)    //configj是extend类的实例    self.container=getFlag(cid);            //窗口对象

self.container=getFlag(cid);

self.ballsnum=config.ballsnum;

self.diameter=80;                       //球的直径

self.radius=self.diameter/2;

self.spring=config.spring;              //球相碰后的反弹力

self.bounce=config.bounce;              //球碰到窗口边界后的反弹力

self.gravity=config.gravity;            //球的重力

self.balls=[];                          //把创建的球置于该数组变量

self.timer=null;                       //调用函数产生的时间id

self.L_bound=0;                       //container的边界

self.R_bound=self.container.clientWidth;  //document.documentElement.clientWidth || document.body.clientWidth 兼容性

self.T_bound=0;

self.B_bound=self.container.clientHeight;

};

Screen.Config={                         //为属性赋初值

ballsnum:10,

spring:0.8,

bounce:-0.9,

gravity:0.05

};

Screen.prototype={

initialize:function () {

var self=this;

self.createBalls();

self.timer=setInterval(function (){self.hitBalls()}, 30)

},

createBalls:function () {

var self=this,

num=self.ballsnum;

var frag=document.createDocumentFragment();    //创建文档碎片,避免多次刷新

for (i=0;i

var ball=new Ball(self.diameter,clss[i]);

//var ball=new Ball(self.diameter,clss[ Math.floor(Math.random()* num )]);//这里是随机的10个小球的碰撞效果

ball.diameter=self.diameter;

ball.radius=self.radius;

ball.style.left=(Math.random()*self.R_bound)+'px';  //球的初始位置,

ball.style.top=(Math.random()*self.B_bound)+'px';

ball.vx=Math.random() * 6 -3;

ball.vy=Math.random() * 6 -3;

frag.appendChild(ball);

self.balls[i]=ball;

}

self.container.appendChild(frag);

},

hitBalls:function () {

var self=this,

num=self.ballsnum,

balls=self.balls;

for (i=0;i

var ball1=self.balls[i];

ball1.x=ball1.offsetLeft+ball1.radius;      //小球圆心坐标

ball1.y=ball1.offsetTop+ball1.radius;

for (j=i+1;j

var ball2=self.balls[j];

ball2.x=ball2.offsetLeft+ball2.radius;

ball2.y=ball2.offsetTop+ball2.radius;

dx=ball2.x-ball1.x;                      //两小球圆心距对应的两条直角边

dy=ball2.y-ball1.y;

var dist=Math.sqrt(dx*dx + dy*dy);       //两直角边求圆心距

var misDist=ball1.radius+ball2.radius;   //圆心距最小值

if(dist 

//假设碰撞后球会按原方向继续做一定的运动,将其定义为运动A

var angle=Math.atan2(dy,dx);

//当刚好相碰,即dist=misDist时,tx=ballb.x, ty=ballb.y

tx=ball1.x+Math.cos(angle) * misDist;

ty=ball1.y+Math.sin(angle) * misDist;

//产生运动A后,tx > ballb.x, ty > ballb.y,所以用ax、ay记录的是运动A的值

ax=(tx-ball2.x) * self.spring;

ay=(ty-ball2.y) * self.spring;

//一个球减去ax、ay,另一个加上它,则实现反弹

ball1.vx-=ax;

ball1.vy-=ay;

ball2.vx+=ax;

ball2.vy+=ay;

}

}

}

for (i=0;i

self.moveBalls(balls[i]);

}

},

moveBalls:function (ball) {

var self=this;

ball.vy+=self.gravity;

ball.style.left=(ball.offsetLeft+ball.vx)+'px';

ball.style.top=(ball.offsetTop+ball.vy)+'px';

//判断球与窗口边界相碰,把变量名简化一下

var L=self.L_bound, R=self.R_bound, T=self.T_bound, B=self.B_bound, BC=self.bounce;

if (ball.offsetLeft 

ball.style.left=L;

ball.vx*=BC;

}

else if (ball.offsetLeft + ball.diameter > R) {

ball.style.left=(R-ball.diameter)+'px';

ball.vx*=BC;

}

else if (ball.offsetTop 

ball.style.top=T;

ball.vy*=BC;

}

if (ball.offsetTop + ball.diameter > B) {

ball.style.top=(B-ball.diameter)+'px';

ball.vy*=BC;

}

}

}

window.οnlοad=function() {

var sc=null;

document.getElementById("inner").innerHTML='';

sc=new Screen('inner',{ballsnum:10, spring:0.3, bounce:-0.9, gravity:0.01});

sc.initialize();

getFlag('start').οnclick=function () {

document.getElementById("inner").innerHTML='';

sc=new Screen('inner',{ballsnum:10, spring:0.3, bounce:-0.9, gravity:0.01});

sc.initialize();

}

getFlag('stop').οnclick=function() {

clearInterval(sc.timer);

}

}

看起来很简单吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370353.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

es6常用基础合集

es6常用基础合集 在实际开发中,ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大。值得高兴的是,如果你熟悉ES5,学习ES6并不…

java接口开发_如果你想学好Java,这些你需要了解

01基本知识  在学习Java之前,您需要了解计算机的基本知识,然后再学习Java。同时,您需要熟悉DOS命令、Java概述、JDK环境安装配置、环境变量配置。JDK和环境变量配置完成后,就可以编写Java程序了。02编程格式  此时&#xff0c…

从Java程序生成QR码图像

如果您精通技术和小工具,则必须了解QR码。 这些天,到处都可以找到它-在博客,网站,甚至在某些公共场所。 这在移动应用程序中非常流行,在移动应用程序中,您可以使用QR Code扫描仪应用程序扫描QR Code&#x…

课时67.标签选择器(掌握)

通过上节课的学习我们明白了如何通过十六进制来表示颜色 例如:红色的几种表示方法 我们发现在学习CSS当中的一些属性的时候,它都有一些套路 只要知道属性的名称,属性有什么作用,它有哪些取值,这个属性有什么注意点 …

Java 7:使用NIO.2进行文件过滤-第1部分

NIO.2是自Java 7起JDK中包含的用于I / O操作的新API。使用此新API,您可以执行与 java.io以及许多出色的功能,例如:访问文件元数据和监视目录更改等。 显然,由于向后兼容,java.io包不会消失,但是我们鼓励为…

课时66.颜色控制属性下(理解)

今天来讲解十六进制控制属性的方法,其实用十六进制表示的方式本质就是rgb,只不过它们的格式不一样而已,十六进制中是通过每两位表示一种颜色的方式来给颜色赋值。 如 #FF0000 FF----r 00----g 00----b 修改前两位相当于修改rgb中的第一…

课时57.HTML被废弃的标签(掌握)

1.为什么HTML中有一部分标签会被废弃&#xff1f; 因为当前HTML中的标签只有一个作用&#xff0c;就是用来添加语义&#xff0c;而早期的HTML标签中有一部分标签是没有语义的 有一部分标签是用来修改样式的 所以这部分标签就被淘汰了 <br><hr><font> <…

课时55.详情和概要标签(理解)

1.什么是详情和概要标签&#xff1f; 作用&#xff1a;利用summary标签来描述概要信息&#xff0c;利用details标签来描述详情信息 默认情况下是折叠展示&#xff0c;想看见详情必须点击 格式&#xff1a; <details> <summary>概要信息</summary> 详情信…

课时53.video标签(掌握)

这节课来学习一下html5中新增的标签&#xff0c;我们先来看一下&#xff0c;html5中新增了哪些标签&#xff1f; 打开W3school的网页&#xff0c;点击参考手册中的HTML/HTML5标签&#xff0c;有一个按字母顺序排列的标签&#xff0c;但凡标签后面带有5标记的&#xff0c;都是h…

Canvas制作的下雨动画

简介 在codepen上看到一个Canvas做的下雨效果动画&#xff0c;感觉蛮有意思的。就研究了下&#xff0c;这里来分享下&#xff0c;实现技巧。效果可以见下面的链接。 霓虹雨: http://codepen.io/natewiley/full/NNgqVJ/ 效果截图&#xff1a; Canvas动画基础 大家都知道&…

在Eclipse中有效使用JUnit

最近&#xff0c;我被卷入了讨论1和一些受感染的同伴2&#xff0c;他们关于我们如何在Eclipse IDE中使用JUnit 。 令人惊讶的是&#xff0c;对话带来了并非所有人都知道的一些“技巧”。 这使我有了写这篇文章的想法&#xff0c;总结了我们的演讲。 谁知道–也许有人也有新事物…

jquery文件上传控件 Uploadify

基于jquery的文件上传控件&#xff0c;支持ajax无刷新上传&#xff0c;多个文件同时上传&#xff0c;上传进行进度显示&#xff0c;删除已上传文件。 要求使用jquery1.4或以上版本&#xff0c;flash player 9.0.24以上。 有两个版本&#xff0c;一个用flash,一个是html5。html5…

php实现第三方邮箱登录_PHP实现用户异地登录提醒功能的方法

有时候你的网站账号被盗或你在别处登录操作后台时&#xff0c;右下角会弹出提示信息&#xff0c;提醒你的账号异地登录&#xff0c;或者会被强制下线。对于这种安全性要求比较高的web网站&#xff0c;很多后台管理都会做这种功能提醒。甄别自己的账号是否被盗或者是否有另一个人…

课时47.datalist标签(了解)

1.datalist标签 作用&#xff1a;给输入框绑定待选项 2.datalist格式&#xff1a; <datalist> <option>待选项内容</option> </datalist> 3.如何给输入框绑定待选列表&#xff1f; 搞一个输入框搞一个datalist列表给datalist列表标签添加一个id给…

postgis安装_从零开始,构建电子地图网站:0_2_数据处理postgis

软件安装完&#xff0c;开始数据处理。从China Historical GIS下载一份数据。一、数据下载数据来源&#xff1a;China Historical GIS&#xff1a;https://sites.fas.harvard.edu/~chgis/data/chgis/v6/先下载一份时间序列数据&#xff1a;Download CHGIS V6 TIME SERIES Datah…

sar图像去噪matlab,一种基于总曲率的SAR图像变分去噪方法与流程

本发明属于数字图像处理技术领域&#xff0c;具体涉及一种基于总曲率的SAR图像变分去噪方法。背景技术&#xff1a;&#xff1a;相干斑噪声是合成孔径雷达(Synthetic Aperture Radar&#xff0c;简称SAR)图像的重要特征&#xff0c;严重影响SAR图像的可解译性。相干斑噪声通常作…

课时2.浏览器和服务器(了解)

1.什么是浏览器&#xff1f; 浏览器就是由安装在我们电脑上的一款软件&#xff0c;QQ&#xff0c;百度影音等一样&#xff0c;都是安装在电脑上的一款软件 那这些软件之间由什么区别呢&#xff1f; 它们的区别就是它们的功能不太一样&#xff0c;QQ是用来聊天的&#xff0c;…

python 定义变量_用python解决动态的定义变量名(并给其赋值方法:大数据处理)...

前言&#xff1a;今天为大家带来的内容是&#xff1a;用python解决动态的定义变量名(并给其赋值方法&#xff1a;大数据处理)具有很好的参考价值&#xff0c;希望对大家有所帮助。喜欢本文内容的记得点赞转发收藏不迷路哦&#xff01;&#xff01;&#xff01;最近消费kafka数据…

课时39.细线表格(理解)

请你设计出以下图片里的这个样式的表格 步骤&#xff1a; 我先来制作一个两行两列的表格 2.将table里的cellspacing设置成0 外边距是不见了&#xff0c;但是和我们想要完成的图片有一定的差距&#xff0c;我们发现这样做出来的图片好像是两条线合并到了一起一样&#xff0c;实…

matlab拼碎纸片过程,碎纸片拼接复原模型

1. 引言破碎文件的拼接在司法物证复原、历史文献修复以及军事情报获取等领域都有着重要的应用。企事业、机关、院校和军队基于保密的需要&#xff0c;使用碎纸机对重要文件&#xff0c;单据以及材料进行销毁。一些重要的文件随着时间流逝&#xff0c;残破不全&#xff0c;因此&…