(编辑:jimmy 日期: 2024/12/25 浏览:2)
本文实例为大家分享了JS实现记忆翻牌游戏的具体代码,供大家参考,具体内容如下
html代码
<div id="game"> <!-- div.block*16>div.pic --> </div>
css代码
* { padding: 0; margin: 0; } #game { width: 600px; height: 600px; margin: 0 auto; } .block { float: left; box-sizing: border-box; width: 25%; height: 25%; border: 2px solid #ddd; background-color: #f0f0f0; } .block:hover { background-color: #2b84d0; } .pic { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; transform: scaleX(0); transition: transform .2s; } .block.on .pic { transform: scaleX(1) }
js代码
var game = { el: '', level: 0, blocks: 0, gameWidth: 600, gameHeight: 600, dataArr: [], judgeArr: [], turnNum: 0, picNum: 20, maxLevel: 3, // 最高游戏级别 init: function (options) { this.initData(options); this.render(); this.handle(); }, initData: function (options) { this.options = options; this.el = options.el; this.level = options.level > this.maxLevel "text-align: center">更多有趣的经典小游戏实现专题,分享给大家:
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏 玩不停
java经典小游戏汇总
javascript经典小游戏汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。