重慶分公司
重慶分公司，新征程啟航
為企業(yè)提供網(wǎng)站建設(shè)、域名注冊、服務(wù)器等服務(wù)
使用JavaScript怎么實(shí)現(xiàn)一個掃雷小程序
這篇文章將為大家詳細(xì)講解有關(guān)使用JavaScript怎么實(shí)現(xiàn)一個掃雷小程序，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有柳林免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
掃雷規(guī)則及功能
1.左鍵點(diǎn)擊顯示當(dāng)前格子是否為雷，如果為雷的話，GameOver啦，如果不是雷的話，這個格子會顯示周圍八個格子內(nèi)的雷數(shù)量。
2.鼠標(biāo)右鍵標(biāo)記，標(biāo)記可能的雷，標(biāo)記了之后取消需要再次右鍵點(diǎn)擊該格子，左鍵無效果。
3.鼠標(biāo)中鍵（滾輪）按下后，快捷掃雷（如果周圍雷數(shù)和未被標(biāo)記且未被翻開的格子相等，會將這些格子一并翻開）
掃雷算法
1.首先我定義了一個構(gòu)造函數(shù),里面是一系列的屬性：
var mineCraft = function(num1,num2,mine_num,obj,type){
this.num1 = num1; //整個掃雷的行數(shù)
this.num2 = num2; //整個掃雷的列數(shù)
this.mine_num = mine_num; //雷的個數(shù)
this.tiles = []; //數(shù)組里面存放的是每個小格子
this.obj = obj; //掃雷放置的對象
this.flag = true;
this.arr = [];
this.arr_2 = [];
this.time_dsq = null;
this.time_dc ='';
this.time_arr = [[],[],[]]; //時間統(tǒng)計(jì)信息
this.details = [[],[],[]]; // 游戲統(tǒng)計(jì)詳情
this.type = type; //游戲類型：初級/中級/高級/自定義
this.buildTiles(); //創(chuàng)建游戲函數(shù)
};2.在頁面上創(chuàng)建掃雷的界面 函數(shù)buildTiles
buildTiles:function(){
this.obj.style.width = 51*this.num1+'px'; //在傳進(jìn)來的對象上畫整體格子，每個小格子51px大小，總大小就為個數(shù)*單個大小
this.obj.style.height = 51*this.num2+'px';
var indexOfdiv = 0;
for(var i = 0;i3.綁事件函數(shù)：
event : function(){
var _this = this;
this.obj.onmouseover = function(e){ //鼠標(biāo)懸停事件---
if(e.target.className == 'tile'){
e.target.className = 'tile current';
}
}
this.obj.onmouseout = function(e){ //鼠標(biāo)移出事件--
if(e.target.className == 'tile current'){
e.target.className = 'tile';
}
}
this.obj.onmousedown = function(e){ //鼠標(biāo)按下事件
var index = e.target.index;
if(e.button == 1){ //e.button屬性 左鍵0/中鍵1/右鍵2
event.preventDefault(); //取消默認(rèn)
}
_this.changeStyle(e.button,e.target,index);
}
this.obj.onmouseup = function(e){ //鼠標(biāo)彈起事件
if(e.button == 1){
_this.changeStyle(3,e.target);
}
}
},4.點(diǎn)擊調(diào)用的函數(shù)：
changeStyle:function(num1,obj,num_index){
if(num1 == 0){ //是左鍵的話
if(this.flag){ //this.flag 是之前定義的用于判斷是否為第一次點(diǎn)擊
this.store(num_index); //store函數(shù)，存放被點(diǎn)擊的格子周圍的8個格子
this.setMineCraft(this.mine_num,this.arr,num_index); //如果是第一次點(diǎn)擊 即調(diào)用布雷函數(shù) 更改flag狀態(tài)
this.flag = false;
this.detail_statistics(0,false); //開始信息統(tǒng)計(jì)函數(shù)
}
if(obj.className != 'tile'&&obj.className !='tile current'){//如果不是第一次點(diǎn)擊，被點(diǎn)擊的格子不是未點(diǎn)擊狀態(tài)，無效
return false;
}
if(obj.getAttribute('val') == 0){ //如果不是雷。改為翻開狀態(tài)
obj.className = "showed";
obj.innerHTML = obj.getAttribute('value') == 0?'':obj.getAttribute('value'); //顯示周圍雷數(shù)
this.showAll(obj.index); //遞歸函數(shù)判斷周圍格子的情況，就是掃雷游戲上一點(diǎn)開會出現(xiàn)一片的那種
}
if(this.over(obj)){ //判斷游戲是否結(jié)束
this.last();
}
}
if(num1 == 2){ //右鍵標(biāo)記事件
if(obj.className == 'biaoji'){
obj.className = 'tile';
}else if(obj.className !='biaoji'&&obj.className != 'showed'){
obj.className = 'biaoji';
}
}
if(num1 == 1){ // 中鍵事件
if(obj.className =="showed"){
this.show_zj1(obj.index);
}
}
if(num1 == 3){ //鼠標(biāo)彈起事件
if (obj.className == "showed") {
var flag1 = this.show_zj2(obj.index,0);
}else{
this.show_zj2(obj.index,1)
return false;
}
if(flag1&&this.over()){ //彈起判斷是否結(jié)束
this.last();
}
}
},5.布雷：我之前的布雷是在頁面加載在buildTiles()的時候布雷的，但是這樣會導(dǎo)致有可能你電機(jī)的第一個格子就是雷（游戲性不強(qiáng)），后來修改到第一次點(diǎn)擊完成之后布雷（確保第一下點(diǎn)的不是雷），避開直接炸死的現(xiàn)象.所以把調(diào)用放在后面的event后觸發(fā)的changeStyle函數(shù)中
setMineCraft:function(num,arr_first,num_first){ //雷的個數(shù)、最開始被點(diǎn)擊的格子周圍的八個、被點(diǎn)擊的那個格子
var arr_index = [];
for(var i = 0;i-1){//如果是屬于第一次點(diǎn)擊的周圍的直接跳過在該位置布雷
num++;
continue;
}
if (this.tiles[index_Mine].getAttribute("val") == 0) {
this.tiles[index_Mine].setAttribute("val", 1);
}else {
num++;
}
}
this.showValue();
this.event()
}, 6.存儲周圍格子的函數(shù)：
store : function(num) { //傳入格子的index.
var tiles_2d = [];
var indexs = 0;
for(var i = 0;i= 0 && j - 1 >= 0) {
this.arr.push(tiles_2d[i - 1][j - 1]);
}
//正上
if (i - 1 >= 0) {
this.arr.push(tiles_2d[i - 1][j]);
}
//右上
if (i - 1 >= 0 && j + 1 <= this.num1-1) {
this.arr.push(tiles_2d[i - 1][j + 1]);
}
//左邊
if (j - 1 >= 0) {
this.arr.push(tiles_2d[i][j - 1]);
}
//右邊
if (j + 1 <= this.num1-1) {
this.arr.push(tiles_2d[i][j + 1]);
}
//左下
if (i + 1 <= this.num2-1 && j - 1 >= 0) {
this.arr.push(tiles_2d[i + 1][j - 1]);
}
//正下
if (i + 1 <= this.num2-1) {
this.arr.push(tiles_2d[i + 1][j]);
}
//右下
if (i + 1 <= this.num2-1 && j + 1 <= this.num1-1) {
this.arr.push(tiles_2d[i + 1][j + 1]);
}
}, 7.showAll函數(shù)：作用是如果該格子周圍沒有雷，自動翻開周圍8個格子，然后再判斷周圍八個格子的周圍8隔格子是否有雷，利用了遞歸的方法
showAll:function(num){
if (this.tiles[num].className == "showed" && this.tiles[num].getAttribute("value") == 0){
this.store(this.tiles[num].index);
var arr2 = new Array();
arr2 = this.arr;
for (var i = 0; i < arr2.length; i++) {
if (arr2[i].className != "showed"&&arr2[i].className !='biaoji') {
if (arr2[i].getAttribute("value") == 0) {
arr2[i].className = "showed";
this.showAll(arr2[i].index);
} else {
arr2[i].className = "showed";
arr2[i].innerHTML = arr2[i].getAttribute("value");
}
}
}
}
},8.show_zj函數(shù)：主要是中鍵按鈕的作用中鍵點(diǎn)擊后的函數(shù)，這里的show_zj1是鼠標(biāo)鍵按下后的顯示效果，
show_zj2函數(shù)就是
show_zj1:function(num){
this.store(this.tiles[num].index);
for (var i = 0; i < this.arr.length; i++) {
if (this.arr[i].className == "tile") {
this.arr_2.push(this.arr[i]);
this.arr[i].className = "showed";
// this.arr[i].className = "test";
}
}
},
show_zj2:function(num,zt){
var count = 0;
this.store(this.tiles[num].index);
for(var i = 0,len = this.arr_2.length;i9.結(jié)束判斷：
over:function(obj){
var flag = false;
var showed = document.getElementsByClassName('showed');
var num = this.tiles.length - this.mine_num;
if(showed.length == num){ //如果被排出來的格子數(shù)等于總格子數(shù)-雷數(shù)，這游戲成功結(jié)束
this.detail_statistics(1,true); //游戲統(tǒng)計(jì) ，true代表勝，false，代表失敗
alert('恭喜你獲得成功');
flag = true;
}else if(obj&&obj.getAttribute('val') == 1){ //如果被點(diǎn)擊的是雷，則炸死
this.detail_statistics(1,false);
alert('被炸死！');
flag = true;
}
return flag;
},10.結(jié)束后的顯示函數(shù)：
last:function(){
var len = this.tiles.length;
for(var i = 0;i11 統(tǒng)計(jì)信息：還是比較全的和windows7掃雷版的判斷項(xiàng)目是一樣的，使用的是每次結(jié)束游戲后將數(shù)據(jù)存入localStorage中，
//已玩游戲，已勝游戲，勝率，最多連勝，最多連敗，當(dāng)前連局；
detail_statistics:function(num,zt){
var time_pay = 1;
var _this = this;
if(num == 0){
this.time_dsq = setInterval(function(){
$('#time_need').text(time_pay);
_this.time_dc =time_pay;
time_pay++;
},1000);
}
else if(num == 1){
clearInterval(this.time_dsq);
if(this.type == 4){return false;}
if(localStorage.details == undefined){
localStorage.details = JSON.stringify([[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0]]); //這里存放的就是上面注釋中的六項(xiàng)數(shù)據(jù)
}
if(JSON.parse(localStorage.details) instanceof Array){
this.details = JSON.parse(localStorage.details);
}
this.details[this.type][0] += 1;
if(zt == false){
if(this.details[this.type][5]>=0){
this.details[this.type][5] = -1;
}else{
this.details[this.type][5] -= 1;
}
if(this.details[this.type][5]=0){
this.details[this.type][5] += 1;
}else{
this.details[this.type][5] = 1;
}
if(this.details[this.type][5]>this.details[this.type][3]){
this.details[this.type][3] = this.details[this.type][5];
}
this.details[this.type][3] += 1;
this.details[this.type][2] = this.toPercent(this.details[this.type][4]/this.details[this.type][0]);
localStorage.details = JSON.stringify(this.details);
var time1 = new Date();
var time_str = time1.getFullYear()+'/'+time1.getMonth()+'/'+time1.getDate()+' '+time1.getHours()+':'+time1.getMinutes();
if(localStorage.time == undefined){
localStorage.time = JSON.stringify([[],[],[]]);
}
if(JSON.parse(localStorage.time) instanceof Array){
this.time_arr = JSON.parse(localStorage.time);
}
this.time_arr[this.type].push([this.time_dc,time_str]);
this.time_arr[this.type].sort(function(a,b){
return a[0]-b[0];
});
if(this.time_arr[this.type].length>5){
this.time_arr[this.type].pop();
}
localStorage.time = JSON.stringify(this.time_arr);
}
}, 關(guān)于使用JavaScript怎么實(shí)現(xiàn)一個掃雷小程序就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
本文標(biāo)題：使用JavaScript怎么實(shí)現(xiàn)一個掃雷小程序
鏈接URL：http://news.spvevtbd.cn/article/ihpjis.html