利用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

	页面效果


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


	 


	正常游戏时


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


	 
                                        				                
                    

                        

                            
相关文章
                        
                        

                            
                                                                                        
                                                                                                

                                        逃离鸭科夫结局有几个 结局0和结局1达成条件一览
                                        12-16
                                    
                                                                    

                                        学信网官网登录入口-高等教育学历查询官方通道
                                        12-16
                                    
                                                                    

                                        失控进化预约入口官网 预约地址及预约奖励一览
                                        12-16
                                    
                                                                    

                                        网页版邮箱登录入口全攻略及实用技巧大全
                                        12-16
                                    
                                                                    

                                        学习通网页版访问线路升级-一键直达课程界面更快捷
                                        12-16
                                    
                                                                    

                                        光与影33号远征队持久强力符文：符文持久强力的作用及获取方式详解
                                        12-16