首页
所有分类
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 相关文章推荐
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
webpack入门+react环境配置
Feb 08 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
微信小程序日期选择器实例代码
Jul 18 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
NFS(1) 临时表(1) Logrotate(1) ftpserver(1) timestamp(1) 黑名单(1) 重复数据(2) 排序失效(1) T-SQL(1) 批处理(1)
You might like
WINXP下apache+php4+mysql
2006/11/25 PHP
新手配置 PHP 调试环境（IIS+PHP+MYSQL）
2007/01/10 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
php中如何执行linux命令详解
2018/11/06 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染（SSR）
2018/04/05 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
JavaScript如何操作css
2020/10/24 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
简单实现python聊天程序
2018/04/01 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
巴西化妆品商店：Lojas Rede
2019/07/26 全球购物
应聘教师自荐信
2013/10/12 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
应付会计岗位职责
2013/12/12 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
体育口号大全
2014/06/18 职场文书
工程部部长岗位职责
2015/02/12 职场文书
七年级作文之环保作文
2019/10/17 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
Python安装使用Scrapy框架
2022/04/12 Python