利用js+canvas實現掃雷遊戲

Posted on by

本文實例為大傢分享瞭用js+canvas實現掃雷遊戲的具體代碼，供大傢參考，具體內容如下

記錄js學習後制作的第一關小遊戲。

這裡的代碼還不夠精簡，許多地方偷懶沒有封裝，邏輯也有許多可以優化。

<body>
 
    勝利條件,找出所有地雷並標記
    <form action="javaScript:createContent()">
        <div id="message" style="color: red; display: none;">地雷數量必須小於地圖大小xy的平方</div>
        <br /> 
        地圖大小xy :<input id="xyNum" type="number" required="true" name="points" min="1" max="50"  /> 
        booNum:<input id="booNum" type="number" required="true" name="points" min="1" max="2500"/>
        <input type="submit" value="OK" : />
        <br /> 1. 輸入寬度 <br />2. 輸入地雷數（地雷數小於寬*寬） <br /> 3. 單擊確定  <br />
        鼠標右鍵:<br />
        第一次：標記您的猜測<br />
        第二次: 取消標簽<br />
    </form>
    <div id= 'game'>
 
    </div>
    <script src="./js/MarkObs.js"></script>
    <script src="./js/Isboo.js"></script>
    <script src="./js/lei.js"></script>
    <script>
    let xy = document.getElementById('xyNum');
    let boo = document.getElementById('booNum');
    let meg = document.getElementById("message");
    let div = document.getElementById('game');
 
    //獲取輸入的寬高和地雷數
    createContent = function (){
            // console.log(xy.value);
            // console.log(boo.value);
            let xyNum = xy.value; 
            let booNum = boo.value; 
            // console.log(Math.pow(xyNum,2));
            
            //判斷輸入是否合法
            if(Math.pow(xyNum,2)<boo.value){
                meg.style.display = 'block';
            }
            else {//繪制地圖
                div.innerHTML = '';//清除上次div裡的地圖
                let game = new Game('game',xyNum,booNum);
            }
        }
    </script>
</body>

lei.js

/* 一個自定義原型數組方法  可以放到html裡
二維數組查找
arr:要找數組第一第二項 找到返回下標，沒有返回-1
PS：隻要this數組和arr數組第一第二項的值相等，即為找到。
*/
Array.prototype.myindexOf = function(arr){
    for(let i=0;i<this.length;i++){
        
        if((this[i][0] == arr[0]) &&(this[i][1]==arr[1])){
            return i;
        }
    }
    return -1;
}
/*
初始化地雷圖
id:傳入繪制地圖的容器id
xyNum:長||寬的格子數（地圖固定正方形）
booNum:地雷數
*/ 
class Game {
    constructor(id,xyNum,booNum){
        this.xyNum = xyNum;
        this.booNum = booNum;
        this.id = id;
 
        this.booArrs = [];//保存雷的位置
        this.boox = -1;//地雷在x軸第幾個塊
        this.booy = -1;//地雷在x軸第幾個塊
 
        this.numArrs = [];//保存提醒數字的位置以及數字
        this.num = 0;//保存找到的提醒數字的個數
 
        this.markArrs = [];//保存標記位置的數組
 
        //單個塊的寬高
        this.divw = 20;
 
        // 初始化畫佈
        this.initCanvas(xyNum);
        // 初始化地雷位置（地雷用-1代替，圖片繪制麻煩）
        this.initBooxy(xyNum,booNum);
        // 初始化遮擋物
        this.initObs(xyNum);
 
        //判斷是否勝利
        this.win();
    
 
    }
    /*初始化畫佈（包括網格）
    xyNum:傳入需要繪制的寬格子數
    */ 
    initCanvas(xyNum){
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
        
        //1為border
        this.canvas.width = (this.divw+1)*xyNum;
        this.canvas.height = (this.divw+1)*xyNum;
 
        // 繪制網格坐標
                // 獲取canvas的寬高；
                let w = this.canvas.width;
                let h = this.canvas.height;
                // 繪制水平線
                for (let i = 1; i < h / 21; i++) {
                    this.ctx.beginPath();
                    this.ctx.lineTo(0,  21 * i) //起點
                    this.ctx.lineTo(w, 21 * i); //重點
                    this.ctx.stroke();
        
                }
                // h繪制垂直線
                for (let i = 1; i < w / 21; i++) {
                    this.ctx.beginPath();
                    this.ctx.lineTo(21 * i,0) //起點
                    this.ctx.lineTo(21 * i,h); //重點
                    this.ctx.stroke();
        
                }
                // ctx.stroke();
 
        // 放入容器
        this.div = document.getElementById(this.id);
        this.div.appendChild(this.canvas);
        
        // 綁定點擊事件!!!
        this.canvas.addEventListener('mousedown',this.mouseDown.bind(this))//!!!!註意需要更改this指向，用bind
        
        // 清除鼠標右鍵的默認事件 “contextmenu“
        this.canvas.addEventListener("contextmenu",function(event){
            event.preventDefault()
        })
    }
 
