HTML5响应式翻牌游戏特效代码下载



15 59 20



特效描述:HTML5 响应式 翻牌游戏,HTML5响应式翻牌游戏特效代码下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/font-awesome.css">

2. HTML代码

  <div class="tile_container">
    <div id="tile_0" class="tile">
      <i id="tile_icon_0" class="fa"></i>
    </div>
    <div id="tile_1" class="tile">
      <i id="tile_icon_1" class="fa"></i>
    </div>
    <div id="tile_2" class="tile">
      <i id="tile_icon_2" class="fa"></i>
    </div>
    <div id="tile_3" class="tile">
      <i id="tile_icon_3" class="fa"></i>
    </div>
    <div id="tile_4" class="tile">
      <i id="tile_icon_4" class="fa"></i>
    </div>
    <div id="tile_5" class="tile">
      <i id="tile_icon_5" class="fa"></i>
    </div>
    <div id="tile_6" class="tile">
      <i id="tile_icon_6" class="fa"></i>
    </div>
    <div id="tile_7" class="tile">
      <i id="tile_icon_7" class="fa"></i>
    </div>
    <div id="tile_8" class="tile">
      <i id="tile_icon_8" class="fa"></i>
    </div>
    <div id="tile_9" class="tile">
      <i id="tile_icon_9" class="fa"></i>
    </div>
    <div id="tile_10" class="tile">
      <i id="tile_icon_10" class="fa"></i>
    </div>
    <div id="tile_11" class="tile">
      <i id="tile_icon_11" class="fa"></i>
    </div>
    <div id="tile_12" class="tile">
      <i id="tile_icon_12" class="fa"></i>
    </div>
    <div id="tile_13" class="tile">
      <i id="tile_icon_13" class="fa"></i>
    </div>
    <div id="tile_14" class="tile">
      <i id="tile_icon_14" class="fa"></i>
    </div>
    <div id="tile_15" class="tile">
      <i id="tile_icon_15" class="fa"></i>
    </div>
  </div>
  <div class="overlay_win" id="overlay_win">
    <h2>You win!</h2>
    <div id="replay">Play again</div>
  </div>
<script>
//These functions help add, remove or toggle css classes
function tog_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem.classList.contains(cl) === true) {
    elem.classList.remove(cl);
  } else {
    elem.classList.add(cl);
  }
}
function add_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem.classList.contains(cl) !== true) {
    elem.classList.add(cl);
  }
}
function rem_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem.classList.contains(cl) === true) {
    elem.classList.remove(cl);
  }
}
//This function adds/removes the selected class of a selected tile
function tog_elem(i, elem) {
  document.getElementById("tile_" + i).onclick = function() {
    tog_class("tile_" + i, "tile_open");
    setTimeout(function() {
      tog_class("tile_icon_" + i, "fa-" + elem);
    }, 0);
  };
}
//This function adds the selected class of a selected tile
function add_elem(i, elem) {
  document.getElementById("tile_" + i).onclick = function() {
    window.opentile = i;
    add_class("tile_" + i, "tile_open");
    add_class("tile_icon_" + i, "fa-" + elem);
    if (window.tilecount == 1) {
      if (i != window.lasttile && window.A[i] == window.A[window.lasttile]) {
        //checks if the 2 stmbols match and aren't the same tile
        var first = document.getElementById("tile_" + i); //get tile id
        var second = document.getElementById("tile_" + window.lasttile); //get tile id
        first.classList.add("tile_closed"); //remove tiles
        second.classList.add("tile_closed"); //remove tiles
        first.onclick = ""; //remove event handlers
        second.onclick = ""; //remove event handlers
        window.paircount++; //increment pair count
        if (window.paircount == 8) {
          //win condition
          //alert('You win!');//show victory banner here
          add_class("overlay_win", "overlay_win_open");
        }
      } else {
        rem_delay(window.opentile, window.lasttile); //clears the tiles with a 1 second delay(to let the player see the tile)
      }
      window.tilecount = 0; //resets the opened tile counter to 0
    } else {
      window.lasttile = i; //sets the last tile
      window.tilecount++;
    } //increments the tile count
  };
}
//This function removes all tile classes (used to hide tiles)
function rem_select(i) {
  rem_class("tile_" + i, "tile_open");
  rem_class("tile_icon_" + i, "fa-eye");
  rem_class("tile_icon_" + i, "fa-star");
  rem_class("tile_icon_" + i, "fa-heart");
  rem_class("tile_icon_" + i, "fa-diamond");
}
//this function hides tiles, with a delay
//it is called when the tiles don't match
function rem_delay(first, second) {
  setTimeout(function() {
    rem_select(first); //closes open tiles
    rem_select(second); //closes open tiles
  }, 1000);
}
//This function shuffles the tiles
function shuffle() {
  var j;
  var t;
  var A = [
    "eye",
    "eye",
    "eye",
    "eye",
    "star",
    "star",
    "star",
    "star",
    "heart",
    "heart",
    "heart",
    "heart",
    "diamond",
    "diamond",
    "diamond",
    "diamond"
  ];
  for (i = 0; i < 16; i++) {
    j = Math.floor(Math.random() * (i + 1));
    t = A[i];
    A[i] = A[j];
    A[j] = t;
  }
  console.log(A);
  return A;
}
//this function resets all tiles
function reset_tiles() {
  for (i = 0; i < 16; i++) {
    rem_select(i); //turns around tiles
    add_elem(i, A[i]); //adds events
    rem_class("tile_" + i, "tile_closed"); //Tiles back to normal opacity..
  }
}
//this function resets the game
function reset() {
  window.A = shuffle(); //shuffle tiles and reset variables
  window.paircount = 0;
  window.tilecount = 0;
  window.lasttile = null;
  window.opentile = null;
  reset_tiles(); //reset all tiles
  rem_class("overlay_win", "overlay_win_open"); //hide victory banner
}
//variables
var A = shuffle(); //shuffle the tiles
var paircount = 0; //tracks the number of matches
var tilecount = 0; //tracks the number of open tiles
var lasttile = null; //tracks the last open tile
var opentile = null; //tracks the current open tile
//do stuff here
for (i = 0; i < 16; i++) {
  add_elem(i, A[i]); //adds event handlers to the tiles.
}
document.getElementById("overlay_win").onclick = function() {
  reset();
};
</script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 旋转翻转 旋转 翻转 小游戏 H5游戏 游戏源码 手机游戏 微信游戏 网页游戏 图片翻转 图片旋转 连连看 连连看游戏 H5连连看游戏 连连看游戏源码

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到