JavaScript&Jquery 练习 扫雷
工作中接触代码少，只能靠自己的不断努力了。需要引入jquery-1.4.2.js，jquery在这里大材小用了.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mine</title>
</head>
<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>
<style>
.content{
margin-left:auto;
margin-right:auto;
display:none;
padding:0px;
border-left: 1px;
border-left-style: solid;
border-top: 1px;
border-top-style: solid;
}
.gameControl{
margin-left:auto;
margin-right:auto;
width:250px;
}
.boxMine{
}
.boxIsTag{
}
.boxNone{
}
.box{
margin: 0px;
padding:0px;
border-right:1px;
border-right-style:solid;
border-bottom:1px;
border-bottom-style:solid;
width: 21px;
height:21px;
float:left;
text-align:center;
/*
padding:1px;
background-image:url("./img/0.png");
*/
background-color: #9CD0F7;
}
.col{
margin: 0px;
padding:0px;
border:0px;
clear:left;
}
/**
*javascript&jquery 练习
*
**/
</style>
<script type="text/javascript" >
//初级9颗，9*9 中级40颗，16*16 高级99颗，16*30
$(document).ready(function(){
gameLoad();
});
var game;
function gameLoad(){
$(document).bind("contextmenu", function(){ return false; });
game=new Game(1);
$.each($(":radio"),function(){
$(this).bind("click",function(){
if($(this).attr("checked")==true){
game.reInit($(this).val());
}
})
});
}
function Game(glevel){
this.level=glevel;
this.timer;
this.init();
}
Game.prototype.reInit=function(glevel){
this.level=glevel;
var othis=this;
clearTimeout(othis.timer);
$(".content").fadeOut("normal",function(){$("#gameContent").empty();
othis.init();});
}
Game.prototype.init=function(){
this.findNum=0;
this.result="";
var othis=this;
if(this.level==2){
this.colNum=16;
this.linNum=16;
this.MineNum=40;
}else if(this.level==3){
this.colNum=16;
this.linNum=30;
this.MineNum=99;
}else{//level=1 or others
this.colNum=9;
this.linNum=9;
this.MineNum=9;
}
this.gXBoxes=new Array(this.colNum);
$.each(othis.gXBoxes,function(x,n){
$("#gameContent").append("<div id=col"+x+" class='col'></div>");
othis.gXBoxes[x]=new Array(othis.linNum);
$.each(othis.gXBoxes[x],function(y,nn){
othis.gXBoxes[x][y]=new Gbox(x,y);
$("#col"+x).append(othis.gXBoxes[x][y].objBox);
});
});
//初始化雷位置并计算雷周围方格的数字
var ptions=this.randomPersitoins();
$.each(ptions,function(i,n){
var tmpCindex=parseInt(ptions[i]/othis.linNum);//行索引
var tmpLindex=ptions[i]%othis.linNum;//列索引
othis.gXBoxes[tmpCindex][tmpLindex].isMine=true;
//↑，非首行
if(tmpCindex!=0){
(othis.gXBoxes[tmpCindex-1][tmpLindex].roundNum)++;
}
//↓，非末行
if(tmpCindex!=(othis.colNum-1)){
(othis.gXBoxes[tmpCindex+1][tmpLindex].roundNum)++;
}
//←，非首列
if(tmpLindex!=0){
(othis.gXBoxes[tmpCindex][tmpLindex-1].roundNum)++;
}
//→，非末列
if(tmpLindex!=(othis.linNum-1)){
(othis.gXBoxes[tmpCindex][tmpLindex+1].roundNum)++;
}
//↖
if(tmpCindex!=0&&tmpLindex!=0){
(othis.gXBoxes[tmpCindex-1][tmpLindex-1].roundNum)++;
}
//↙
if(tmpLindex!=0&&tmpCindex!=(othis.colNum-1)){
(othis.gXBoxes[tmpCindex+1][tmpLindex-1].roundNum)++;
}
//↗
if(tmpCindex!=0&&tmpLindex!=(othis.linNum-1)){
(othis.gXBoxes[tmpCindex-1][tmpLindex+1].roundNum)++;
}
//↘
if(tmpCindex!=(othis.colNum-1)&&tmpLindex!=(othis.linNum-1)){
(othis.gXBoxes[tmpCindex+1][tmpLindex+1].roundNum)++;
}
}
);
//初始化雷剩余数目
$("#surplus").val(this.MineNum);
//显示初始化好的布局
$(".content").css("width",(this.linNum*22)+"px");
$(".content").css("height",(this.colNum*22)+"px");
$(".content").fadeIn("fast");
//去除开始的事件
$("#gameContent").unbind();
//初始化时间
$("#time").val(0);
//添加一次开始事件
$("#gameContent").one("mousedown",function(){
othis.start();
});
}
Game.prototype.start=function(){
if(this.result==""){
showTime();
}
}
function showTime(){
$("#time").val(parseInt($("#time").val())+1);
game.timer=setTimeout("showTime()",1000);
}
Game.prototype.randomPersitoins=function(){
var perstions=new Array(this.MineNum);
for(var i=0;i<perstions.length;){
var tmp=Math.floor(Math.random()*(this.colNum*this.linNum));//向下取整，0~格数-1
if(!checkNum(perstions,tmp,i)){
perstions[i]=tmp;
i++;
}
}
return perstions;
}
Game.prototype.success=function(){
var othis=this;
this.result="sucess";
clearTimeout(othis.timer);
$.each(othis.gXBoxes,function(x,n){
$.each(othis.gXBoxes[x],function(y,m){
$(othis.gXBoxes[x][y].objBox).unbind();
});
});
alert("success");
}
Game.prototype.failed=function(){
var othis=this;
this.result="failed";
clearTimeout(othis.timer);
$.each(othis.gXBoxes,function(x,n){
$.each(othis.gXBoxes[x],function(y,m){
var tmpBox=othis.gXBoxes[x][y];
if(tmpBox.isMine){
tmpBox.showReal();
}
$(tmpBox.objBox).unbind();
});
}
);
alert("failed");
}
Game.prototype.upOthers=function(box){
//↑，非首行
if(box.x!=0&&this.gXBoxes[box.x-1][box.y].status==0){
this.gXBoxes[box.x-1][box.y].status=2;
this.gXBoxes[box.x-1][box.y].showReal();
if(this.gXBoxes[box.x-1][box.y].roundNum>0){
}else{
this.upOthers(this.gXBoxes[box.x-1][box.y]);
}
}
//↓，非末行
if(box.x!=(this.colNum-1)&&this.gXBoxes[box.x+1][box.y].status==0){
this.gXBoxes[box.x+1][box.y].status=2;
this.gXBoxes[box.x+1][box.y].showReal();
if(this.gXBoxes[box.x+1][box.y].roundNum>0){
}else{
this.upOthers(this.gXBoxes[box.x+1][box.y]);
}
}
//←，非首列
if(box.y!=0&&this.gXBoxes[box.x][box.y-1].status==0){
this.gXBoxes[box.x][box.y-1].status=2;
this.gXBoxes[box.x][box.y-1].showReal();
if(this.gXBoxes[box.x][box.y-1].roundNum>0){
}else{
this.upOthers(this.gXBoxes[box.x][box.y-1]);
}
}
//→，非末列
if(box.y!=(this.linNum-1)&&this.gXBoxes[box.x][box.y+1].status==0){
this.gXBoxes[box.x][box.y+1].status=2;
this.gXBoxes[box.x][box.y+1].showReal();
if(this.gXBoxes[box.x][box.y+1].roundNum>0){
}else{
this.upOthers(this.gXBoxes[box.x][box.y+1]);
}
}
//↖
if(box.x!=0&&box.y!=0&&this.gXBoxes[box.x-1][box.y-1].status==0){
this.gXBoxes[box.x-1][box.y-1].status=2;
this.gXBoxes[box.x-1][box.y-1].showReal();
if(this.gXBoxes[box.x-1][box.y-1].roundNum>0){
}else{
this.upOthers(this.gXBoxes[box.x-1][box.y-1]);
}
}
//↙
if(box.x!=(this.colNum-1)&&box.y!=0&&this.gXBoxes[box.x+1][box.y-1].status==0){
this.gXBoxes[box.x+1][box.y-1].status=2;
this.gXBoxes[box.x+1][box.y-1].showReal();
if(this.gXBoxes[box.x+1][box.y-1].roundNum>0){
}else{
this.upOthers(this.gXBoxes[box.x+1][box.y-1]);
}
}
//↗
if(box.x!=0&&box.y!=(this.linNum-1)&&this.gXBoxes[box.x-1][box.y+1].status==0){
this.gXBoxes[box.x-1][box.y+1].status=2;
this.gXBoxes[box.x-1][box.y+1].showReal();
if(this.gXBoxes[box.x-1][box.y+1].roundNum>0){
}else{
this.upOthers(this.gXBoxes[box.x-1][box.y+1]);
}
}
//↘
if(box.x!=(this.colNum-1)&&box.y!=(this.linNum-1)&&this.gXBoxes[box.x+1][box.y+1].status==0){
this.gXBoxes[box.x+1][box.y+1].status=2;
this.gXBoxes[box.x+1][box.y+1].showReal();
if(this.gXBoxes[box.x+1][box.y+1].roundNum>0){
}else{
this.upOthers(this.gXBoxes[box.x+1][box.y+1]);
}
}
}
function checkNum(list,num,n){
for(var i=0;i<n;i++){
if(list[i]==num){
return true;
}
}
return false;
}
function Gbox(x,y){
this.isMine=false;//是否是地雷
this.status=0;//0：未标识，未点击。1：已标识为雷。2：已点击。
this.roundNum=0;//周围雷数目
this.x=x;
this.y=y;
var othis=this;
this.objBox=$("<div class='box'></div>");
this.objBox.bind("mouseover",function(){othis.onMouseover();});
this.objBox.bind("mouseout",function(){othis.onMouseout();});
this.objBox.bind("mousedown",function(e){othis.onMousedown(e);});
}
Gbox.prototype.onMouseover=function(){
if(this.status==0){
this.objBox.css("background-color","white");
}
}
Gbox.prototype.onMouseout=function(){
if(this.status==0){
this.objBox.css("background-color","#9CD0F7");
}
}
Gbox.prototype.showReal=function(){
this.objBox.css("background-color","white");
if(this.isMine){
this.objBox.html("X");
}else{
this.objBox.html(this.roundNum==0?"":this.roundNum);
}
}
Gbox.prototype.onMousedown=function(e){
if(1==e.which){
if(this.status==0){
this.status=2;
if(this.isMine){
this.showReal();
game.failed();
}else if(this.roundNum>0){
this.showReal();
}else{
this.showReal();
game.upOthers(this);
}
}
}else if(3==e.which){
if(this.status==0){
this.status=1;
//剩余标记-1
$("#surplus").val(parseInt($("#surplus").val())-1);
this.objBox.html("√");
if(this.isMine){
//已找到标识+1
game.findNum++;
if(game.findNum==game.MineNum&&($("#surplus").val()==0)){
game.success();
}
}
}else if(this.status==1){
this.status=0;
//剩余标记+1
$("#surplus").val(parseInt($("#surplus").val())+1);
//this.objBox.css("background","url('./img/0.png')");
this.objBox.html("");
//已找到标识-1
if(this.isMine){
game.findNum--;
}
}
return false;
}
}
</script>
<body>
<div id="gameControl" class="gameControl">
<div>级别：<input type="radio" name="level" checked="checked" value="1" />初级<input type="radio" name="level" value="2"/>中级<input type="radio" name="level" value="3"/>高级</div>
<div>时间：<input type="text" id="time" disabled="disabled" /></div>
<div>剩余：<input type="text" id="surplus" disabled="disabled" /></div>
</div>
<div id="gameContent" class="content">
</div>
</body>
</html>
