|
锁定老帖子 主题：初学JS，写了个扫雷,聊以纪念
精华帖 (0) :: 良好帖 (9) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-03-16
最后修改：2010-03-16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Untitled Document</title>
<script type="text/javascript">
var bgObj;
function showWin(strInfo){
var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height;
bgObj=document.createElement("div");
bgObj.setAttribute( "id", "bgDiv");
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=screen.width+"px";
bgObj.style.height=screen.height+"px";
document.body.appendChild(bgObj);
//main.style.display='block';
main.style.visibility = "visible";
main.style.zIndex = "50";
main.style.width="100%";
document.getElementById("warnInfo").innerHTML="<h2>"+strInfo+"</h2>";
}
function closeWin(){
init();
document.body.removeChild(bgObj);
main.style.visibility = "hidden";
}
</script>
<style type="text/css">
/*初始状态*/
.f0{background-color:#425ccd}
/*鼠标悬停状态*/
.f1{background-color:#609aff}
/*扫雷状态*/
.f2{background-color:#cbd8ea}
/*地雷状态*/
.f3{background-color:#cbd8ea;background-image:url("mine2.png")}
/*扫出的地雷*/
.f4{background-color:#cbd8ea;background-image:url("mine.png")}
td {width:18px;}
tr {height:18px;}
font{font-weight:bolder;}
.n1{color:#4050be}
.n2{color:#1e6902}
.n3{color:#b05964}
.n4{color:#010184}
.n5{color:#8c2d34}
.n6{color:#ff0080}
.n7{color:#ff8000}
.n8{color:#00ffff}
#main{position:absolute;z-index:50; visibility:hidden}
</style>
<script type='text/javascript'>
//配置信息 宽度 高度 地雷数量（默认为 9 9 10）
var setting = {width:9,height:9,mine:10};
var minePostionArray = [];
var mineWarnArray=[]; //警告信息数组,记忆生成
var notMineNum; //非雷区的数量
var realnotMineNum;
function $(id){
return document.getElementById(id);
}
Array.prototype.has= function(num){
//可以优化查询算法
var flag =false;
for(var i=0;i<minePostionArray.length;i++){
if(num==minePostionArray[i]){
flag = true;
break;
}
}
return flag;
}
function init(){
setting = {width:9,height:9,mine:10};
minePostionArray = [];
mineWarnArray=[];
initSetting();
initMainArea(setting.width,setting.height,setting.mine);
initMine(setting.width,setting.height,setting.mine);
}
//初始化配置
function initSetting(){
//获得选中的难度
var level = document.FrmSetting.level;
var checkLevel = 0;
for(var i =0 ; i<4 ; i++){
if(level[i].checked==true){
checkLevel = i;
break;
}
}
//根据难度配置setting
switch(checkLevel){
case 0:setting = {width:9,height:9,mine:10};break;
case 1:setting = {width:16,height:16,mine:40}; break;
case 2:setting = {width:16,height:30,mine:99}; break;
case 3:setting = {width:$('width').value,height:$('height').value,mine:$('mine').value};break;
}
notMineNum=0;
realnotMineNum = setting.width*setting.height-setting.mine;
}
//初始化扫雷游戏主区域界面
function initMainArea(width,height,mine){
var innerHtml = ["<table cellpadding='0' cellspacing='0' border='1' bordercolor='black'>"];
for(var i=0;i<height;i++){
innerHtml.push("<tr>");
for(var j=0;j<width;j++){
var id= i*width+j;
innerHtml.push("<td class='f0' id='"+id+"' onmouseover='mouseover(this);' onmouseout='mouseout(this);' onclick='mouseclick(this);'> </td>");
}
innerHtml.push("</tr>");
}
innerHtml.push("</table>");
var obj = document.getElementById("MainArea");
obj.innerHTML = innerHtml.join("");
}
//初始化地雷
function initMine(width,height,mine){
var basicArray = [];
var allBlank = width*height;
for(var m=0;m<allBlank;m++){
basicArray[m]=m;
mineWarnArray[m]=-1;
}
for(var n=0;n<mine;n++){
var randomNum = Math.floor(Math.random()*(basicArray.length));
minePostionArray.push(basicArray[randomNum]);
basicArray.splice(randomNum,1);
}
minePostionArray.sort(function(a,b){return a-b});
//alert(minePostionArray);
}
function mouseover(obj){
if(obj.className=="f0"){
obj.className="f1";
}
}
function mouseout(obj){
if(obj.className=="f1"){
obj.className="f0";
}
}
function mouseclick(obj){
if(obj.className=="f1"){
var index = obj.id;
if(minePostionArray.has(index)){
//该位置有地雷
for(var i = 0 ;i<minePostionArray.length;i++){
$(minePostionArray[i]).className="f4";
}
obj.className="f3";
showWin("技术还不到家哈。。。");
}else{
//该位置无雷
obj.className="f2";
showNum(index);
}
}
}
function showNum(index){
notMineNum++;
mineWarnArray[index]=-2;
var x = index%setting.width;
var y = Math.floor(index/setting.width);
//alert(index+" "+x+" "+y);
var count = 0 ;
point1:for(var i = x-1 ; i<=x+1 ; i++){
for(var j= y-1 ; j<=y+1 ;j++){
if(i<0){
continue point1;
}
if(i>setting.width-1){
break point1;
}
if(0 <= j && j <= setting.height-1){
var postion = j*setting.width+i;
//alert(postion+" "+i+" "+j);
if (mineWarnArray[postion] == -1) {
if (minePostionArray.has(postion)) {
count++;
}else{
mineWarnArray[postion] =-2;
}
}
}
}
}
$(index).innerHTML = (count==0)?" ":"<font class='n"+count+"'>"+count+"</font>";
$(index).className="f2";
mineWarnArray[index] = count;
if(notMineNum==realnotMineNum){
for(var i = 0 ;i<minePostionArray.length;i++){
$(minePostionArray[i]).className="f4";
}
showWin("恭喜您过关了。。。。");
}
if(count == 0){
point2:for (var i = x - 1; i <= x + 1; i++) {
for (var j = y - 1; j <= y + 1; j++) {
if(i<0){
continue point2;
}
if(i>setting.width-1){
break point2;
}
if (0 <= j && j <= setting.height-1) {
var num =j*setting.width+i;
//alert(num);
if(mineWarnArray[num]<0){
showNum(num);
}
}
}
}
/*
index = index-0;
if(x>0){
if(mineWarnArray[index-1]<0){
showNum(index-1);
}
}
if(x<setting.width-1){
if(mineWarnArray[index+1]<0){
showNum(index+1);
}
}
if(y>0){
if(mineWarnArray[index-setting.width]<0){
showNum(index-setting.width);
}
}
if(y<setting.height-1){
if(mineWarnArray[index+setting.width]<0){
showNum(index+setting.width);
}
}
if (x > 0 && y > 0) {
if (mineWarnArray[index - setting.width - 1] < 0) {
countRound(index - setting.width - 1);
}
}
if(x > 0 && y<setting.height-1){
if(mineWarnArray[index-setting.width+1]<0){
countRound(index-setting.width+1);
}
}
if(x<setting.width-1 && y>0 ) {
if(mineWarnArray[index+setting.width-1]<0){
countRound(index+setting.width-1);
}
}
if(x<setting.width-1 && y<setting.height-1){
if(mineWarnArray[index+setting.width+1]<0){
countRound(index+setting.width+1);
}
}
*/
}
}
</script>
</head>
<body bgcolor="#c8c8c8">
<form name="FrmSetting">
<font size="4">难度</font>
<div>
<input type="radio" name="level" value="0" checked="checked"><b>初级</b>（10个雷，9*9平铺网格）<br/>
<input type="radio" name="level" value="1"><b>中级</b>（40个雷，16*16平铺网格）<br/>
<input type="radio" name="level" value="2"><b>高级</b>（99个雷，16*30平铺网格）<br/>
<input type="radio" name="level" value="3"><b>自定义</b> 高度(9-24)(H)<input type="text" id="height" value="9" size="2"> 宽度(9-30)(W)<input type="text" id="width" value="9" size="2"> 雷数(10-668)(M)<input type="text" id="mine" value="10" size="3">
</div>
<input type="button" value="开始游戏" onclick="init();">
</form>
<div id="main" align="center">
<span id="warnInfo"></span>
<input type="button" value="再玩一盘" onclick="closeWin();"/>
</div>
<div align="center" id="MainArea"></div>
</body>
</html>
<!--
逻辑层 -- 有雷 无雷
表示层-- 初始状态（0） 点击状态 （1） 扫雷状态（2） 引爆状态（3）
雷的全部数量
-->
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-03-17
怎么没有发现可以标记有雷的操作？？
|
| 返回顶楼 | |
|
发表时间：2010-03-17
做的还可以，稍微改一下可能会更好，有个标记雷的操作，第一次点击不要出现雷德情况
|
| 返回顶楼 | |
|
发表时间：2010-03-17
一直没搞清楚扫雷怎么玩。。。
|
| 返回顶楼 | |
|
发表时间：2010-03-17
很不错啊！！！
|
| 返回顶楼 | |
|
发表时间：2010-03-17
mikehuhu 写道 怎么没有发现可以标记有雷的操作？？
嗯。那个鼠标右击还没做。 多谢提醒~ |
| 返回顶楼 | |
|
发表时间：2010-03-17
javaxiang 写道 做的还可以，稍微改一下可能会更好，有个标记雷的操作，第一次点击不要出现雷德情况
非常感激您的意见。 |
| 返回顶楼 | |
|
发表时间：2010-03-17
do2cc
|
| 返回顶楼 | |
|
发表时间：2010-03-18
freish 写道 一直没搞清楚扫雷怎么玩。。。
同感，同感。。。 
|
| 返回顶楼 | |
|
发表时间：2010-03-18
能不能说下周围数字的算法？
|
| 返回顶楼 | |
