He元素

Don't be shy just try!
  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
js实现windows扫雷(jquery) 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>
<body>
<style>
    table{background-color: red;}
    tr td{width: 20px;height: 20px;background-color: yellow;}
</style>

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<table>
<script>

    var x=9;//宽度
    var y=9;//高度
    var shu=20;//雷数
    var lei=new Array();//雷的位置
   //循环出随机雷的位置
    for(var l=0;l<shu;l++){
        var c=Math.floor(Math.random()*parseInt(String(x)+y));
        lei[l]=c;
    }


    for(var i=1;i<x;i++){
        document.write('<tr>');
        for(var s=1;s<y;s++){
            //如果这个位置是雷 显示*
            if(xunhuan(String(i) + String(s))){
                document.write('<td value="*"></td>');
            }else{
                //不是累就显示 周围的雷数
                document.write('<td value="'+leishu(i,s)+'"></td>');

            }

        }
        document.write('</tr>');


    }
    //判断一个坐标是不是雷
    function xunhuan(xy){

       if(jQuery.inArray(parseInt(xy), lei)!=-1){
           return true;
       }else{
           return false;
       }
    }
    //判断一个坐标的 上下左右的坐标
    function leishu(i,s){
        var shu=0;
        //上边
        if((i-1)>=1){
            if(xunhuan(String(i-1)+s)){
                shu+=1;
            }
        }
        //下边
        if((i+1)<y){
            if(xunhuan(String(i+1)+s)){
                shu+=1;
            }
        }
        //左边
        if((s-1)>=1){
            if(xunhuan(String(i)+(s-1))){
                shu+=1;
            }
        }
        //右边
        if((s+1)<x){
            if(xunhuan(String(i)+(s+1))){
                shu+=1;
            }
        }
        //左上
        if((i-1)>=1 && (s-1)>=1){
          if(xunhuan(String(i-1)+String(s-1))){
              shu+=1;
          }
        }
        //右上
        if((i-1)>=1 && (s+1)<x){
            if(xunhuan(String(i-1)+String(s+1))){
                shu+=1;
            }
        }
        //左下
        if((i+1)<y && (s-1)>=1){
            if(xunhuan(String(i+1)+String(s-1))){
                shu+=1;
            }
        }
        //右下
        if((i+1)<y && (s+1)<x){
            if(xunhuan(String(i+1)+String(s+1))){
                shu+=1;
            }
        }

        return shu;
    }
    $(function(){
        $("table").on("click","td", function () {
           $val=$(this).attr("value");
            if($val=='*'){
                $(this).text('雷');
            }else{
                $(this).text($val);
            }

        });
    });

</script>
</table>
</body>
</html>

 

posted on 2016-05-19 20:29  He元素  阅读(620)  评论(0)  编辑  收藏  举报