jquery制作 随机弹跳的小球特效
宋飞舟
本文向大家介绍jquery制作 随机弹跳的小球特效，包括了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>
<div>请使用支持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 />每次刷新页面的小球大小，颜色，运动路线，都是新的，可以点击上面各个按钮看看效果。
</div>
<canvas id="canvas-keleyi-com" >
</canvas>
<script type="text/javascript" src="http://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>
类似资料：
-
问题内容： 因此，我只是想使屏幕周围的球弹起，该球应由于重力而减慢，并像普通球一样从墙壁反射（弹起）。有人可以给出一些基础知识并且非常简单地实现吗？其他示例似乎有些“过高”，似乎超出了我想要做的事情。我已经试过了： 这是我一个人得到的最接近的东西。顺便说一下，x和y值来自加速度计。任何帮助将不胜感激，谢谢！ 问题答案： 我认为您将需要三件事，即力（您拥有的x和y），速度（分别称为xVel和yVel
-
提前感谢帮助我创建了一个程序，使多个弹跳球当用户点击屏幕上一个新的球应该出现并在屏幕上移动。但是当我点击屏幕上一个球出现，根本不移动。当另一个点击发生时，以前创建的球立即跳到另一个位置。 这是ball类：用于创建球 这是一个ball组件类：用于创建面板
-
我正在创建一个弹跳球项目，每次点击鼠标时，都会以随机的速度、随机的大小和随机的位置生成弹跳球，除了一件事，一切都很完美，当球从顶部和左侧撞击墙壁时，它会完全反弹，但是当球撞击窗户的底部和右侧时，它们也会反弹，但不是完全反弹，我的意思是，球在撞击墙壁之前会从窗户的右侧反弹，当球超过窗户的一半时，会从底部反弹。问题是什么，为什么要这样做？ 下面是代码：
-
本文向大家介绍python3.6使用tkinter实现弹跳小球游戏，包括了python3.6使用tkinter实现弹跳小球游戏的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了python3.6实现弹跳小球游戏的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍原生js结合html5制作小飞龙的简易跳球，包括了原生js结合html5制作小飞龙的简易跳球的使用技巧和注意事项，需要的朋友参考一下 演示地址:http://runjs.cn/detail/yjpvqhal html代码 演示图片 以上所述就是本文的全部代码，希望大家能够喜欢。
-
本文向大家介绍python3实现弹弹球小游戏，包括了python3实现弹弹球小游戏的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了python3实现弹弹球小游戏的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。