JS method to achieve the special effect of random collision of colored balls

JS method to achieve the special effect of random collision of colored balls_javascript skills

WBOY

Release： 2016-05-16 16:01:06

Original

1224 people have browsed it

The example in this article describes the method of implementing random collision of colorful balls with JS. Share it with everyone for your reference. The specific implementation method is as follows:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS实现的随机乱撞的彩色圆球特效代码</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>JS实现的随机乱撞的彩色圆球特效代码</h1>
<canvas id="canvas" >
</canvas>
<button id="stop">stop</button>
<button id="run">run</button>
<button id="addBall">addBall</button>
<script src="jquery-1.6.2.min.js"></script>
<script>
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'); 
  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').onclick=function(){
 nimo.fn.stop()
 }
 document.getElementById('run').onclick=function(){
 nimo.fn.stop()
 nimo.fn.run()
 }
 document.getElementById('addBall').onclick=function(){
 var i;
 for(var i=0;i<10;i++){
  nimo.fn.addBall(); 
 }
 nimo.fn.drawBall(true);
 }
}
</script>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.