jquery开发如何制作随机弹跳的小球特效

程序员文章站 2022-06-13 19:30:06

jquery开发如何制作随机弹跳的小球特效以下是：

<!doctype html>
<html>
<head>
<title>html5 随机弹跳的小球</title>
<style>
body{
font-family: 微软雅黑;
}
body,h1{
margin:0;
}
canvas{
display:block;margin-left: auto;margin-right: auto;
border:1px solid #ddd;
background: -webkit-linear-gradient(top, #222,#111);
}
</style>
</head>
<body>
<h1>html5特效随机弹跳的小球</h1>
<p>请使用支持html5的开打本页。 <button id="stop-keleyi-com">暂停</button>
<button id="run-keleyi-com">继续</button>
<button id="addball-keleyi-com">增加小球</button> <button onclick="javascript：window.location.reload();">刷新</button>
<br />每次刷新页面的小球大小，颜色，运动路线，都是新的，可以点击上面各个按钮看看效果。
</p>
<canvas id="canvas-keleyi-com" >
</canvas>
<script type="text/javascript" src="https://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var nimo = {
aniamted: null,
content: null,
data: {
radiusrange: [5, 20],
speedrange: [-5, 5],
scrollheight: null,
scrollwdith: null
},
balls: [],
ele: {
canvas: null
},
fn: {
creatrandom: function (startint, endint) {//生产随机数
var iresult;
iresult = startint + (math.floor(math.random() * (endint - startint + 1)));
return iresult
},
init: function () {
nimo.data.scrollwdith = document.body.scrollwidth;
nimo.data.scrollheight = document.body.scrollheight;
nimo.ele.canvas = document.getelementbyid('canvas-ke'+'leyi-com');
nimo.content = nimo.ele.canvas.getcontext('2d');
nimo.ele.canvas.width = nimo.data.scrollwdith - 50;
nimo.ele.canvas.height = nimo.data.scrollheight - 100;
},
addball: function () {
var arandomcolor = [];
arandomcolor.push(nimo.fn.creatrandom(0, 255));
arandomcolor.push(nimo.fn.creatrandom(0, 255));
arandomcolor.push(nimo.fn.creatrandom(0, 255));
var irandomradius = nimo.fn.creatrandom(nimo.data.radiusrange[0], nimo.data.radiusrange[1]);
var otempball = {
coordsx: nimo.fn.creatrandom(irandomradius, nimo.ele.canvas.width - irandomradius),
coordsy: nimo.fn.creatrandom(irandomradius, nimo.ele.canvas.height - irandomradius),
radius: irandomradius,
bgcolor: 'rgba(' + arandomcolor[0] + ',' + arandomcolor[1] + ',' + arandomcolor[2] + ',0.5)'
};
otempball.speedx = nimo.fn.creatrandom(nimo.data.speedrange[0], nimo.data.speedrange[1]);
if (otempball.speedx === 0) {
otempball.speedx = 1
}
if (otempball.speedy === 0) {
otempball.speedy = 1
}
otempball.speedy = nimo.fn.creatrandom(nimo.data.speedrange[0], nimo.data.speedrange[1]);
nimo.balls.push(otempball)
},
drawball: function (bstatic) {
var i, isize;
nimo.content.clearrect(0, 0, nimo.ele.canvas.width, nimo.ele.canvas.height)
for (var i = 0, isize = nimo.balls.length; i < isize; i++) {
var otarger = nimo.balls[i];
nimo.content.beginpath();
nimo.content.arc(otarger.coordsx, otarger.coordsy, otarger.radius, 0, 10);
nimo.content.fillstyle = otarger.bgcolor;
nimo.content.fill();
if (!bstatic) {
if (otarger.coordsx + otarger.radius >= nimo.ele.canvas.width) {
otarger.speedx = -(math.abs(otarger.speedx))
}
if (otarger.coordsx - otarger.radius <= 0) {
otarger.speedx = math.abs(otarger.speedx)
}
if (otarger.coordsy - otarger.radius <= 0) {
otarger.speedy = math.abs(otarger.speedy)
}
if (otarger.coordsy + otarger.radius >= nimo.ele.canvas.height) {
otarger.speedy = -(math.abs(otarger.speedy))
}
otarger.coordsx = otarger.coordsx + otarger.speedx;
otarger.coordsy = otarger.coordsy + otarger.speedy;
}
}
},
run: function () {
nimo.fn.drawball();
nimo.aniamted = settimeout(function () {
nimo.fn.drawball();
nimo.aniamted = settimeout(arguments.callee, 10)
}, 10)
},
stop: function () {
cleartimeout(nimo.aniamted)
}
}
}
window.onload = function () {
nimo.fn.init();
var i;
for (var i = 0; i < 10; i++) {
nimo.fn.addball();
}
nimo.fn.run();
document.getelementbyid('stop-kel'+'eyi-com').onclick = function () {
nimo.fn.stop()
}
document.getelementbyid('run-keley'+'i-com').onclick = function () {
nimo.fn.stop()
nimo.fn.run()
}
document.getelementbyid('addball-k'+'eleyi-com').onclick = function () {
var i;
for (var i = 0; i < 10; i++) {
nimo.fn.addball();
}
nimo.fn.drawball(true);
}
}
</script>
</body>
</html>

上一篇：为什么我做了这么多的网站都没赚到钱

下一篇：有什么好方法防止自己网页的内容被采集

jquery开发如何制作随机弹跳的小球特效