欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

原生javascript实现连连看游戏

程序员文章站 2023-09-01 19:06:03
本文实例为大家分享了js实现连连看游戏的具体代码，供大家参考，具体内容如下 <...

本文实例为大家分享了js实现连连看游戏的具体代码，供大家参考，具体内容如下

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 聪明女人的婚姻经营之道 避开婚姻中的雷区

下一篇： 离开后，我想我会开始想念你

推荐阅读