首页
所有分类
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去除字符串两端空格的简单实例
Dec 27 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
js实现导航吸顶效果
Feb 24 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
Vue动态组件实例解析
Aug 20 Javascript
vue实现循环切换动画
Oct 17 Javascript
vue中slot（插槽）的介绍与使用
Nov 12 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
js实现扫雷源代码
Nov 27 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
expdp(1) 腾讯云(1) 字符画(1) 数据备份(2) 脚本(1) Vite(1) 外键约束(1) Foreign Key(1) dict(1) hook(1)
You might like
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
这东西价格，可以买几台TECSUN S-2000
2021/03/02 无线电
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JS验证IP，子网掩码，网关和MAC的方法
2015/07/02 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
python获得一个月有多少天的方法
2015/06/04 Python
python调用fortran模块
2016/04/08 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
如何使用python进行pdf文件分割
2019/11/11 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
伦敦时尚生活的缩影：LN-CC
2017/01/24 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
岗位竞聘演讲稿
2014/01/10 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
个人收入证明范本
2014/09/18 职场文书
个人查摆剖析材料
2014/10/04 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
党员自我评价范文2015
2015/03/03 职场文书
工作建议书范文
2019/07/08 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python