JS 连连看 原生代码

最新推荐文章于 2024-06-25 20:00:00 发布
最新推荐文章于 2024-06-25 20:00:00 发布
阅读量4k 收藏 15
点赞数 2
分类专栏： JavaScript 文章标签： javascript JS动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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="" οnclick="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" οnclick="init()" value="再来一把"></p>
<div id="game-box">
</div>
<p class="text" style="">相同图片可以连哦！啊哈哈哈~~ </p>
</body>
</html>

蚂蚁上的大象
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
JavaScript实现连连看游戏
09-16
时间：2013年7月20日-2013年7月24日 游戏介绍：采用HTML（非HTML5）、CSS、JavaScript编写，网页上部为砖块，下部为挡板。开始后球从挡板中间斜向上移动碰撞墙壁和砖块，碰到砖块后砖块消失。通过键盘的左右键移动位于底部的挡板接球。小球击中砖块后有可能下落绿色或黄色魔法棒，挡板移动碰到黄色魔法棒时挡板变短，碰到绿色魔法棒时挡板变长。 作者：张金鹏
JS连连看游戏源码
05-06
JS连连看 游戏 源码 Javascript
python+pygame实现小游戏连连看之三
最新发布
cxhold的专栏
06-25 420
实现连连看的关键逻辑说明及代码实现，讲解极其详尽。
js连连看
weixin_33813128的博客
07-22 119
js连连看首先见证奇迹的时刻---效果图如下： 实现主要分为三个部分：一、创建元素块二、随机分布元素块三、事件绑定一、创建元素块生成span的元素标签，并将标签添加到父容器中，设置其left、top和background属性。 /* * creSpan 创建元素标签 * n 指当前个数 * mpId 指父容器 * mleft 指其left属性值 *...
JS实现的连连看
08-04
javaScript（js）实现的连连看
JavaScript写一个连连看的游戏
dianyan5615的博客
06-22 266
　　天天看到别人玩连连看， 表示没有认真玩过， 不就把两个一样的图片连接在一起么， 我自己写一个都可以呢。 　　使用Javascript写了一个， 托管到github， 在线DEMO地址查看：打开 　　最终的效果图： 　　 　　写连连看之前要先考虑哪些呢？ 　　　　1：如何判断两个元素可以连接呢， 刚刚开始的时候我也纳闷， 可以参考这里：打开； 　　　　2：模板引擎怎么选择呢...
js记忆翻牌连连看游戏代码
07-24
本项目名为"js记忆翻牌连连看游戏代码"，它是一个完全使用原生JavaScript编写的翻牌小游戏，无需依赖任何外部库，如jQuery或React等。下面我们将深入探讨这款游戏中涉及到的关键知识点。 1. **DOM操作**： - **...
原生javascript实现连连看游戏
10-17
在本教程中，我们将探讨如何使用原生JavaScript实现一个经典的连连看游戏。连连看游戏的目标是找到并消除一对相同的图片，直到...通过不断迭代和优化，我们可以构建出一个完整、功能丰富的原生JavaScript连连看游戏。
原生JS实现连连看小游戏.zip
05-15
4. **JavaScript游戏逻辑**：`game.js`是整个项目的重点，其中包含了连连看游戏的核心算法。主要包括： - **初始化棋盘**：使用数组或其他数据结构来表示游戏状态，初始化时随机分布图标。 - **事件监听**：设置...
原生JavaScript实现连连看游戏(附源码)
10-26
在本文中，我们将探讨如何使用原生JavaScript实现一个经典的连连看游戏。连连看游戏是一种深受玩家喜爱的休闲益智游戏，其核心玩法是找到并消除一对相同的图片。通过分析给出的部分代码，我们可以看到这个游戏的实现...
连连看web实现，原生js
11-15
在这个项目中，我们将探讨如何使用原生JavaScript来实现一个精简版的连连看游戏。原生JavaScript是Web开发的基础，它允许开发者直接操作DOM（文档对象模型），处理事件，以及执行其他必要的网页交互功能，无需依赖...
js 简单的连连看
05-10
用数字做的连连看 连线法则为任意相同数字对可连线
js实现连连看小游戏
11-14
js实现连连看小游戏，有兴趣的下了玩玩。
连连看-js
03-19
NULL 博文链接：https://zhouxianglh.iteye.com/blog/714867
js游戏连连看代码
05-30
js游戏连连看代码，本人亲自编写的一个js小游戏，大家可以参考学习用。
原创纯JS连连看
08-31
纯原创， 纯属个人爱好， 纯javascript编写网页版小游戏
JS连连看源码完美注释版(推荐)
s13166803785的博客
01-21 56
/每次构造4个顶点pt0, pt1, pt2, pt3，然后看他们两两之间是否连通。//每次构造4个顶点pt0, pt1, pt2, pt3，然后看他们两两之间是否连通。//为了算法方便，矩阵的第一行，第一列，最后一行，最后一列都标注为0，天然通路。//开始搜索前对p1,p2排序，使p2尽可能的在p1的右下方。//第一种类型， 两点是否在一条直线上，而且两点之间可直线连通。//如果都在x轴，则自左至右扫描可能的路径，//如果都在y轴，则自上至下扫描可能的路径，
连连看的原生JS实现
weixin_34352005的博客
04-30 184
那天闲来无事，便想找个小游戏来打发时间，后来便找到了连连看， 玩了一会儿感觉无聊，想到各位高手用JS做的各种小游戏，便想自己也来做一个，于是便有了这几天的成果。 代码是用原生JS实现的，只是用来学习和练习的，所以我也没有做美工，连连看的元素直接显示的数字， 以后有时间再把它变成图片。 上图： 贴代码： <script type="text/javascript"...
JavaScript连连看小游戏
dafdafdaf的专栏
09-14 1087
JS连连看源码完美注释版 table{ border-collapse: collapse; } td{ border: solid #ccc 1px; height: 36px; width: 36px; cursor: poi
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值