ccell = arr[ci][cj];
if(ccell.type==1){
count++;
}
}
//左
ci = i,cj = j-1,ccell;
if(cj >= 0){
ccell = arr[ci][cj];
if(ccell.type==1){
count++;
}
}
//设定周围雷的数量
cell.count=count;
if(count==0){//因为0那张图片下标用的9
count=9;
}
//更换图片
cell.image = this.imgObj[‘common’][count];
}
}
}
创建遮罩
//创建遮盖
Saolei.prototype.createOver=function(){
var image,img,sx=0,sy=0,sWidth=79,sHeight=79,dx=0,dy=0,dWidth=32,dHeight=32;
image = this.imgObj[‘common’][10];
var arr = this.gridArr;
for(var i=0;i<arr.length;i++){//行
this.overArr[i]=[];
for(var j=0;j<arr[i].length;j++){//列
dy = 45+i*dHeight;
dx = 25+j*dWidth;
img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
img.i=i,img.j=j;
this.renderArr.push(img);
this.overArr[i][j]=img;
}
}
}
创建计时和计数器
//创建计数和计时器
Saolei.prototype.createCount=function(){
//计时器
var x=115,y=382,content=0;
var text = new _.Text({
x:x,
y:y,
text:content,
font:‘26px ans-serif’,
textAlign:‘center’,
fill:true,
fillStyle:‘white’
});
this.renderArr.push(text);
this.timeCountObj=text;
x=222,y=382,content=this.leiCount;
var text = new _.Text({
x:x,
y:y,
text:content,
font:‘26px ans-serif’,
textAlign:‘center’,
fill:true,
fillStyle:‘white’
});
this.renderArr.push(text);
this.leiCountObj=text;
}
加入鼠标移动事件
//鼠标移动事件
Saolei.prototype.mouseMove=function(e){
if(this.endAnimate)return ;
var pos = _.getOffset(e);//获取鼠标位置
var isCatch=false;
if(this.reStartObj.isPoint(pos)){
this.el.style.cursor = ‘pointer’;//改为手状形态
}else{
this.el.style.cursor = ‘’;//改为普通形态
}
if(this.end)return ;//结束了已经
if(!isCatch){
//循环遮罩数组
var arr = this.overArr,cell;
for(var i=0;i<arr.length;i++){//行
for(var j=0;j<arr[i].length;j++){//列
cell = arr[i][j];
if(cell.isPoint(pos)&& !cell.open){//鼠标捕捉,被打开的同样不捕获
if(!cell.state){//打上标记的不做处理
cell.image= this.imgObj[‘common’][11];
}
}else{
if(!cell.state){//打上标记的不做处理
cell.image= this.imgObj[‘common’][10];
}
}
}
}
this.render();
}
}
加入鼠标点击事件
//鼠标点击事件
Saolei.prototype.mouseClick=function(e){
if(this.endAnimate)return ;//结束动画的时候不许点击
var pos = _.getOffset(e);//获取鼠标位置
if(this.reStartObj.isPoint(pos)){//重新开始被点击
this.restart();
return ;
}
if(this.end)return ;//结束了已经
//循环遮罩数组
var arr = this.overArr,cell,cellArr=this.gridArr;
for(var i=0;i<arr.length;i++){//行
for(var j=0;j<arr[i].length;j++){//列
cell = arr[i][j];
if(cell.isPoint(pos) && !cell.open){//鼠标捕捉,被打开的同样不捕获
if(!this.start){
doStart.call(this);
}
//移出当前对象
cell.open=true;//被打开
this.clearAssign(this.renderArr,cell);
//获取对应的格子对象
var item = cellArr[i][j];
if(item.type==1){//如果是雷,则显示爆炸动画并提示失败
this.boom(item);
}else{//如不是雷
if(item.count==0){//判断周围雷数量,如果是0则打开周围,并依次递归
this.openOver(cell.i,cell.j);
}
//判断是否达到胜利的条件
this.successOrNot();
}
}
}
}
this.render();
function doStart(){
this.start=true;
this.timmer = setInterval(function(){
this.timmerCount++;
this.timeCountObj.text=this.timmerCount;
this.render();
}.bind(this),1000);
}
}
成功判定1
未打开的数量与雷的数量相同
//判断是否成功
Saolei.prototype.successOrNot=function(cell){
var arr = this.overArr,cell,count=0;
for(var i=0;i<arr.length;i++){//行
for(var j=0;j<arr[i].length;j++){//列
cell = arr[i][j];
if(!cell.open){
count++;
}
}
}
if(count==this.leiSucCount){//未打开的数量和雷的数量一样,表示成功
this.end=true;
clearInterval(this.timmer);//清除计时器的定时任务
//打开所有的雷
this.openAllLei();
//显示成功表情(延时)
setTimeout(this.endShow.bind(this,‘suc’),100);
}
}
成功判定2
标记为雷(插旗)的数量与类总数相同
//判断是否成功 -根据插红旗
Saolei.prototype.successOrNot2=function(cell){
var arr = this.overArr,cell,count=0,gridArr = this.gridAr 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 r,item;
var count=0;
for(var i=0;i<arr.length;i++){//行
for(var j=0;j<arr[i].length;j++){//列
cell = arr[i][j];
if(cell.state==1){//红旗
item=gridArr[i][j];
if(item.type==1){//正好又是雷
count++;
}
}
}
}
if(count==this.leiSucCount){//未打开的数量和雷的数量一样,表示成功
this.end=true;
clearInterval(this.timmer);//清除计时器的定时任务
//打开所有的雷
this.openAllLei();
//显示成功表情(延时)
setTimeout(this.endShow.bind(this,‘suc’),100);
}
}
触雷效果
鼠标点击雷后,会触发雷爆炸的一个动画,这是通过图片的切换来实现的
//爆炸效果
Saolei.prototype.boom=function(cell){
this.end=true;
this.endAnimate=true;
clearInterval(this.timmer);//清除计时器的定时任务
//开启爆炸的动画
this.timmer = setInterval(this.boomAnimate.bind(this,cell),100)
}
//爆炸动画
Saolei.prototype.boomAnimate=function(cell){
//切换图片
cell.index = (cell.index || 0)+1;
if(cell.index>this.boomCount){
//结束动画
clearInterval(this.timmer);
//因为图片有些不一样,需要修正一下
cell.sWidth=79;
cell.sHeight=79;
cell.image= this.imgObj[‘common’][18];
//打开所有的雷
this.openAllLei();
//显示失败表情(延时)
setTimeout(this.endShow.bind(this),100);
this.endAnimate=false;
this.render();
return ;
}
//因为图片有些不一样,需要修正一下
cell.sWidth=61;
cell.sHeight=53;
cell.image= this.imgObj[‘boom’][cell.index];
this.render();
}
加入鼠标右键事件
此事件是做插旗或者标记为未知等操作的。
//右键事件
Saolei.prototype.contextMenu=function(e){
if(this.end)return ;//结束了已经
var e = e||window.event;
//取消右键默认事件
e.preventDefault && e.preventDefault();
var pos = _.getOffset(e);//获取鼠标位置
//循环遮罩数组
var arr = this.overArr,cell,cellArr=this.gridArr;
for(var i=0;i<arr.length;i++){//行
for(var j=0;j<arr[i].length;j++){//列
cell = arr[i][j];
if(cell.isPoint(pos) && !cell.open){//鼠标捕捉,被打开的同样不捕获
//右键切换
if(!cell.state){//如果是没有状态的,则标记为雷,小旗
cell.state=1;
cell.image= this.imgObj[‘common’][12];
this.leiCount–;
this.leiCountObj.text=this.leiCount;
//判断如果小旗数量和数据都对上了,也判断为成功
this.successOrNot2(cell);
}else if(cell.state==1){//如果状态为雷的,标记为未知,问号
cell.state=2;
cell.image= this.imgObj[‘common’][13];
this.leiCount++;
this.leiCountObj.text=this.leiCount;
}else if(cell.state==2){//如果状态为未知的,则现在原来的
cell.state=0;
cell.image= this.imgObj[‘common’][10];
}
}
}
}
this.render();
}