JS 连连看 原生代码

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Jensen_Yao/article/details/64924203
<!DOCTYPE html>
<html>
<head>
<title>连连看</title>
<meta charset="gbk">
<style type="text/css">
  body {
   text-align: center;
  }
  .text {text-align: center; margin-top: 60px; color: #fff;}
  .agin {text-align: center; margin-top: 60px; color: #fff;}
 
  #game-box {
     margin: 60px auto;
     position: relative;
  }
 
  #game-box img {
    float: left;
    width: 59px;
    height: 59px;
    border: 1px solid #000000;
  }
 
  #game-box img.hover {
     border: 1px solid #ffffff;
  }
 
  #game-box img.active {
     border: 1px solid #7fff00;
  }
  #game-box div {
    background-color: #7fff00;
    position: absolute;
  }
</style>
<script type="text/javascript">
    var byId = function (id) {
      return document.getElementById(id);
    }
    var boxWidth = 61; //格子宽度
    var gameBox;
    var mapid = 'game-box';//地图 id
    //22张图片
    var arr = '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22'.split(',');
    var h = 8;  //图片共8行
    var w = 11; //图片共11列
    var boxsLength = h*w;
    var boxArr = {};    //map对象
    var startBox = '';  //开始的格子
    var endBox = '';    //结束的格子
    window.onload = init;
 
    //初始化
    function init() {
      byId('agin').style.display = 'none';//隐藏再来一把按钮
      boxsLength = h*w;//图片方框的个数
      boxArr = {};
      startBox = '';
      endBox = '';
      var str = '';
      gameBox = byId(mapid);
      for (var i = 0; i < h; i++) {
        for (var j = 0; j < w; j++) {
          str += '<img class="" onclick="choose(this);" id="t' + i + '_l'
              + j + '" src="img/blank.gif">'
          // alert(str);
        }//id="t0_l0,t0_l1,t0_l2,t0_l3..."
      }
      gameBox.innerHTML = str;
      gameBox.style.width = w * boxWidth + 'px';
      pushBoxArr();
      toHTML();
    }
 
    // 随机获取坐标
    function getPosition() {
      var t, f;
      (function () {
        t = parseInt(Math.random() * h);
        l = parseInt(Math.random() * w);
        if (('t' + t + '_l' + l) in boxArr) {
           arguments.callee();
        }
      })();
      return {t:t, l:l}
    }
 
    // 创建随机坐标的格子
   function CearteBox(name) {
    var p = getPosition();
    this.name = name;//图片名
    this.t = p.t;//行
    this.l = p.l;//列
    this.position = 't' + p.t + '_l' + p.l;//位置
    this.love = 0;//这个用于特殊,某些图片不同也可以连接
    switch (name) {
      case '100':
      case '200':
        this.love = 1;
        break;
      case '300':
      case '400':
      case '500':
        this.love = 2;
        break;
      case '600':
      case '700':
        this.love = 3;
        break;
      case '800':
      case '900':
       this.love = 4;
       break;
     }
    }
 
    // 产生88个格子(图片框)
    function pushBoxArr() {
      var index = 0;
      var last = arr.length - 1;
      for (var i=0; i< h;i++) {
        for (var j=0;j< w;j++) {
         var a = new CearteBox(arr[index]);//用图片名创建,每张图片四次
         boxArr['t' + a.t + '_l' + a.l] = a;//格子的位置(也是每张图片的id)
         if (index === last) {
            index = 0;
         } else {
            index += 1;
         }
        }
      }
    }
 
    // 初始化html
    function toHTML() {
      for (var i in boxArr) {//遍历所有图片的id
        byId(i).src = 'img/' + boxArr[i].name + '.png';
      }
    }
 
    // choose
    function choose(el) {
      if (el.src.indexOf('blank') >= 0) {//鼠标点击了空白图片
         return false;
      }else{
        el.className = 'active';//更改点击图片的样式
         //第一次点击或点击了同一张图片
        if (startBox == '' || startBox == el.id) {
          startBox = el.id;
        } else {//点击了第二张图片
          endBox = el.id;
          test(boxArr[startBox], boxArr[endBox]);
        }
      }
    }
 
  // 判断是不是可连接格子
  function test(a, b) {
    var can = function (a, b) {
       if (a.name == b.name) {//图片名相同就可以连接
          return true;
       } else {
          if (a.love != 0 && b.love != 0) {
            if (a.love == b.love) {
              return true;
            } else {
              return false;
            }
         } else {
           return false;
         }
      }
   }(a, b);//立即执行
   if (can) {//可以连接
     go(a, b);
   } else {//不能连接
      byId(startBox).className = '';
      startBox = endBox;//指向第二张图片
      endBox = '';
   }
 }
 
  // 判断是否连通
  function go(a, b) {
    var _ap = a.position, _bp = b.position;
    var a = a, b = b, temp, isKill = false;
 
   // 建立四个点,判断是否两两相通
   var pt1, pt2, pt3, pt4;
   // 上到下扫描
   if (isKill == false) {
     //交换位置
     if (a.t > b.t) {
       temp = a;
       a = b;
       b = temp;
     }
     for (var i = -1, len = h; i <= len; i++) {
        pt1 = a;
        pt2 = {t:i, l:a.l};
        pt3 = {t:i, l:b.l};
        pt4 = b;
        if( (!isNull(pt2) && (pt2.t != a.t) ) || ( !isNull(pt3) && (pt3.t != b.t) ) ){
             continue;
        }
        else if (link4pt(pt1, pt2, pt3, pt4)){
            isKill = true;
            kill(a, b);
            showLine(pt1, pt2, pt3, pt4);
            break;
            return;
        }
    }
   }
   
     // 左到右扫描
     if (isKill == false) {
       //交换位置
           if (a.l > b.l) {
                temp = a;
                a = b;
                b = temp;
            }
            for (var i = -1, len = w; i <= len; i++) {
                pt1 = a;
                pt2 = {t:a.t, l:i};
                pt3 = {t:b.t, l:i};
                pt4 = b;
                if( (!isNull(pt2) && (pt2.l != a.l) ) || ( !isNull(pt3) && (pt3.l != b.l) ) ){
                    continue;
                }
                else if (link4pt(pt1, pt2, pt3, pt4)){
                    isKill = true;
                    kill(a, b);
                    showLine(pt1, pt2, pt3, pt4);
                    break;
                    return;
                }
            }
        }
 
        //扫描完毕
        if(isKill == false){
            endBox = '';
            byId(_ap).className = '';
            startBox = _bp;
        }
    }
 
    //干掉格子,删除boxArr中相应格子
    function kill(a, b) {
        boxArr[a.position] = null;
        boxArr[b.position] = null;
        boxsLength -= 2;
        startBox = '';
        endBox = '';
    }
 
    // 显示链接路径
    function showLine(a, b, c, d) {
        var line1 =show2pt(a,b);
        var line2 = show2pt(b,c);
        var line3 = show2pt(c,d);
        var hideLine = function () {
            gameBox.removeChild(line1);
            gameBox.removeChild(line2);
            gameBox.removeChild(line3);
            byId(a.position).src = byId(d.position).src ='img/blank.gif';
            byId(a.position).className = byId(d.position).className = '';
            if (boxsLength<=0) {
                alert('亲,你赢了!好腻害啊。');
                byId('agin').style.display = 'block';
            }
        }
        setTimeout(hideLine, 300);
 
        function show2pt (a, b){
            var top, left, width, height, line = document.createElement('div');
            var a = a, b = b, temp;
            // 交换位置
            if (a.t > b.t || a.l > b.l) {
                temp = a;
                a = b;
                b = temp;
            }
            top = boxWidth * a.t + 30 + 'px';
            left = boxWidth * a.l + 30 + 'px';
            // 同行(t相等)
            if (a.t == b.t) {
                width = boxWidth * (b.l - a.l) + 1 + 'px';
                height = '1px';
            }
            // 同列(l相等)
            if (a.l == b.l) {
                width = '1px';
                height = boxWidth * (b.t - a.t) + 1 + 'px';
            }
            line.style.top = top;
            line.style.left = left;
            line.style.width = width;
            line.style.height = height;
            return gameBox.appendChild(line);
        }
    }
 
    // 单个格子是否空值
    function isNull (a) {
        return boxArr['t' + a.t + '_l' + a.l] ? false : true;
    }
 
    // 2点是否连通
    function link2pt (a, b) {
        var a = a, b = b, temp, canLink = true;
        // 交换位置
        if (a.t > b.t || a.l > b.l) {
            temp = a;
            a = b;
            b = temp;
        }
        if (a.t == b.t) {   //同行(t相等),a在b的左边
            for (var i = a.l + 1, len = b.l - 1; i <= len; i++) {
                if (boxArr['t' + a.t + '_l' + i]) {
                    canLink = false;
                    break;
                }
            }
        }else if (a.l == b.l) {   //同列(l相等),a在b的上边
            for (var i = a.t + 1, len = b.t - 1; i <= len; i++  ) {
                if(boxArr['t' + i + '_l' + a.l]) {
                    canLink = false;
                    break;
                }
            }
        } else {
            throw ('位置错误:a.t=' + a.t + ' b.t=' + b.t + ' a.l=' + a.l + ' b.l=' + b.l);
        }
        return canLink;
    }
 
    // 4个点是否两两连通
    function link4pt (pt1, pt2, pt3, pt4) {
        return link2pt(pt1, pt2) && link2pt(pt2, pt3) && link2pt(pt3, pt4);
    }
</script>
</head>
<body>
<p class="agin" id="agin" style="display: none;"><input type="button" onclick="init()" value="再来一把"></p>
<div id="game-box">
</div>
<p class="text" style="">相同图片可以连哦!啊哈哈哈~~ </p>
</body>
</html>

展开阅读全文

没有更多推荐了,返回首页