</pre>第一次代码<p></p><p></p><p>js</p><p><pre name="code" class="javascript">(function(){
var Model=function(canvas){
var me=this;
me.canvas=canvas;
me.context=canvas.getContext('2d');
me.puppleArr=[];
me.puppleNum=500;
for(var i=0;i<me.puppleNum;i++){
me.puppleArr.push(me.genPupple());
}
me.draw();
}
/**
* 绘制泡泡
*/
Model.prototype.draw=function(){
var me=this;
foo();
function foo(){
me.context.clearRect(0,0,me.canvas.width,me.canvas.height);
for(var i=0;i<me.puppleNum;i++){
var o=me.puppleArr[i];
me.context.fillStyle='rgba('+o.r+','+o.g+','+o.b+','+o.a+')';
me.context.beginPath();
me.context.arc(o.x,o.y,o.radius,0,360,false);
me.context.fill();
me.context.closePath();
//改变x y
o.x+=o.v*0.03*Math.cos(o.angle);
o.y+=o.v*0.03*Math.sin(o.angle);
//改变透明度 大于等于 则产生新的泡泡
o.a+=0.01;
if(o.a>=1){
me.puppleArr[i]=me.genPupple();
}
}
setTimeout(foo,30);
}
}
/**
* 产生泡泡
*/
Model.prototype.genPupple=function(){
return {
//半径
radius:( (Math.random()*10) | 0)||1,
//红
r:Math.random()*256|0,
//绿
g:Math.random()*256|0,
//蓝
b:Math.random()*256|0,
//透明度
a:Math.random(),
//x坐标
x:this.canvas.width/2,
//y坐标
y:this.canvas.height/2,
//速度
v:Math.random()*100,
//运动方向角
angle:Math.random()*2*Math.PI
}
}
window.Pupple=Model;
}());
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/index.js" ></script>
</head>
<body>
<canvas width='500' height='500'></canvas>
</body>
<script>
new Pupple(document.querySelector('canvas'));
</script>
</html>
第二周学习代码
先见一个目录2,再在目录2里面建一个目录js ,目录js里面再建一个javascript文件 index.js ,目录2里面再建一个html文件 index.html
index.js代码
(function(){
var Model=function(canvas){
var me=this;
me.canvas=canvas;
me.context=canvas.getContext('2d');
me.blockArr=[];
me.drawGrid();
me.drawBlock();
}
/**
* 绘制网格
*/
Model.prototype.drawGrid = function(){
var me=this;
var ctx=me.context;
var width=me.canvas.width/4;
var height=me.canvas.height/6;
//绘制横线
ctx.fillStyle="#000000";
for(var i=0;i<5;i++){
var y=(i+1)*height;
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(me.canvas.width,y);
ctx.stroke();
ctx.closePath();
}
for(var i=0;i<3;i++){
var x=(i+1)*width;
ctx.beginPath();
ctx.moveTo(x,0);
ctx.lineTo(x,me.canvas.height);
ctx.stroke();
ctx.closePath();
}
}
/**
* 绘制黑块
*/
Model.prototype.drawBlock=function(){
var me=this;
var ctx=me.context;
var width=me.canvas.width/4;
var height=me.canvas.height/6;
ctx.fillStyle="#000000";
for(var i=0;i<6;i++){
var y=i*height;
//列索引
var index=(Math.random()*4)|0;
//列索引存储在数组中
me.blockArr[i]=index;
var x=index*width;
ctx.fillRect(x,y,width,height);
}
}
/**
*判断是否为黑块
*/
/*
Model.prototype.checkBlock()=function(x,y){
var me=this;
var width=me.canvas.width/4;
var height=me.canvas.height/6;
var col=(x/width)|0;
var row=(y/height)|0;
return me.blockArr[row]===col;
}
*/
//暴露model
window.WhiteBlock=Model;
}());
index.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/index.js" ></script>
</head>
<body>
<canvas width="400" height="600" style="border:1px solid #000000;"></canvas>
</body>
<script>
new WhiteBlock(document.querySelector('canvas'));
</script>
</html>