web学习(2)--别踩白块儿(js版)(web入门)

       废话不多说，就是一个简单的网页版的别踩白块儿 (踩到白块会弹出窗口，手动点击确定才能继续游戏，达到耗费你的游戏时间的目的)

HTML:（注意js文件的名字和所放位置，如果和我命名的不一样，注意在第六行修改）

	
		
		
		    
		
	
	
		开始游戏     
		
时间： 秒
    
		 
		
	

JavaScript:

var Model=function(canvas,timer_dash){   //传参
	var me=this;
	me.canvas=canvas;
	me.context=canvas.getContext('2d');
	me.time_dash=timer_dash;
	
	me.bricks=new Array();      //砖块数组
	me.cols=4;                   //4列
	me.rows=6;                    //6排
	me.brickWidth=me.canvas.width/me.cols;
	me.brickHeight=me.canvas.height/me.rows;
	me.clickBrick();            //点击砖块
}

Model.prototype.Draw=function(){             //画
	var me=this;
	
	me.context.clearRect(0,0,me.canvas.width,me.canvas.height);
	me.drawGrid();          //画出方格
	me.drawBricks();        //画出砖块
}


Model.prototype.Start=function(){     //开始游戏
	var me=this;
	
	me.totalRows=10;                     //总的砖块数  可以设置几十个甚至几百个  如果你无聊的话==
	me.startTime=new Date();           //记录游戏开始时间
	me.interval=setInterval(function(){         //每110ms循环调用函数 （显示时间）
		var timerTxt=new Date()-me.startTime;        //现在时间减去开始时间等于显示的时间
		timerTxt=(timerTxt/1000|0)+'.'+(timerTxt%1000|0);    //自动转换成字符串
		me.time_dash.innerHTML=timerTxt;                     
	},110);
	me.initBricks();       //初始化砖块
	me.Draw();
}


Model.prototype.drawGrid=function(){  //画出方格
	var me =this;
	var ctx=me.context;
	
	ctx.beginPath();
	for(var i=1;i=me.rows){
				me.bricks.unshift(Math.random()*me.cols|0);        //往砖块数组头部添加
			}
			else me.bricks.unshift(-1);                //-1表示这一排没有砖块
			if(me.totalRows===0){
				alert('恭喜你通关了! 你用了 ' 
				+ (new Date() - me.startTime)/1000 + ' 秒。');
				clearInterval(me.interval);          //取消由 setInterval()设置的timeout  参数必须是由 setInterval()返回的ID值
			}
			me.Draw();
		}
	})
}
window.Brick=Model;