利用js实现记忆翻牌连连看游戏代码



12 45 16



特效描述:利用js实现 记忆翻牌 连连看 游戏代码,利用js实现记忆翻牌连连看游戏代码

代码结构

1. 引入CSS

<link href="css/layout.css" type="text/css" rel="stylesheet" />
<link href="css/findpair.css" type="text/css" rel="stylesheet" />
<link href="css/xtiper.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script src="js/findpair.js" type="text/javascript"></script>
<script src="js/xtiper.js" type="text/javascript"></script>

3. HTML代码

<table class="ftable">
  <tr><td><div id="fbox"></div></td></tr>
</table>
<div class="fbox_btn fbox_btn1">
  <div class="outdiv">游戏规则:翻开两个格子,如果图案一致则配对,将其挑出,如果图案不一致则盖回去,直到所有格子都配对完成,游戏结束。</div>
</div>
<div class="fbox_btn fbox_btn2">  
  <div id="output"></div>
  <select id="hard" class="hard_select" onChange="changehard()">
    <option value="0">--选择难度--</option>
    <option value="debug">debug 模式</option>
    <option value="1">难度1: 4x4</option>
    <option value="2">难度2: 6x6</option>
    <option value="3">难度3: 8x8</option>
    <option value="4">难度4: 10x10</option>
  </select>
  <div><button onClick="changehard()">新游戏</button></div>
</div>
<script>
//初始化
fbox = new Findpair('fbox','output');
//开始游戏
fbox.newgame();
//选择难度
function changehard(obj)
{
  obj = document.getElementById("hard");
  var index = obj.selectedIndex; // 选中索引
  var result = obj.options[index].value; // 选中值
  if(result==0){
    result = fbox.hard ? fbox.hard : 1;
  }
  if(result){
    //修改难度
    fbox.set({
      hard: result,
    });
    //开始游戏
    fbox.newgame();
  }
}
</script>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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