利用js+canvas实现扫雷游戏代码示例

本篇文章小编给大家分享一下利用js+canvas实现扫雷游戏代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

记录js学习后制作的第一关小游戏。

这里的代码还不够精简，许多地方偷懒没有封装，逻辑也有许多可以优化。

 
    胜利条件,找出所有地雷并标记
    

        
地雷数量必须小于地图大小xy的平方
        
 
        地图大小xy : 
        booNum:
        
        
 1. 输入宽度 
2. 输入地雷数（地雷数小于宽*宽） 
 3. 单击确定  

        鼠标右键:

        第一次：标记您的猜测

        第二次: 取消标签

    
    

 
    
    
    
    
    

lei.js

/* 一个自定义原型数组方法  可以放到html里
二维数组查找
arr:要找数组第一第二项 找到返回下标，没有返回-1
PS：只要this数组和arr数组第一第二项的值相等，即为找到。
*/
Array.prototype.myindexOf = function(arr){
    for(let i=0;i{
        if(this.booArrs.length ==this.markArrs.length){
            for(let i=0;i{
                    return this.markArrs.myindexOf(this.booArrs[i])!=-1;
                })){
                   this.booNum--;
                }
                if(this.booNum==0){
                    clearInterval(this.tim);
                    alert('you are win');
                    }
            }
        }
    },10)
 
   }
   isboo(ctx,x,y,booArrs,numArrs,markArrs,xyNum){
       new Isboo(ctx,x,y,booArrs,numArrs,markArrs,xyNum);
   }
 
 
    /*标记 
    */
   markObs(x,y){  
       console.log(x,y);
    new MarkObs(this.ctx,x,y,this.booArrs,this.divw,this.markArrs);
    
 
   }
 
   
}

isboo.js

Array.prototype.myindexOf = function(arr){
    for(let i=0;i=0)&&(markArrs.myindexOf([x,y])==-1)){
            ctx.clearRect(x*21,y*21,20,20);
            x-=1;
            // this.isbool(ctx,x,y,booArrs,numArrs,markArrs,xyNum);
            this.isboor(ctx,x,y,booArrs,numArrs,markArrs,xyNum);
            this.isboot(ctx,x,y,booArrs,numArrs,markArrs,xyNum);
            this.isboob(ctx,x,y,booArrs,numArrs,markArrs,xyNum);
        }else {
            return ;
        }
    }
    isboot(ctx,x,y,booArrs,numArrs,markArrs,xyNum){
        if((numArrs.myindexOf([x,y])==-1)&&(y=0)&&(markArrs.myindexOf([x,y])==-1)){
            ctx.clearRect(x*21,y*21,20,20);
            y-=1;
            // this.isbool(ctx,x,y,booArrs,numArrs,markArrs,xyNum);
            // this.isboor(ctx,x,y,booArrs,numArrs,markArrs,xyNum);
            // this.isboot(ctx,x,y,booArrs,numArrs,markArrs,xyNum);
            this.isboob(ctx,x,y,booArrs,numArrs,markArrs,xyNum);
        }else {
            return ;
        }
    }
 
}

MarkObs.js

Array.prototype.myindexOf = function(arr){
    for(let i=0;i

	页面效果


	初始化障碍物设置了透明度时


	 


	正常游戏时


	这里点击右键标记后忘了把填充颜色设置回来。所以后面变红。