<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5学习第5天[乱撞的球]</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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.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>