这篇文章主要为大家详细介绍了原生javascript实现连连看游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 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 id="agin"><input type="button" onclick="init()" value="再来一把"></p>
<div id="game-box">
</div>
<p>相同图片可以连哦!啊哈哈哈~~ </p>
</body>
</html>

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

最新资讯
内外备受冲击,知识付费走下神坛

内外备受冲击,知识付费

繁荣的背后,知识付费却也面临增长乏力的困境。内容质量
泼天股价背后,宁德时代的资本赌局

泼天股价背后,宁德时代

翻看宁德时代财报,前三季度,营收和利润双双同比下滑。而
社交媒体平台Parler或于1月底恢复上线 CEO称将每天公布进展

社交媒体平台Parler或

据报道,备受争议的社交媒体平台Parler CEO约翰·马茨(Jo
腾讯致歉PC版QQ读取浏览记录:判断是否恶意登录 数据不上传不储存

腾讯致歉PC版QQ读取浏

腾讯表示,读取的数据用于在PC QQ的本地客户端中判断是
监管风暴后续,互联网存款的存量掣肘

监管风暴后续,互联网存

互联网存款没了?互联网存款全剧终?自1月15日商业银行互
投资人称Facebook和Twitter面临10年政治清算 投资吸引力将下降

投资人称Facebook和Tw

苏格兰抵押投资信托公司基金经理詹姆斯·安德森日前表
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,