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>

赞 (0)

相关推荐

  • javascript制作游戏开发碰撞检测的封装代码

    javascript制作游戏开发碰撞检测的封装代码

    在JavaScript开发Web游戏时,需要使用到碰撞检测时,为了方便开发,封装了矩形和圆形的两个碰撞检测方式. [附带案例操作捕获一枚] [注意:代码上未做优化处理] 演示图 角色攻击区域碰撞检测.gif 塔防案例.gif 矩形区域碰撞检测 /** * 矩形区域碰撞检测 * Created by Administrator on 14-4-7. * author: marker */ function Rectangle(x, y, _width, _height){ this.x = x;

  • JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

    JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

    本文实例讲述了JS+CSS实现带有碰撞缓冲效果的竖向导航条代码.分享给大家供大家参考.具体如下: 这是一款碰撞缓冲效果的导航条,JavaScript妙味课堂奉献给大家的作品,很不错的竖向菜单,希望大家喜欢.所用技术是JS和CSS. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-pzxg-r-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

  • javascript实现10个球随机运动、碰撞实例详解

    本文实例讲述了javascript实现10个球随机运动.碰撞的方法.分享给大家供大家参考.具体如下: 学了一段时间的javascript了,做过一些小案例,目前最有难度的就是10个小球随机碰撞效果,这不,把它上上来与大家分享一下,相信不少和我一样的菜鸟在开始上手编程时都会有不少的困惑,希望它能给一些人带来帮助. 效果要求:10个小球在页面随机移动,碰到窗口边界或其他小球都会反弹 思路: 1.10个小球是10个div; 2.碰窗口反弹,定义vx vy为小球的移动变量,以及一个弹力变量bounce(

  • jQuery实现的分子运动小球碰撞效果

    jQuery实现的分子运动小球碰撞效果

    本文实例讲述了jQuery实现的分子运动小球碰撞效果.分享给大家供大家参考,具体如下: 先看效果图吧,因为小球是运动状态的,不好截图,这里就先大体画了一下路线,表示大体意思吧,如果想看真实的效果,自己粘贴下去运行: 小球有点小哟,嘿嘿,没有对细节进行详细的处理,如果像让它完美一点,自己处理下吧!这里是模拟的理想状态下的,没有摩擦力与组里的分子碰撞运动,高科技哟~~~~~~mu~a 代码也没有整理,如果有心的话,把它整理成面向对象形式的吧! 代码如下: <!DOCTYPE html PUBLIC

  • JS实现判断碰撞的方法

    本文实例讲述了JS实现判断碰撞的方法.分享给大家供大家参考.具体如下: JS判断碰撞方法: 复制代码 代码如下: /** 判断是否碰撞  * @param obj 原对象  * @param dobj 目标对象  */  function impact(obj, dobj) {      var o = {          x: getDefaultStyle(obj, 'left'),          y: getDefaultStyle(obj, 'top'),          w:

  • JavaScript拖拽、碰撞、重力及弹性运动实例分析

    本文实例讲述了JavaScript拖拽.碰撞.重力及弹性运动实现方法.分享给大家供大家参考,具体如下: js拖拽.碰撞与重力实现代码: window.onload=function () { var oDiv=document.getElementById('div1'); var lastX=0; var lastY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; var disX=oEvent.clientX-oDiv.of

  • 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

  • 基于jQuery制作小图标上下滑动特效

    基于jQuery制作小图标上下滑动特效

    一个小图标特效,挺有趣的,代码也很容易懂. jQ小图标上下滑动特效: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" href="css/normalize.css"> <style&

  • 基于JQuery制作可编辑的表格特效

    最近做了个项目,其中项目要求:点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑 2个小伙伴给出了2中解决方案,大家来看看哪种更合适呢? 第一种单击表格可以编辑的方法 复制代码 代码如下: //相当于在页面中的 body标签加上onload事件 $(function() {     //找到所有的td节点     var tds = $("td");     //给所有的td添加点击事件     tds.click(function() {        

  • jquery制作漂亮的弹出层提示消息特效

    jquery制作漂亮的弹出层提示消息特效

    今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 实现的代码. html代码: 复制代码 代码如下: <div class='b'>     </div>     <div class='bb'>     </div>     <button id='go'>         GO     </button>     <div cl

  • jquery制作图片时钟特效

    jquery制作图片时钟特效

    一.生成数字时钟 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> window.onload=function(){ var oBody=document.body; var oP=document.getElementById("time"); setInterval(fnTime,1000); fnTime(); function

  • jquery制作LED 时钟特效

    以下是HTML文件源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title

  • Jquery效果大全之制作电脑健康体检得分特效附源码下载

    Jquery效果大全之制作电脑健康体检得分特效附源码下载

    jquery制作电脑健康体检得分效果图如下所示,喜欢的朋友可以下载源码哦. 查看效果图       源码下载 文件引用: <script type="text/javascript" src="js/jquery-...min.js"></script> <script type="text/javascript"> var current = ; $(document).ready(function(){ $

  • jQuery+PHP实现动态数字展示特效

    HTML 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: 复制代码 代码如下: <div class="count">当前在线:<span id="number"></span></div> jQuery 首先我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,以下magi

  • jquery+php随机生成红包金额数量代码分享

    jquery+php随机生成红包金额数量代码分享

    本文实例讲述了jquery+php实现的随机生成红包金额数量特效.分享给大家供大家参考.具体如下: jquery+php实现的随机生成红包金额数量特效是一段实现了可以将一定金额的钱生成多个不同金额的红包的效果代码,红包数量与金钱可以自己设定. 运行效果图:                              -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery+ph

随机推荐