JavaScript網頁游戲代碼-掃雷

2024-09-05 12:21:05

字體：大中小

來源：轉載

供稿：網友

JavaScript掃雷游戲，運行于WEB平臺的網頁小游戲，掃雷游戲比較經典吧，Windows系統中自帶的一款休閑小游戲，經常玩可以益智，閑來無事，用JS寫了一下，或許會讓您們滿意吧。

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>JavaScript掃雷游戲</title><script type="text/javascript">var $ = function(id){return document.getElementById(id)};var minesweeper = {};   //雷區對象var mineArray = [];     //地雷組var _differendNumber = null;    //生成不同位置的隨機地雷var overcomeMineLenth = {overcome:0, minelength:10};var bumpBOx = {mousekey:0,bump:null} //用于判斷左右鍵雙擊function CreateBox(y,x,mine){   //構造雷格對象	this.position = 1;     //1在雷區里面，0不在	this.y = y;	this.x = x;	this.mine = mine;  //1有雷，0無	this.on = 0;   //0未掃，1已掃，2已標記	this.t_l = {y:y-1, x:x-1};     //左上格子坐標	this.t_c = {y:y-1, x:x};       //上	this.t_r = {y:y-1, x:x+1};     //右上	this.b_l = {y:y+1, x:x-1};     //左下	this.b_c = {y:y+1, x:x};       //下	this.b_r = {y:y+1, x:x+1};     //右下	this.l   = {y:y, x:x-1};       //左 	this.r   = {y:y, x:x+1};       //右}function getMineSweeper(){	var oCount = parseInt($('oCount').innerHTML);	var y, x, max, boxslist=[],has=[];	switch(oCount){    //取得雷區長寬		case 10: y = 9; x = 9;		break;		case 40: y = 16; x = 16;		break;		case 99: y = 16; x = 30;		break;	}	max = y*x;	$('oMain').style.width = 24*x+2+'px';	for(var i=0; i<y; i++){    //生成格子	    boxslist[i] = [];		for(var j=0; j<x; j++){			boxslist[i].push(new CreateBox(i,j,0));		}	}	for(var k=0; k<oCount; k++){   //生成隨機雷格數組序號	    var new_num = Math.floor(Math.random()*max+1);	    getDifferentNumber(new_num,has,max);	    new_num = _differendNumber;	    has.push(new_num);		}	function setMine(arr){        for(var i=0; i<has.length; i++){            var mineX = arr[i] % x == 0 ? x : arr[i] % x;            var mineY = Math.ceil(arr[i] / x);            boxslist[mineY-1][mineX-1].mine = 1;        }    }    mineArray = has;    overcomeMineLenth.minelength = mineArray.length;    setMine(has);	function getDifferentNumber(n,has,max){    //生成不重復的隨機數	    var _has = has;	    var _max = max;	    var _n = n;	    var isin = 0;	    for(var i=0; i<_has.length; i++){	        if(_n==has[i]){	           isin = 1; 	        }	    }	    if(isin==1){   //如果相同，遞歸執行	        var _num = Math.floor(Math.random()*_max+1);	        arguments.callee(_num,_has,_max);	    }else{	        _differendNumber = _n;	    }	}	minesweeper.len = max;	minesweeper.x = x;	minesweeper.y = y;    minesweeper.boxslist = boxslist;   //雷格數組}function mineSweeperToHTML(obj){    //布雷到頁面HTML     var x_len = obj.x;     var y_len = obj.y;     var arr = obj.boxslist;     var str = '';     for(var i=0; i';          for(var j=0; j <//td>';         }         _tr += '<//tr>';         str += _tr ;     }     $('mineField').innerHTML = '<table>' + str + '<//table>';     //添加事件     var boxs = $('mineField').getElementsByTagName('td');     var len = boxs.length;     for(var k=0; k<len; k++){         boxs[k].onclick = function(){             mineBoxClick(this);         }         boxs[k].onmousedown = function(event){             addFlag(this,event);         }         boxs[k].onmouseup = function(event){             leftRightMouseUp();         }     }}function mineBoxClick(ele){     //格子點擊    var ele_id = ele.getAttribute('id');    var ele_id_arr = ele_id.split('-');    var y = parseInt(ele_id_arr[1]);    var x = parseInt(ele_id_arr[2]);    var box = minesweeper.boxslist[y][x];    var eleclass = ele.getAttribute('class');    if(eleclass!='hidden'){return false;}   //如果已經點擊，返回false    // var ele = $('box-'+y+'-'+x);    box.on = 1;    if(box.mine==0){    //不是雷        overcomeMineLenth.overcome += 1;         var tl,tc,tr,bl,bc,br,l,r;  //獲取周圍的格子對象        var out = {position:0, mine:0};        var maxY = minesweeper.y - 1;        var maxX = minesweeper.x - 1;        if(box.t_l.y < 0 || box.t_l.y > maxY || box.t_l.x < 0 || box.t_l.x > maxX){            tl = out ;        }else{            tl = minesweeper.boxslist[box.t_l.y][box.t_l.x];        }        if(box.t_c.y < 0 || box.t_c.y > maxY || box.t_c.x < 0 || box.t_c.x > maxX){            tc = out ;        }else{            tc = minesweeper.boxslist[box.t_c.y][box.t_c.x];        }        if(box.t_r.y < 0 || box.t_r.y > maxY || box.t_r.x < 0 || box.t_r.x > maxX){            tr = out ;        }else{            tr = minesweeper.boxslist[box.t_r.y][box.t_r.x];        }        if(box.b_l.y < 0 || box.b_l.y > maxY || box.b_l.x < 0 || box.b_l.x > maxX){            bl = out ;        }else{            bl = minesweeper.boxslist[box.b_l.y][box.b_l.x];        }        if(box.b_c.y < 0 || box.b_c.y > maxY || box.b_c.x < 0 || box.b_c.x > maxX){            bc = out ;        }else{            bc = minesweeper.boxslist[box.b_c.y][box.b_c.x];        }        if(box.b_r.y < 0 || box.b_r.y > maxY || box.b_r.x < 0 || box.b_r.x > maxX){            br = out ;        }else{            br = minesweeper.boxslist[box.b_r.y][box.b_r.x];        }        if(box.l.y < 0 || box.l.y > maxY || box.l.x < 0 || box.l.x > maxX){            l = out ;        }else{            l = minesweeper.boxslist[box.l.y][box.l.x];        }        if(box.r.y < 0 || box.r.y > maxY || box.r.x < 0 || box.r.x > maxX){            r = out ;        }else{            r = minesweeper.boxslist[box.r.y][box.r.x];        }        var round = tl.mine + tc.mine + tr.mine + bl.mine + bc.mine + br.mine + l.mine + r.mine;         switch(round){  //周圍格子元素樣式設置            case 8:ele.setAttribute('class','on8');ele.innerHTML = 8 ;            break;            case 7:ele.setAttribute('class','on7');ele.innerHTML = 7 ;            break;            case 6:ele.setAttribute('class','on6');ele.innerHTML = 6 ;            break;            case 5:ele.setAttribute('class','on5');ele.innerHTML = 5 ;            break;            case 4:ele.setAttribute('class','on4');ele.innerHTML = 4 ;            break;            case 3:ele.setAttribute('class','on3');ele.innerHTML = 3 ;            break;            case 2:ele.setAttribute('class','on2');ele.innerHTML = 2 ;            break;            case 1:ele.setAttribute('class','on1');ele.innerHTML = 1 ;            break;             default:            ele.setAttribute('class','on');     //如果有空格，繼續搜索            if(tl.position!=0 && tl.on==0) {$('box-' + tl.y + '-' + tl.x).click()}            if(tc.position!=0 && tc.on==0) {$('box-' + tc.y + '-' + tc.x).click()}            if(tr.position!=0 && tr.on==0) {$('box-' + tr.y + '-' + tr.x).click()}            if(bl.position!=0 && bl.on==0) {$('box-' + bl.y + '-' + bl.x).click()}            if(bc.position!=0 && bc.on==0) {$('box-' + bc.y + '-' + bc.x).click()}            if(br.position!=0 && br.on==0) {$('box-' + br.y + '-' + br.x).click()}            if(l.position!=0 && l.on==0) {$('box-' + l.y + '-' + l.x).click()}            if(r.position!=0 && r.on==0) {$('box-' + r.y + '-' + r.x).click()}            break;        }        if(overcomeMineLenth.overcome+overcomeMineLenth.minelength == minesweeper.len){            alert('恭喜，你贏了！');            $('start').onclick();        }    }else{  //是雷        for(var i=0; i<mineArray.length; i++){            var mineElement = $('mineField').getElementsByTagName('td');            mineElement[mineArray[i]-1].setAttribute('class','mine');        }        ele.setAttribute('class','boom');        $('start').setAttribute('src','sad.gif');        //移除添加事件         var boxs2 = $('mineField').getElementsByTagName('td');         var len = boxs2.length;         for(var k=0; k<len; k++){             boxs2[k].onclick = function(){                 return false;  //mineBoxClick(this);             }             boxs2[k].onmousedown = function(event){                 return false;  //addFlag(this,event);             }             boxs2[k].onmouseup = function(event){             	return false;	//leftRightMouse(this,event);         	}         }    }}function addFlag(ele,event){    //右鍵標記紅旗    var e = event || window.event;    var _c = ele.getAttribute('class');    // alert(event.button);    if(e.button==2){	    	bumpBOx.mousekey += 2;    }    if(e.button!=2){	//左右鍵    	bumpBOx.mousekey += 1;    }    // console.log(bumpBOx.mousekey);    switch(bumpBOx.mousekey){    	case 2:    	if(_c=='hidden'){            ele.setAttribute('class','flag');            $('oCount').innerHTML = parseInt($('oCount').innerHTML) - 1;        }else if(_c=='flag'){            ele.setAttribute('class','hidden');            $('oCount').innerHTML = parseInt($('oCount').innerHTML) + 1;        }else{            return false;        }        break;        case 3:        switch (_c){    		case 'hidden' :    		case 'flag' :    		case 'on' :    		case '' :    		return false;    		break;    		default:    		leftRightMouseShow(ele);    		break;    	}    	break;    	default:    	return false;    	break;    }}function leftRightMouseUp(){	bumpBOx.mousekey = 0;}function leftRightMouseShow(ele){	//左右鍵雙擊效果	function getFlag(obj){		if(obj){			if(obj.getAttribute('class')=='flag'){				return 1;			}else{				return 0;			}		}else{			return 0;		}	}	function isClick(ele){		if(ele){			ele.click();		}else{			return false;		}	};	var ele_id = ele.getAttribute('id');    var ele_id_arr = ele_id.split('-');    var y = parseInt(ele_id_arr[1]);    var x = parseInt(ele_id_arr[2]);    //var tl,tc,tr,bl,bc,br,l,r;      //var out = {position:0, mine:0};    //獲取周圍的格子對象    var tl = $('box-'+(y-1)+'-'+(x-1));    var tc = $('box-'+(y-1)+'-'+x);    var tr = $('box-'+(y-1)+'-'+(x+1));    var bl = $('box-'+(y+1)+'-'+(x-1));    var bc = $('box-'+(y+1)+'-'+x);    var br = $('box-'+(y+1)+'-'+(x+1));    var l = $('box-'+y+'-'+(x-1));    var r = $('box-'+y+'-'+(x+1));    var _flag = getFlag(tl) +     			getFlag(tc) +     			getFlag(tr) +    			getFlag(bl) +     			getFlag(bc) +     			getFlag(br) +     			getFlag(l) +     			getFlag(r) ;    if(ele.innerHTML == _flag){    	isClick(tl);    	isClick(tc);    	isClick(tr);    	isClick(bl);    	isClick(bc);    	isClick(br);    	isClick(l);    	isClick(r);    }else{    	var roundArr = [tl,tc,tr,bl,bc,br,l,r];    	showDown(roundArr);    }}//凹陷效果function showDown(arr){			var len = arr.length;	bumpBOx.bump = arr;	for(var i=0; i<len; i++){		if(arr[i]){			var _c = arr[i].getAttribute('class');			if(_c=='hidden'){				arr[i].setAttribute('class','onbump');			}		}	}	setTimeout("backClass(bumpBOx.bump)",100);}function backClass(arr){		var len = arr.length;		for(var i=0; i<len; i++){			if(arr[i]){				var _c = arr[i].getAttribute('class');				if(_c=='onbump'){					arr[i].setAttribute('class','hidden');				}			}		}}function startGame(){   //開始游戲    getMineSweeper();    mineSweeperToHTML(minesweeper);	overcomeMineLenth.overcome = 0;}function chooseDifficulty (){   //難度選擇    var arr = document.getElementsByName('radio');    var len = arr.length;    for(var i=0; i<len; i++){	arr[i].onclick = function(){	$('oCount').innerHTML = this.value;	$('start').setAttribute('src','/jscss/demoimg/201209/happy.gif');	startGame();	}    }}function getDifficulty(){   //獲取已選難度    var arr = document.getElementsByName('radio');    var len = arr.length;    for(var i=0; i<len; i++){        if(arr[i].checked){            $('oCount').innerHTML = arr[i].value;        }    }}window.onload = function(){    chooseDifficulty ()    startGame();    $('start').onclick = function(){		this.setAttribute('src','happy.gif');		getDifficulty();		startGame();    }	$('oMain').style.display = 'block';	$('loading').style.display = 'none';    document.oncontextmenu = function(){ return false;}    document.onselectstart =  function(){ return false;}}</script><style type="text/css">*{ padding: 0; margin: 0; } table { /*border-collapse: collapse; */border-spacing: 0; } fieldset,img { border: 0; } strong{ font-weight:bold;}body{background:url("bg1.png"); text-align:center; font-size:12px;}  .solid-border-up{	border:2px solid #fff; 	border-right:2px solid #848484; 	border-bottom:2px solid #848484;}.solid-border-down{	border:2px solid #848484; 	border-right:2px solid #fff; 	border-bottom:2px solid #fff;}.main{	width:200px; 	height:auto; 	background:#CECFCE; 	margin:20px auto; 	padding:4px;}.top { padding:5px;}.top table{width:100%;}.top table td{text-align: left;}.count { 	width: 26px; 	height: 20px; 	line-height:20px; 	background:#000; 	color:red; 	text-align:center;}#start { margin-top:2px; }.mine-field { margin:8px 0 0 0; font-weight:bold}.mine-field td {	width:20px; 	height:21px; 	cursor:default; 	overflow:hidden;	border:2px solid #fff; 	border-right:2px solid #848484; 	border-bottom:2px solid #848484; }.mine-field td.on, .mine-field td.onbump {	width:22px; 	height:23px; 	border:1px solid #B4B4B4; 	border-right:1px solid #B4B4B4; 	border-bottom:1px solid #B4B4B4;}.mine-field td.on1 {color:#00CD00;border:1px solid #B4B4B4; 	border-right:1px solid #B4B4B4; 	border-bottom:1px solid #B4B4B4;	width:22px; 	height:23px; }.mine-field td.on2 {color:#00BFFF;border:1px solid #B4B4B4; 	border-right:1px solid #B4B4B4; 	border-bottom:1px solid #B4B4B4;	width:22px; 	height:23px; }.mine-field td.on3 {color:#CD0000;border:1px solid #B4B4B4; 	border-right:1px solid #B4B4B4; 	border-bottom:1px solid #B4B4B4;	width:22px; 	height:23px; }.mine-field td.on4 {color:#BF3EFF;border:1px solid #B4B4B4; 	border-right:1px solid #B4B4B4; 	border-bottom:1px solid #B4B4B4;	width:22px; 	height:23px; }.mine-field td.on5 {color:#8B0000;border:1px solid #B4B4B4; 	border-right:1px solid #B4B4B4; 	border-bottom:1px solid #B4B4B4;	width:22px; 	height:23px; }.mine-field td.on6 {color:#C71585;border:1px solid #B4B4B4; 	border-right:1px solid #B4B4B4; 	border-bottom:1px solid #B4B4B4;	width:22px; 	height:23px; }.mine-field td.on7 {color:#CDCD00;border:1px solid #B4B4B4; 	border-right:1px solid #B4B4B4; 	border-bottom:1px solid #B4B4B4;	width:22px; 	height:23px; }.mine-field td.on8 {color:#000000;border:1px solid #B4B4B4; 	border-right:1px solid #B4B4B4; 	border-bottom:1px solid #B4B4B4;	width:22px; 	height:23px; }.mine-field td.flag {background:url("/jscss/demoimg/201209/flag.gif") no-repeat center center;}.mine-field td.mine, .mine-field td.boom {background:url("/jscss/demoimg/201209/mine.gif") no-repeat center center;}.mine-field td.boom {background-color:red;}#hananTOP h3{color:#000; border-bottom:1px solid #ccc; margin-bottom:10px; padding:10px; text-align:center;}#hananTOP h3 img{ }#hananBottom {border-top:1px solid #ccc; margin-top:10px; padding:10px;text-align:center;}</style></head><body><div   class="iwvjtn8m0"   id="hananTOP"><h3><p>JS版掃雷游戲</p></h3></div><div   id="iwvjtn8m0"   class="main solid-border-up" id="oMain" style="width: 213px; display:none"><div   id="iwvjtn8m0"   class="solid-border-down top"><table><tr><td style="width: 42px;"><div   id="iwvjtn8m0"   class="solid-border-down count" id="oCount">10</div></td><td><input title="點擊開始游戲" type="image" src="/jscss/demoimg/201209/happy.gif" id="start" /></td><td style="text-align: right;"><label><input type="radio" name="radio" checked="checked" value="10" />初級</label><label><input type="radio" name="radio" value="40" />中級</label><label><input type="radio" name="radio" value="99"/>高級</label></td></tr></table></div><div   id="iwvjtn8m0"   class="mine-field solid-border-down" id="mineField"></div></div><img alt="" src="/d/file/p/2024/09-05/98cbe1607467dd2b41fe56bbd9e3f8e7.gif" id="loading"></body></html>

上一篇：仿flash的html5網頁躲避游戲

下一篇：CSS3貪吃蛇，HTML5實例