利用js+canvas實(shí)現(xiàn)掃雷游戲
更新時(shí)間：2022年06月08日 11:43:44 作者：白.恩
這篇文章主要為大家詳細(xì)介紹了利用js+canvas實(shí)現(xiàn)掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了用js+canvas實(shí)現(xiàn)掃雷游戲的具體代碼，供大家參考，具體內(nèi)容如下
記錄js學(xué)習(xí)后制作的第一關(guān)小游戲。
這里的代碼還不夠精簡(jiǎn)，許多地方偷懶沒(méi)有封裝，邏輯也有許多可以優(yōu)化。
<body>
?
? ? 勝利條件,找出所有地雷并標(biāo)記
? ? <form action="javaScript:createContent()">
? ? ? ? <div id="message" style="color: red; display: none;">地雷數(shù)量必須小于地圖大小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. 輸入地雷數(shù)（地雷數(shù)小于寬*寬） <br /> 3. 單擊確定 ?<br />
? ? ? ? 鼠標(biāo)右鍵:<br />
? ? ? ? 第一次：標(biāo)記您的猜測(cè)<br />
? ? ? ? 第二次: 取消標(biāo)簽<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');
?
? ? //獲取輸入的寬高和地雷數(shù)
? ? 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
/* 一個(gè)自定義原型數(shù)組方法 ?可以放到html里
二維數(shù)組查找
arr:要找數(shù)組第一第二項(xiàng) 找到返回下標(biāo)，沒(méi)有返回-1
PS：只要this數(shù)組和arr數(shù)組第一第二項(xiàng)的值相等，即為找到。
*/
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:長(zhǎng)||寬的格子數(shù)（地圖固定正方形）
booNum:地雷數(shù)
*/?
class Game {
? ? constructor(id,xyNum,booNum){
? ? ? ? this.xyNum = xyNum;
? ? ? ? this.booNum = booNum;
? ? ? ? this.id = id;
?
? ? ? ? this.booArrs = [];//保存雷的位置
? ? ? ? this.boox = -1;//地雷在x軸第幾個(gè)塊
? ? ? ? this.booy = -1;//地雷在x軸第幾個(gè)塊
?
? ? ? ? this.numArrs = [];//保存提醒數(shù)字的位置以及數(shù)字
? ? ? ? this.num = 0;//保存找到的提醒數(shù)字的個(gè)數(shù)
?
? ? ? ? this.markArrs = [];//保存標(biāo)記位置的數(shù)組
?
? ? ? ? //單個(gè)塊的寬高
? ? ? ? this.divw = 20;
?
? ? ? ? // 初始化畫(huà)布
? ? ? ? this.initCanvas(xyNum);
? ? ? ? // 初始化地雷位置（地雷用-1代替，圖片繪制麻煩）
? ? ? ? this.initBooxy(xyNum,booNum);
? ? ? ? // 初始化遮擋物
? ? ? ? this.initObs(xyNum);
?
? ? ? ? //判斷是否勝利
? ? ? ? this.win();
? ??
?
? ? }
? ? /*初始化畫(huà)布（包括網(wǎng)格）
? ? xyNum:傳入需要繪制的寬格子數(shù)
? ? */?
? ? 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;
?
? ? ? ? // 繪制網(wǎng)格坐標(biāo)
? ? ? ? ? ? ? ? // 獲取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) //起點(diǎn)
? ? ? ? ? ? ? ? ? ? this.ctx.lineTo(w, 21 * i); //重點(diǎn)
? ? ? ? ? ? ? ? ? ? this.ctx.stroke();
? ? ? ??
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // h繪制垂直線
? ? ? ? ? ? ? ? for (let i = 1; i < w / 21; i++) {
? ? ? ? ? ? ? ? ? ? this.ctx.beginPath();
? ? ? ? ? ? ? ? ? ? this.ctx.lineTo(21 * i,0) //起點(diǎn)
? ? ? ? ? ? ? ? ? ? this.ctx.lineTo(21 * i,h); //重點(diǎn)
? ? ? ? ? ? ? ? ? ? this.ctx.stroke();
? ? ? ??
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // ctx.stroke();
?
? ? ? ? // 放入容器
? ? ? ? this.div = document.getElementById(this.id);
? ? ? ? this.div.appendChild(this.canvas);
? ? ? ??
? ? ? ? // 綁定點(diǎn)擊事件!!!
? ? ? ? this.canvas.addEventListener('mousedown',this.mouseDown.bind(this))//!!!!注意需要更改this指向，用bind
? ? ? ??
? ? ? ? // 清除鼠標(biāo)右鍵的默認(rèn)事件 “contextmenu“
? ? ? ? this.canvas.addEventListener("contextmenu",function(event){
? ? ? ? ? ? event.preventDefault()
? ? ? ? })
? ? }
?
? ? /*初始化地雷（包括提醒數(shù)字）
? ? xyNum:傳入地圖的寬的格子數(shù)
? ? booNum:傳入地雷數(shù)
? ? */?
? ? initBooxy (xyNum,booNum){
?
? ? ? ? // 隨機(jī)地雷位置 并保存起來(lái)
? ? ? ? for(let i=0;i<booNum;i++){
?
? ? ? ? ? ? // x,y為地雷所在格子坐標(biāo)，從0開(kāi)始
? ? ? ? ? ? this.boox = parseInt(Math.random()*xyNum);
? ? ? ? ? ? this.booy = parseInt(Math.random()*xyNum);
?
? ? ? ? ? ? //避免雷的位置重復(fù)
? ? ? ? ? ? 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();
? ? ? ? }
?
? ? ? ? // 繪制地雷位置周?chē)嵝褦?shù)字
? ? ? ? ? ? // 這里的邏輯可以優(yōu)化，不提前繪制數(shù)字，在點(diǎn)擊清除障礙物后再判斷繪制。 ?
?
? ? ? ? /*
? ? ? ? ? ? 想法一：在每個(gè)雷周?chē)砑訑?shù)字1,如果在多個(gè)雷交集處累加
? ? ? ? ? ? 想法二：所有塊依次判斷周?chē)欠裼欣?，有幾個(gè)雷，就fillText()多少
? ? ? ? ? ? 想法三：（一二結(jié)合）先找每個(gè)雷，該雷周?chē)?個(gè)塊依次 判斷周?chē)袔讉€(gè)雷
? ? ? ? */?
? ? ? ? ? ? // 這里為法二
? ? ? ?for(let i=0;i<xyNum;i++){
? ? ? ? ? ?for(let j=0;j<xyNum;j++){
? ? ? ? ? ? ? ?let num = 0;//提醒數(shù)字 ,每次重置為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++;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? //繪制提醒數(shù)字 ?
? ? ? ? ? ? ? ? if(num!=0 && (this.booArrs.myindexOf([i,j]) ==-1 )){//(this.booArrs.myindexOf([i,j]) ==-1)地雷不標(biāo)注提示數(shù)字若。要標(biāo)注需要+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為測(cè)試結(jié)果，-+2是為了文本在格子里居中//y為文本中線坐標(biāo)
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? this.numArrs.push([i,j,num]);//i,j為提醒數(shù)字的塊坐標(biāo)，num為裝數(shù)組里的值（myindexOf來(lái)判斷）
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // this.NUM = num;
? ? ? ? ? ?}
? ? ? ?}
? ? ? ??
?
? ? ? ??
? ? }
?
? ? /*初始化遮擋物
? ? ?xyNum:傳入地圖的寬的格子數(shù)
? ? */?
? ?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)';//設(shè)置障礙物透明度可以方便查看雷的位置
? ? ? ? ? ? this.ctx.fillStyle = 'rgb(155,25,205,1)';//正常游戲時(shí)透明度為'1‘
? ? ? ? ? ? this.ctx.fill();
? ? ? ? }
? ? }
? ?}
?
?
/*點(diǎn)擊事件在initCanvas中綁定*/ ?
? ?mouseDown(){
?
? ? //這里使用preventDefault,默認(rèn)事件被沒(méi)有消除,是因?yàn)橛|發(fā)鼠標(biāo)右鍵的默認(rèn)事件的事件類(lèi)型不是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));?
?
? ? // 鼠標(biāo)左鍵
? ? if(event.button==0){
? ? ? ? this.clearObs(this.clix,this.cliy);
?
?
? ? }
? ??
? ? // 鼠標(biāo)右鍵
? ? else if(event.button==2){
? ? ? ??
? ? ? ??
? ? ? ? this.markObs(this.clix,this.cliy);
? ? }
? ?
? ?}
?
?
? ?/*掃雷*/ ?//這里的代碼可以封裝一下 為了方便此處沒(méi)有封裝
? ?clearObs(x,y){
? ? // console.log(x,y);點(diǎn)擊坐標(biāo)
?
? ? this.ctx.clearRect(x*21,y*21,20,20);//清除指定塊
? ??
? ? // 點(diǎn)擊到標(biāo)記,點(diǎn)擊到提醒數(shù)字,點(diǎn)擊到地雷,點(diǎn)擊到空白,
? ? if(this.markArrs.myindexOf([x,y])!=-1){ ?//點(diǎn)擊到標(biāo)記，重新覆蓋
? ? ? ? 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){//點(diǎn)擊到提醒數(shù)字
? ? ? ? let index = this.numArrs.myindexOf([x,y]);//下標(biāo)
? ? ? ? let num = this.numArrs[index][2];//提醒數(shù)字
? ? ? ? this.ctx.fillText(num,x*(this.divw+1)+2,(y+1)*(this.divw+1)-2);//加1和j+1為測(cè)試結(jié)果，-+2是為了文本在格子里居中//y為文本中線坐標(biāo)
? ? ? ? this.num++;
? ? }
? ? else if(this.booArrs.myindexOf([x,y])!=-1){//,點(diǎn)擊到地雷,全部繪制
? ? ? ? console.log(this.booArrs.myindexOf([x,y]));
? ? ? ? ? ? //繪制全圖
? ? ? ? ? ? // 繪制提醒數(shù)字
? ? ? ? ? ? for(let i=0;i<this.xyNum;i++){
? ? ? ? ? ? ? ? for(let j=0;j<this.xyNum;j++){
? ? ? ? ? ? ? ? ? ? let num = 0;//提醒數(shù)字 ,每次重置為0
? ? ? ? ? ? ? ? ? ? ?// if(booArrs.indexof([i-1,j-1]) != -1){//數(shù)組是對(duì)象這樣永遠(yuǎn)-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++;
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?
? ? ?
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ?//繪制提醒數(shù)字
? ? ? ? ? ? ? ? ? ? ?if(num!=0 && (this.booArrs.myindexOf([i,j]) ==-1 )){//(this.booArrs.myindexOf([i,j]) ==-1)地雷不標(biāo)注提示數(shù)字若要標(biāo)注需要+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為測(cè)試結(jié)果，-+2是為了文本在格子里居中//y為文本中線坐標(biāo)
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ?this.numArrs.push([i,j,num]);//i,j為提醒數(shù)字的塊坐標(biāo)，num為裝數(shù)組里的值（myindexOf來(lái)判斷）
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?// 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);//每次最后一個(gè)都會(huì)變紅,不知道原因,此處專(zhuān)門(mén)刪除。
? ? ? ? ? ?
? ? ? ? ? ? alert('你驚動(dòng)了雷雷');
?
? ? ? ? ? ??
? ? }
?
? ? else {
?
? ? ? ? this.isboo(this.ctx,x,y,this.booArrs,this.numArrs,this.markArrs,this.xyNum);
?
?
? ? }?
? ?}
?
? ?win (){//標(biāo)記數(shù)組==地雷數(shù)組
? ? 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);
? ?}
?
?
? ? /*標(biāo)記?
? ? */
? ?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;
}
/*
這里解決點(diǎn)擊到空白格子時(shí)，把周?chē)目瞻赘褚黄痫@示。此處的邏輯可以再優(yōu)化.
ctx:布局
x,點(diǎn)擊位置
y,點(diǎn)擊位置
booArrs:炸彈的位置數(shù)組
numArrs:提示數(shù)的位置
markArrs:標(biāo)記的位置
*/?
class Isboo {
? ? constructor(ctx,x,y,booArrs,numArrs,markArrs,xyNum){
? ? ? ? this.x = x;
? ? ? ? this.y = y;
? ? ? ??
? ? ? ? // 判斷有沒(méi)有提醒數(shù)字
? ? ? ? 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,點(diǎn)擊位置
y,點(diǎn)擊位置
booArrs:炸彈的位置數(shù)組
divw：各自寬度
markarrs：標(biāo)記數(shù)組
*/?
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){//如果標(biāo)記數(shù)組里沒(méi)有該地址，則標(biāo)記，并添加進(jìn)數(shù)組
? ? ? ? ctx.beginPath();
? ? ? ? ctx.fillStyle = 'red';
? ? ? ? ctx.fillText('?',x*(divw+1)+2,(y+1)*(divw+1)-2);
? ? ? ? markarrs.push([x,y]);
? ? ? ? }else {//如果標(biāo)記數(shù)組里有該地址，則取消標(biāo)記，并從數(shù)組中刪除
? ? ? ? ? ? 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);
? ? ? ? }
? ? }
?
}頁(yè)面效果
初始化障礙物設(shè)置了透明度時(shí)
正常游戲時(shí)
這里點(diǎn)擊右鍵標(biāo)記后忘了把填充顏色設(shè)置回來(lái)。所以后面變紅。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 2018 中即將迎來(lái)的新功能
JavaScript 2018 中即將迎來(lái)的新功能：異步生成器及更好的正則表達(dá)式。更多常規(guī)正則表達(dá)式功能大家跟隨小編一起通過(guò)本文學(xué)習(xí)吧2018-09-09
這篇文章主要介紹了JS數(shù)組的常用10種方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
詳解小程序開(kāi)發(fā)經(jīng)驗(yàn)：多頁(yè)面數(shù)據(jù)同步
這篇文章主要介紹了小程序開(kāi)發(fā)經(jīng)驗(yàn)：多頁(yè)面數(shù)據(jù)同步，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
js獲取多個(gè)tagname的節(jié)點(diǎn)數(shù)組
寫(xiě)了個(gè)獲取多個(gè)tagname節(jié)點(diǎn)集合的小方法。類(lèi)似于jQuery的$(‘iput,select,textarea’,'#form’)的效果，返回是按節(jié)點(diǎn)在原有文檔流中的順序返回的2013-09-09
javascript入門(mén)之window對(duì)象【新手必看】
本文系統(tǒng)介紹了javascript的window對(duì)象以及一些控制函數(shù)的用法,僅供大家參考2016-11-11
這篇文章主要為大家詳細(xì)介紹了js原生瀑布流插件制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了bootstrap彈出層的多種觸發(fā)方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
下面小編就為大家?guī)?lái)一篇js兩種拼接字符串的簡(jiǎn)單方法(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
Javascript remove 自定義數(shù)組刪除方法
Javascript自定義數(shù)組刪除方法remove()，需要的朋友可以參考下。2009-10-10
SOSO地圖API使用(一)在地圖上畫(huà)圓實(shí)現(xiàn)思路與代碼
最近在做SOSO地圖相關(guān)開(kāi)發(fā)，遇到相關(guān)畫(huà)圓知識(shí)，特此簡(jiǎn)單記錄下來(lái),接下來(lái)講解如何在在地圖上畫(huà)圓，感興趣的朋友可以了解下2013-01-01