java小球碰撞界面设计_JavaScript实现小球碰撞特效
JavaScript实现小球碰撞特效。类似自由落体运动。实现原理非常简单,就是动态的改变每个元素的坐标。使用radius属性将图片圆角化。使用left,top属性动态的改变小球的位置。碰撞反弹球,当碰撞到容器的边缘后,进行反弹,反向改变坐标。
首先创建Screen类,并在Screen的构造函数中给出了球移动、碰撞所需的各种属性变量,如ballsnum、spring、bounce、gravity等等 然后用原型prototype给出相应的函数,如创建球,createBalls,球碰撞hitBalls,球移动moveBalls,给每个函数添加相应的功能、
最后用按钮点击事件调用函数,仅此而已。只是我这里把点击的效果注释掉了,直接刷新页面就会随机改变。
运行效果如下:
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);
}
}
看起来很简单吧!
java小球碰撞界面设计_JavaScript实现小球碰撞特效相关推荐
- Java图形化界面设计——容器(JFrame)
Java图形化界面设计--容器(JFrame) 程序是为了方便用户使用的,因此实现图形化界面的程序编写是所有编程语言发展的必然趋势,在命令提示符下运行的程序可以让我们了解java程序的基本知识体系结构 ...
- java 网格布局管理器,Java图形化界面设计——布局管理器之GridLayout(网格布局)...
网格布局特点: l 使容器中的各组件呈M行×N列的网格状分布. l 网格每列宽度相同,等于容器的宽度除以网格的列数. l 网格每行高度相同,等于容器的高度除以网格的行数. l 各组件的排列方式 ...
- Java 图形化界面设计(GUI)实战练习(代码)
关于Java图形化界面设计,基础知识网上可搜,下面简单介绍一下重点概念,然后就由浅入深代码实例. 程序是为了方便用户使用的,Java引入图形化界面编程. 1.JFrame 是容器类 2.AWT 是抽象 ...
- java怎么做界面设计_11-Java 界面设计
(一)Java界面设计概述 1.Java 界面设计的用途 2.AWT 简介 (1)Abstract Windows Toolkit 是最原始的工具包. 3.Swing 简介 4.SWT 简介 5.如何 ...
- Java信息管理系统界面设计(包括登录界面及界面切换)
Java学生成绩管理系统界面设计(包括登录界面及界面切换),内含学生成绩管理系统各用户应有功能模块设计. 登录界面 package Panel; import java.awt.*; import j ...
- java界面设计 代码_Android开发——纯JAVA代码方式界面设计
之前我们写Android页面都是在XML文件里写的,今天我们换个口味,在JAVA文件里写我们的Android页面.至于为什么要用java来写,不直接在XML文件里写,这个问题的答案很简单,因为麻烦嘛, ...
- Java——速学界面设计之仿Windows记事本的字体窗口
通过这学期伍老师的教学以及布置的作业之猜数字和计算器,对Java的界面设计颇为感兴趣,基于此,我就想做点更有意思的东西,所以仿照Windows字体窗口的设计做了一点点东西,中间出现了许多为本人也是新学 ...
- Java小型图形界面设计(银行卡类)
最近要写一个关于java的实验,实验内容如下: 1.定义一个抽象的银行卡类,含有基本属性,并定义有关的处理方法,且分别定义含有借记卡.信用卡类的方法.并定义一个透支接口,信用卡可以透支. 2设计取款. ...
- Java图形化界面设计——GridBagConstraints
JAVA布局模式:GridBagConstraints终极技巧参数详解 布局模式 :GridBagConstraints布局,先发一个实例: gridx = 2; // X2 gridy = 0; / ...
- 【Java】图形界面设计实战练习
图形化界面设计(GUI)实战练习 学生成绩管理系统实战练习之登陆界面 学生成绩管理系统 2.0(图形界面) 实例一 代码: package Gui;import javax.swing.*; impo ...
最新文章
- android uinput 按键_linux 虚拟输入设备(uinput)模拟鼠标和键盘的使用方法
- python模块 - re模块使用演示样例
- 能不做自己写个类,也叫java.lang.String
- 大白话5分钟带你走进人工智能 - 第二十一节 牛顿法和L-BFGS求函数最优解
- POJ 2942 Knights of the Round Table ★(点双连通分量+二分图判定)
- vue 删除两个集合中相同的数据_vue.js如何删除数组里面的数据
- C++ wstring 与 string 之间的相互转换.
- 框架学习 Spring之依赖注入DI
- java的创建管理员对象_java--更改管理员密码,请列位帮忙看看有没有更好的实现方式...
- 高中必背88个数学公式_俞敏洪:高中干货“必背”1920个固定搭配,英语稳上145分...
- Emlog文章海报插件
- 炫酷实用 7款jQuery/HTML5图片应用
- oc - runtime运行机制
- [SCOI2016]背单词
- 钟平逻辑英语语法_钟平逻辑英语教程视频1-5季全(含笔记 支持百度云)
- SurfaceTF卡设置为本地磁盘方法
- oracle 创建会话表,oracle临时会话表在存储过程中的使用
- 电脑端微信dat文件怎么打开
- 毕业论文 | 基于安卓手机蓝牙控制的智能小车设计(源代码)
- QGIS基础教程 (入门级)——下载安装、新建工程、加载数据