    /*初始化地雷（包括提醒數字）
    xyNum:傳入地圖的寬的格子數
    booNum:傳入地雷數
    */ 
    initBooxy (xyNum,booNum){
 
        // 隨機地雷位置 並保存起來
        for(let i=0;i<booNum;i++){
 
            // x,y為地雷所在格子坐標，從0開始
            this.boox = parseInt(Math.random()*xyNum);
            this.booy = parseInt(Math.random()*xyNum);
 
            //避免雷的位置重復
            while(this.booArrs.myindexOf([this.boox,this.booy])!=-1){
                this.boox = parseInt(Math.random()*xyNum);
                this.booy = parseInt(Math.random()*xyNum);
            }
 
            this.booArrs.push([this.boox,this.booy])//!!!保存地雷的位置
            console.log(i,'x:'+this.boox,'y:'+this.booy);
 
            //繪制地雷
            this.ctx.beginPath();//不清楚可不可以刪
            this.ctx.rect(this.boox*21,this.booy*21,20,20);
            this.ctx.fillStyle = 'red';
            this.ctx.fill();
        }
 
        // 繪制地雷位置周圍提醒數字
            // 這裡的邏輯可以優化，不提前繪制數字，在點擊清除障礙物後再判斷繪制。  
 
        /*
            想法一：在每個雷周圍添加數字1,如果在多個雷交集處累加
            想法二：所有塊依次判斷周圍是否有雷，有幾個雷，就fillText()多少
            想法三：（一二結合）先找每個雷，該雷周圍的8個塊依次 判斷周圍有幾個雷
        */ 
            // 這裡為法二
       for(let i=0;i<xyNum;i++){
           for(let j=0;j<xyNum;j++){
               let num = 0;//提醒數字 ,每次重置為0
            
                if(this.booArrs.myindexOf([i-1,j-1]) !=-1){
                    num++;
                }
                if(this.booArrs.myindexOf([i-1,j]) !=-1){
                    num++;
                }
                if(this.booArrs.myindexOf([i-1,j+1]) !=-1){
                    num++;
                }
                if(this.booArrs.myindexOf([i,j-1]) !=-1){
                    num++;
                }
                if(this.booArrs.myindexOf([i,j+1]) !=-1){
                    num++;
                }
                if(this.booArrs.myindexOf([i+1,j-1]) !=-1){
                    num++;
                }
                if(this.booArrs.myindexOf([i+1,j]) !=-1){
                    num++;
                }
                if(this.booArrs.myindexOf([i+1,j+1]) !=-1){
                    num++;
                }
               
                //繪制提醒數字  
                if(num!=0 && (this.booArrs.myindexOf([i,j]) ==-1 )){//(this.booArrs.myindexOf([i,j]) ==-1)地雷不標註提示數字若。要標註需要+1（本身）
 
                this.ctx.font = '18px fasdg'
                this.ctx.fillStyle = '#000'
                this.ctx.fillText(num,i*(this.divw+1)+2,(j+1)*(this.divw+1)-2);//加1和j+1為測試結果，-+2是為瞭文本在格子裡居中//y為文本中線坐標
                
                this.numArrs.push([i,j,num]);//i,j為提醒數字的塊坐標，num為裝數組裡的值（myindexOf來判斷）
                }
                // this.NUM = num;
           }
       }
        
 
        
    }
 
