首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生javascript实现连连看游戏

Posted in Javascript onJanuary 03, 2019

本文实例为大家分享了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>

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

原生javascript实现连连看游戏

- Author -

iYiu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
基于JavaScript实现表格隔行换色
May 08 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 #Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 #Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 #Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 #Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 #Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 #Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 #Javascript
艾尔登法环(1) explain(2) 守望先锋(1) 巫师(1) 暴雪(1) 帝国时代(1) 我的世界(1) 最终幻想(1) Docker(14) 小缇娜的奇幻之地(1)
You might like
flash用php连接数据库的代码
2011/04/21 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
Web开发之JavaScript
2012/03/29 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
NodeJS学习笔记之Connect中间件模块（二）
2015/01/27 NodeJs
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
vue实现数字滚动效果
2020/06/29 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
QML使用Python的函数过程解析
2019/09/26 Python
python 字段拆分详解
2019/12/17 Python
使用Pycharm分段执行代码
2020/04/15 Python
Python try except else使用详解
2021/01/12 Python
运行时异常与一般异常有何异同？
2014/01/05 面试题
股东合作协议书
2014/09/12 职场文书