素材牛VIP会员

原生JavaScript翻牌小游戏

 所属分类:网页特效-游戏/抽奖

 浏览:1147次  评论:1次  更新时间:2019-09-25
牛币素材VIP可免积分下载
原生JavaScript翻牌小游戏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
项目地址(website):https://gitee.com/ovsexia/findpair
素材描述:原生JavaScript翻牌小游戏小游戏,代码注释全。
 标签:翻牌游戏

详细介绍

使用方法

1.加载核心 css 和 js 文件

<link href="css/layout.css" type="text/css" rel="stylesheet" />
<link href="css/findpair.css" type="text/css" rel="stylesheet" />
<script src="js/findpair.js" type="text/javascript"></script>
<!--弹层插件-->
<link href="css/xtiper.css" type="text/css" rel="stylesheet" />
<script src="js/xtiper.js" type="text/javascript"></script>

说明:xtiper.js 是另一个我自己写的弹窗弹层插件,目前还在测试修bug中,稳定之后也会另外上传

2.初始化一个实例

<div id="fbox"></div>
<div id="output"></div>

这一步完成后已经可以运行一个基本的游戏了。

3.进行进一步优化,可修改游戏难度

<select id="hard"  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>

文件目录结构

  • css
    • ┝ findpair.css
    • ┝ layout.css
    • ┝ xtiper.css
  • images
    • ┝ 1.png
    • ┝ 10.png
    • ┝ 11.png
    • ┝ 12.png
    • ┝ 13.png
    • ┝ 14.png
    • ┝ 15.png
    • ┝ 16.png
    • ┝ 17.png
    • ┝ 18.png
    • ┝ 19.png
    • ┝ 2.png
    • ┝ 20.png
    • ┝ 3.png
    • ┝ 4.png
    • ┝ 5.png
    • ┝ 6.png
    • ┝ 7.png
    • ┝ 8.png
    • ┝ 9.png
  • ┝ index.html
  • js
    • ┝ findpair.js
    • ┝ xtiper.js

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)