    /*初始化遮擋物
     xyNum:傳入地圖的寬的格子數
    */ 
   initObs(xyNum){
    for(let i=0;i<xyNum;i++){
        for(let j=0;j<xyNum;j++){
 
            this.ctx.beginPath();
            this.ctx.rect(i*21,j*21,20,20);
            // this.ctx.fillStyle = 'rgb(155,25,205,0.7)';//設置障礙物透明度可以方便查看雷的位置
            this.ctx.fillStyle = 'rgb(155,25,205,1)';//正常遊戲時透明度為'1‘
            this.ctx.fill();
        }
    }
   }
 
 
/*點擊事件在initCanvas中綁定*/  
   mouseDown(){
 
    //這裡使用preventDefault,默認事件被沒有消除,是因為觸發鼠標右鍵的默認事件的事件類型不是mousedown，是contextmenu
    // event.preventDefault(); //ie9以下不兼容 
    
    this.clix = Math.floor(event.layerX/( this.divw+1));//this.divw為20是塊的寬
    this.cliy = Math.floor(event.layerY/( this.divw+1)); 
 
    // 鼠標左鍵
    if(event.button==0){
        this.clearObs(this.clix,this.cliy);
 
 
    }
    
    // 鼠標右鍵
    else if(event.button==2){
        
        
        this.markObs(this.clix,this.cliy);
    }
   
   }
 
 
   /*掃雷*/  //這裡的代碼可以封裝一下 為瞭方便此處沒有封裝
   clearObs(x,y){
    // console.log(x,y);點擊坐標
 
    this.ctx.clearRect(x*21,y*21,20,20);//清除指定塊
    
    // 點擊到標記,點擊到提醒數字,點擊到地雷,點擊到空白,
    if(this.markArrs.myindexOf([x,y])!=-1){  //點擊到標記，重新覆蓋
        this.ctx.rect(x*21,y*21,20,20);
        this.ctx.fillStyle = 'rgb(155,25,205,1)';
        this.ctx.fill();
        
        this.ctx.beginPath();
        this.ctx.fillStyle = 'red';
        this.ctx.fillText('?',x*(this.divw+1)+2,(y+1)*(this.divw+1)-2);
        this.ctx.fill();
 
    }
    else if(this.numArrs.myindexOf([x,y])!=-1){//點擊到提醒數字
        let index = this.numArrs.myindexOf([x,y]);//下標
        let num = this.numArrs[index][2];//提醒數字
        this.ctx.fillText(num,x*(this.divw+1)+2,(y+1)*(this.divw+1)-2);//加1和j+1為測試結果，-+2是為瞭文本在格子裡居中//y為文本中線坐標
        this.num++;
    }
    else if(this.booArrs.myindexOf([x,y])!=-1){//,點擊到地雷,全部繪制
        console.log(this.booArrs.myindexOf([x,y]));
            //繪制全圖
            // 繪制提醒數字
            for(let i=0;i<this.xyNum;i++){
                for(let j=0;j<this.xyNum;j++){
                    let num = 0;//提醒數字 ,每次重置為0
                     // if(booArrs.indexof([i-1,j-1]) != -1){//數組是對象這樣永遠-1
                     this.ctx.clearRect(i*21,j*21,20,20);
                     if(this.booArrs.myindexOf([i-1,j-1]) !=-1){
                         num++;
                     }
                     if(this.booArrs.myindexOf([i-1,j]) !=-1){
                         num++;
                     }
                     if(this.booArrs.myindexOf([i-1,j+1]) !=-1){
                         num++;
                     }
                     if(this.booArrs.myindexOf([i,j-1]) !=-1){
                         num++;
                     }
                     if(this.booArrs.myindexOf([i,j+1]) !=-1){
                         num++;
                     }
                     if(this.booArrs.myindexOf([i+1,j-1]) !=-1){
                         num++;
                     }
                     if(this.booArrs.myindexOf([i+1,j]) !=-1){
                         num++;
                     }
                     if(this.booArrs.myindexOf([i+1,j+1]) !=-1){
                         num++;
                     }
                     
     
                    
                     //繪制提醒數字
                     if(num!=0 && (this.booArrs.myindexOf([i,j]) ==-1 )){//(this.booArrs.myindexOf([i,j]) ==-1)地雷不標註提示數字若要標註需要+1（本身）
     
                     this.ctx.font = '18px fasdg'
                     this.ctx.fillStyle = '#000'
                     this.ctx.fillText(num,i*(this.divw+1)+2,(j+1)*(this.divw+1)-2);//加1和j+1為測試結果，-+2是為瞭文本在格子裡居中//y為文本中線坐標
                     
                     this.numArrs.push([i,j,num]);//i,j為提醒數字的塊坐標，num為裝數組裡的值（myindexOf來判斷）
                     }
                     // this.NUM = num;
                }
            }
            // 繪制地雷
            for(let i=0;i<this.booArrs.length;i++){
                this.ctx.fillStyle = 'red';
                this.ctx.rect(this.booArrs[i][0]*21,this.booArrs[i][1]*21,20,20);
                this.ctx.fill(); 
            }
            this.ctx.clearRect((this.xyNum-1)*21,(this.xyNum-1)*21,20,20);//每次最後一個都會變紅,不知道原因,此處專門刪除。
           
            alert('你驚動瞭雷雷');
 
            
    }
 
    else {
 
        this.isboo(this.ctx,x,y,this.booArrs,this.numArrs,this.markArrs,this.xyNum);
 
 
    } 
   }
 
   win (){//標記數組==地雷數組
    this.tim = setInterval(()=>{
        if(this.booArrs.length ==this.markArrs.length){
            for(let i=0;i<this.booNum;i++){
                
                if( true == this.booArrs.some(()=>{
                    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<this.length;i++){
        
        if((this[i][0] == arr[0]) &&(this[i][1]==arr[1])){
            return i;
        }
    }
    return -1;
}
/*
這裡解決點擊到空白格子時，把周圍的空白格一起顯示。此處的邏輯可以再優化.
ctx:佈局
x,點擊位置
y,點擊位置
booArrs:炸彈的位置數組
numArrs:提示數的位置
markArrs:標記的位置
*/ 
class Isboo {
    constructor(ctx,x,y,booArrs,numArrs,markArrs,xyNum){
        this.x = x;
        this.y = y;
        
        // 判斷有沒有提醒數字
        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);
    }
    isbool(ctx,x,y,booArrs,numArrs,markArrs,xyNum){
        if((numArrs.myindexOf([x,y])==-1)&&(x<xyNum)&&(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 ;
        }
    }
    isboor(ctx,x,y,booArrs,numArrs,markArrs,xyNum){
        if((numArrs.myindexOf([x,y])==-1)&&(x>=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<xyNum)&&(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 ;
        }
    }
    isboob(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<this.length;i++){
        
        if((this[i][0] == arr[0]) &&(this[i][1]==arr[1])){
            return i;
        }
    }
    return -1;
}
/*
ctx:佈局
x,點擊位置
y,點擊位置
booArrs:炸彈的位置數組
divw：各自寬度
markarrs：標記數組
*/ 
class MarkObs{
    constructor(ctx,x,y,booArrs,divw,markarrs){
        this.markObs(ctx,x,y,booArrs,divw,markarrs);
    }
 
    markObs(ctx,x,y,booArrs,divw,markarrs){
 
        if(markarrs.myindexOf([x,y])==-1){//如果標記數組裡沒有該地址，則標記，並添加進數組
        ctx.beginPath();
        ctx.fillStyle = 'red';
        ctx.fillText('?',x*(divw+1)+2,(y+1)*(divw+1)-2);
        markarrs.push([x,y]);
        }else {//如果標記數組裡有該地址，則取消標記，並從數組中刪除
            ctx.clearRect(x*(divw+1),y*(divw+1),divw,divw);
            ctx.beginPath();
            ctx.rect(x*21,y*21,20,20);
            ctx.fillStyle = 'rgb(155,25,205,1)';
            ctx.fill();
            markarrs.splice((markarrs.myindexOf([x,y])),1);
        }
    }
 
}

頁面效果

初始化障礙物設置瞭透明度時

正常遊戲時

這裡點擊右鍵標記後忘瞭把填充顏色設置回來。所以後面變紅。

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：